Form Effects

[Bornfree]

Hi Guys,

I'm working of a form and i have run into a few problems.

1. My form is not working in IE. Only working in Firefox.

2. I wish to have the fields marked by * as compulsory fields. I need a pop up saying they have to enter certain sections.

Below is the code that i currently have.


i also wish to do this to submit the form
Can it all work together?

<form action="process.php" method="post" id="contact_form" form name="formcheck" onsubmit="return formCheck(this);">
                      <input type="hidden" name="redirect" value="thankyou.htm" />

Thanks for all the help!

<script src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>

<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>

<form action="" name="weboptions">
  <p>
    <label></label>
  </p>
  <table width="80%"  border="0" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td bgcolor="#FFFFFF">Name:</td>
      <td bgcolor="#FFFFFF"><input type="text" name="name" size="20" maxlength="20" />
        * </td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">Email:</td>
      <td bgcolor="#FFFFFF"><input type="text" name="email" size="50" maxlength="50" />
        * </td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">Country:</td>
      <td bgcolor="#FFFFFF"><input name="country" type="text" id="country" size="30" maxlength="30" />
        * </td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">Subject:</td>
      <td bgcolor="#FFFFFF"><input type="text" name="subject" size="30" maxlength="30" />
        * </td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#FFFFFF"><label>Individual
          
          <input name="type" type="radio" value="individual" />
      </label>
        <label>Company
        <input name="type" type="radio" value="company" />
        </label>
        <label></label></td>
      </tr>
    <tr>
      <td colspan="2" bgcolor="#FFFFFF"><label> </label>
        <label></label>
        <label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"></label>
        <label></label>
        <table width="484" border="0">
          <tr>
            <td><label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;">
              <input name="hidden" type="hidden" class="DEPENDS ON type BEING individual OR type BEING company" />
            </label>
              <label>Company 
              <input name="company2" type="text" id="company2" class="DEPENDS ON type BEING company " />
              </label></td>
            </tr>
          <tr>
            <td><label>Address                
			<textarea name="address" cols="30" rows="1" class="DEPENDS ON type BEING company " id="address"></textarea></td>
            </tr>
          <tr>
            <td><label>ASB Number (Australia Only)
                <input name="asb" type="text" id="asb" class="DEPENDS ON type BEING company " />
            </label>
              <label></label>
              <label></label></td>
          </tr>
          <tr>
            <td><label></label>
            <label>Request Price List
            <input name="price" type="checkbox" id="price" value="price" class="DEPENDS ON type BEING company "  />
</label>
              <label></label>
              <label></label></td>
            </tr>
        </table>
        <label></label></td>
      </tr>
    <tr>
      <td bgcolor="#FFFFFF">Your Comment:</td>
      <td bgcolor="#FFFFFF"><textarea name="comment" cols="50" rows="10" id="comment"></textarea></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF"><em>* Denotes required field</em><br />
          <input type="submit" name="submit" value="Send" />
          <input type="reset" name="Reset" value="Reset" />      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>

[forum_amnesiac]

Can you post the contents of FormManager.js, we need to see how you've set up the validation

[opoll602]

Its depend upon on your coding and its very difficult to find any system error in our coding documentation. So, please you find or check your code twice. In case of our mistake is there and your form is not open or not able to that software.

[Bornfree]

Here is what i have in my FormManager.js

/*
	Form Manager: A simple method of constructing complex dynamic forms.
	Written by Twey, http://www.twey.co.uk/.
	Use, copying, and modification allowed, so long as credit
	remains intact, under the terms of the GNU General Public License,
	version 2 or later. See http://www.gnu.org/copyleft/gpl.html for details.
*/


var FORM_MANAGER_CONDITION_SEPARATOR = " AND ";
var FORM_MANAGER_POSSIBILITY_SEPARATOR = " OR ";
var FORM_MANAGER_NAME_VALUE_SEPARATOR = " BEING ";
var FORM_MANAGER_DEPENDS = "DEPENDS ON ";
var FORM_MANAGER_CONFLICTS = "CONFLICTS WITH ";
var FORM_MANAGER_EMPTY = "EMPTY";

function addEvent(el, ev, f) {
  if(el.addEventListener)
    el.addEventListener(ev, f, false);
  else if(el.attachEvent) {
    var t = function() {
      f.apply(el);
    };
    addEvent.events.push({'element': el, 'event': ev, 'handler': f});
    el.attachEvent("on" + ev, t);
  } else
    el['on' + ev] = f;
}

function addEvents(els, evs, f) {
  for(var i = 0; i < els.length; ++i)
    for(var j = 0; j < evs.length; ++j)
      addEvent(els[i], evs[j], f);
}

addEvent.events = [];

if(typeof window.event !== "undefined")
  addEvent(window, "unload", function() {
      for(var i = 0, e = addEvent.events; i < e.length; ++i)
        e[i].element.detachEvent("on" + e[i].event, e[i].handler);
    }
  );

function getRadioValue(el) {
  if(!el.length) return null;
  for(var i = 0; i < el.length; ++i)
    if(el[i].checked) return el[i].value;
  return null;
}

function getSelectValue(el) {
  if(!el.tagName  || el.tagName.toLowerCase() !== "select")
    return null;
  return el.options[el.selectedIndex].value;
}

function isElementValue(el, v) {
  if(v === FORM_MANAGER_EMPTY) v = '';
  return (
    getRadioValue(el) == v ||
    getSelectValue(el) == v ||
    (
      el.tagName &&
      el.tagName.toLowerCase() !== "select" &&
      el.value == v
    )
  );
}

function setupDependencies() {
  var showEl = function() {
    this.style.display = "";
    if(this.parentNode.tagName.toLowerCase() == "label")
      this.parentNode.style.display = "";
  };
  var hideEl = function() {
    this.style.display = "none";
    if(typeof this.checked !== "undefined") this.checked = false;
    else this.value = "";
    if(this.parentNode.tagName.toLowerCase() == "label")
      this.parentNode.style.display = "none";
    this.hidden = true;
  };
  var calcDeps = function() {
    for(var i = 0, e = this.elements; i < e.length; ++i) {
      e[i].hidden = false;
      for(var j = 0, f = e[i].className.split(FORM_MANAGER_CONDITION_SEPARATOR); j < f.length; ++j)
        if(f[j].indexOf(FORM_MANAGER_DEPENDS) === 0) {
          for(var k = 0, g = f[j].substr(FORM_MANAGER_DEPENDS.length).split(FORM_MANAGER_POSSIBILITY_SEPARATOR); k < g.length; ++k)
            if(g[k].indexOf(FORM_MANAGER_NAME_VALUE_SEPARATOR) === -1) {
	      if(e[g[k]] && e[g[k]].checked) break;
            else if(k + 1 == g.length)
                e[i].hide();
            } else {
              var n = g[k].split(FORM_MANAGER_NAME_VALUE_SEPARATOR),
                v = n[1];
              n = n[0];
	      if(e[n])
	        if(isElementValue(e[n], v)) break;
	        else if(k + 1 == g.length) e[i].hide();
	    }
        } else if(f[j].indexOf(FORM_MANAGER_CONFLICTS) === 0) {
          if(f[j].indexOf(FORM_MANAGER_NAME_VALUE_SEPARATOR) === -1) {
	    if(e[f[j].substr(FORM_MANAGER_CONFLICTS.length)] && e[f[j].substr(FORM_MANAGER_CONFLICTS.length)].checked) {
              e[i].hide();
              break;
            }
          } else {
            var n = f[j].substr(FORM_MANAGER_CONFLICTS.length).split(FORM_MANAGER_NAME_VALUE_SEPARATOR),
              v = n[1];
            n = n[0];
            if(e[n]) {
              if(isElementValue(e[n], v)) {
                e[i].hide();
                break;
              }
            }
          }
        }
      if(!e[i].hidden) e[i].show();
    }
  };
  var changeHandler = function() {
    this.form.calculateDependencies();
    return true;
  };
  for(var i = 0; i < arguments.length; ++i) {
    for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
      addEvents([e[j]], ["change", "keyup", "focus", "click", "keydown"], changeHandler);
      e[j].hide = hideEl;
      e[j].show = showEl;
    }

    (e = window.document.forms[arguments[i]]).calculateDependencies = calcDeps;
    e.calculateDependencies();
  }
}

[Bornfree]

Hi Guys,

I managed to solve my above two issues! I now have another issue. In my form when i user selects and option (eg Company) then one of the optional fields should be compulsory. For eg if the user selects company (in the below code) then the company name should be entered as compulsory. If the user selects individual then the company name is not required. Below is my current code.

Thanks for any help

<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("name", "email", "country", "subject",);
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("name", "email", "country", "subject",);
	// dialog message
	var alertMsg = "Please complete the following fields:\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}

	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->
</script>

<script src="FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
****************************************************/
</script>

<script type="text/javascript">
window.onload = function() {
    setupDependencies('weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>

<form action="processtest.php" name="weboptions" method="post" id="contact_form" onsubmit="return formCheck(this);">
                      <input type="hidden"  value="thankyou.htm" />
					  
  <table width="80%"  border="0" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td width="29%" bgcolor="#FFFFFF"> * Name:</td>
      <td width="71%" bgcolor="#FFFFFF"><input type="text" name="name" size="20" maxlength="20" /></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"> * Email:</td>
      <td bgcolor="#FFFFFF"><input type="text" name="email" size="50" maxlength="50" /></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"> * Country:</td>
      <td bgcolor="#FFFFFF"><input name="country" type="text" id="country" size="30" maxlength="30" /></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"> * Subject:</td>
      <td bgcolor="#FFFFFF"><input type="text" name="subject" size="30" maxlength="30" /></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><label>Individual
          <input type="radio" name="type" value="individual" />
      </label>
        <label></label></td>
      <td bgcolor="#FFFFFF"><label> </label>
Company
  <label>
  <input type="radio" name="type" value="company" />
  </label></td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#FFFFFF"><p><label></label>
          <label></label>
          <label></label></p>
        <table width="589" border="0">
          <tr>
            <td width="217"><p>
              <label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;">
                <input name="hidden2" type="hidden" class="DEPENDS ON type BEING individual OR type BEING company" />
                </label>
                <label> Company Name </label>
            </p>              </td>
            <td width="362"><input name="Company Name" type="text" class="DEPENDS ON type BEING company" id="Company Name" size="50" maxlength="80"/></td>
          </tr>
          <tr>
            <td>ASB Number (Australia Only)</td>
            <td><input name="asb" type="text" class="DEPENDS ON type BEING company" id="asb" size="25" maxlength="30" /></td>
          </tr>
          <tr>
            <td>Address</td>
            <td><textarea name="address" class="DEPENDS ON type BEING company" cols="40" rows="5" id="address"></textarea></td>
          </tr>
          <tr>
            <td>Request Price List</td>
            <td><label>
              <input name="price" type="checkbox" class="DEPENDS ON type BEING company" id="price" />
            </label>
              <label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;">
              <input name="hidden3" type="hidden" class="CONFLICTS WITH pass BEING EMPTY" />
              </label></td>
          </tr>
        </table>
        <p>
          <label></label>
        </p>
        </td>
      </tr>
    <tr>
      <td bgcolor="#FFFFFF">Your Comment:</td>
      <td bgcolor="#FFFFFF"><textarea name="comment" cols="50" rows="10" id="comment"></textarea></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">&nbsp;</td>
      <td bgcolor="#FFFFFF"><em>* Required field</em><br />
          <input type="submit" name="submit" value="Send" />
          <input type="reset" name="Reset" value="Reset" />      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
  </form>