Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form dropdown to show a number of <div> tags.

    Hi folks, first question here. I'm developing a registration form for a site and have no problem getting a form working, the bit I have no clue about is this dropdown part.

    What I want is a dropdown with the numbers 1-10 in the list. When 1 is selected it shows 1 section of the reg form, when 5 is selected it shows 5 reg form sections, etc.

    The other annoying part is that there are fields requiring validation throughout the form (they'll be more complex than the basic one below), but obviously, if a section is hidden I don't want a validation error for a field you cannot see.

    What I've done so far is to build the form with the dropdown at the top and the 10 sections with the validation fields inside <div> tags with ids, but I have no clue how to implement the code needed to do show a number of sections by the choice in the dropdown.

    I'm sure something like this has been done before, but having searched around here and the web, I haven't found something that matches exactly. I did find something similar, but I'm not a JS programmer, I have very little experience of looking at JS, so major handholding is needed.

    Thanks for reading!

    This is the HTML form with validation js autogenerated by FrontPage (yes I know, but it's handy for form building):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
      <meta http-equiv="Content-Language" content="en-gb">
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Conference registrations Registration</title>
    
    </head>
    
    <body>
    
    <!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --><script Language="JavaScript" Type="text/javascript"><!--
    function Validator(theForm)
    {
    
      if (theForm.firstname1.value == "")
      {
        alert("Please enter a value for the \"firstname1\" field.");
        theForm.firstname1.focus();
        return (false);
      }
    
      if (theForm.surname1.value == "")
      {
        alert("Please enter a value for the \"surname1\" field.");
        theForm.surname1.focus();
        return (false);
      }
    
      if (theForm.firstname2.value == "")
      {
        alert("Please enter a value for the \"firstname2\" field.");
        theForm.firstname2.focus();
        return (false);
      }
    
      if (theForm.surname2.value == "")
      {
        alert("Please enter a value for the \"surname2\" field.");
        theForm.surname2.focus();
        return (false);
      }
    
      if (theForm.firstname3.value == "")
      {
        alert("Please enter a value for the \"firstname3\" field.");
        theForm.firstname3.focus();
        return (false);
      }
    
      if (theForm.surname3.value == "")
      {
        alert("Please enter a value for the \"surname3\" field.");
        theForm.surname3.focus();
        return (false);
      }
    
      if (theForm.firstname4.value == "")
      {
        alert("Please enter a value for the \"firstname4\" field.");
        theForm.firstname4.focus();
        return (false);
      }
    
      if (theForm.surname4.value == "")
      {
        alert("Please enter a value for the \"surname4\" field.");
        theForm.surname4.focus();
        return (false);
      }
    
      if (theForm.firstname5.value == "")
      {
        alert("Please enter a value for the \"firstname5\" field.");
        theForm.firstname5.focus();
        return (false);
      }
    
      if (theForm.surname5.value == "")
      {
        alert("Please enter a value for the \"surname5\" field.");
        theForm.surname5.focus();
        return (false);
      }
    
      if (theForm.firstname6.value == "")
      {
        alert("Please enter a value for the \"firstname6\" field.");
        theForm.firstname6.focus();
        return (false);
      }
    
      if (theForm.surname6.value == "")
      {
        alert("Please enter a value for the \"surname6\" field.");
        theForm.surname6.focus();
        return (false);
      }
    
      if (theForm.firstname7.value == "")
      {
        alert("Please enter a value for the \"firstname7\" field.");
        theForm.firstname7.focus();
        return (false);
      }
    
      if (theForm.surname7.value == "")
      {
        alert("Please enter a value for the \"surname7\" field.");
        theForm.surname7.focus();
        return (false);
      }
    
      if (theForm.firstname8.value == "")
      {
        alert("Please enter a value for the \"firstname8\" field.");
        theForm.firstname8.focus();
        return (false);
      }
    
      if (theForm.surname8.value == "")
      {
        alert("Please enter a value for the \"surname8\" field.");
        theForm.surname8.focus();
        return (false);
      }
    
      if (theForm.firstname9.value == "")
      {
        alert("Please enter a value for the \"firstname9\" field.");
        theForm.firstname9.focus();
        return (false);
      }
    
      if (theForm.surname9.value == "")
      {
        alert("Please enter a value for the \"surname9\" field.");
        theForm.surname9.focus();
        return (false);
      }
    
      if (theForm.firstname10.value == "")
      {
        alert("Please enter a value for the \"firstname10\" field.");
        theForm.firstname10.focus();
        return (false);
      }
    
      if (theForm.surname10.value == "")
      {
        alert("Please enter a value for the \"surname10\" field.");
        theForm.surname10.focus();
        return (false);
      }
      return (true);
    }
    //--></script><!--webbot BOT="GeneratedScript" endspan --><form method="post" action="regformhandler.php" onsubmit="return Validator(this)" language="JavaScript" name="regform">
      <table id="topTable" border="0" width="100%">
        
          <tr>
            <td>No. of Registrations: <select size="1" name="numberofreg">
            <option>--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            </select></td>
          </tr>
        
      </table>
    
    <div id="registration01">
      <table id="1st" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 1</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title1" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname1" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname1" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration02">
      <table id="2nd" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 2</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title2" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname2" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname2" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration03">
      <table id="3rd" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 3</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title3" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname3" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname3" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration04">  
      <table id="4th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 4</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title4" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname4" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname4" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration05">
      <table id="5th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 5</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title5" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname5" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname5" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="attndee06">
      <table id="6th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 6</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title6" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname6" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname6" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration07">
        <table id="7th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 7</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title7" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname7" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname7" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration08">
      <table id="8th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 8</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title8" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname8" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname8" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration09">
      <table id="9th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 9</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title9" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname9" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname9" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration10">
      <table id="10th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 10</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title10" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname10" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname10" size="20" type="text">*</td>
          </tr>
        
     </table>
    </div>
    
      <table id="buttons" border="0" cellpadding="0" width="100%">
        
          <tr>
            <td><input value="Send" name="send" type="submit"><input value="Reset" name="reset" type="reset"></td>
          </tr>
        
      </table>
    </form>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    This will produce the functionality you want. I've modified the validation function quite a bit so let me know if you need help extending it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
      <meta http-equiv="Content-Language" content="en-gb">
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Conference registrations Registration</title>
    
    </head>
    
    <body>
    
    <!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --><script type="text/javascript"><!--
    function Validator(theForm)
    {
    	var numberRegExp= /\d+/; //matches any string containing one or more digits (NB only gets first number it sees).
    	var matches, inputNameNumber, message="";
    	for(i=0; i<theForm.elements.length; i++){//loop round all elements in the form.
    		if ( (theForm.elements[i].name.indexOf("firstname")>=0) || (theForm.elements[i].name.indexOf("surname")>=0) )//check name contains either the string "firstname" or "surname".
    		{
    			matches = numberRegExp.exec(theForm.elements[i].name);//extract number from name using regular expression.
    			if (matches != null) {
    				inputNameNumber = "";
    				for (j = 0; j < matches.length; j++) {
    					inputNameNumber = inputNameNumber + matches[j];//get the number we've found.
    				}
    				inputNameNumber = parseInt(inputNameNumber);
    
    				if(inputNameNumber!="NaN"){//check it's not an empty string
    					if(theForm.elements[i].value=="" && inputNameNumber<=divNum){//check value is empty and input number is less than number of divs on display.
    						message+="Please enter a value for the \""+ theForm.elements[i].name +"\" field." + "\n";
    					}
    				}
    			}// if no matches, ignore.
    		}//if input name doesn't contain "firstname" or "surname" ignore
    	}
    
    	if(message!=""){
    		alert(message);
    		return false;
    	}
    	else{
    		return true;
    	}
    }
    
    var divNum=0;
    function showDivs(obj){
    	var i, num;
    	divNum = parseInt(obj.options[obj.selectedIndex].value);
    	
    	for(i=1; i<=10; i++){
    		num = (i<10) ? "0"+i : i;
    		
    		if(document.getElementById('registration'+num)){ // if the div exists.
    			if(i<=divNum){// display.
    				document.getElementById('registration'+num).style.display="block";
    			}
    			else{ // hide.
    				document.getElementById('registration'+num).style.display="none";
    			}
    		}
    	}
    }
    
    function hideAllDivsOnLoad(){
    	showDivs(document.getElementById("numberofreg"));
    }
    
    addLoadEvent(hideAllDivsOnLoad);
    
    // add an onload event without destroying any previously set onload functions.
    function addLoadEvent(func) {
    	var oldonload = window.onload;
    	if (typeof window.onload != 'function') {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			if (oldonload) {
    				oldonload();
    			}
    			func();
    		}
    	}
    }
    //--></script><!--webbot BOT="GeneratedScript" endspan --><form method="post" action="regformhandler.php" onsubmit="return Validator(this)" name="regform">
      <table id="topTable" border="0" width="100%">
        
          <tr>
            <td>No. of Registrations: <select size="1" name="numberofreg" id="numberofreg" onchange="showDivs(this)">
            <option value="0" selected>-Select-</option>
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">9</option>
            <option value="10">10</option>
            </select></td>
          </tr>
        
      </table>
    
    <div id="registration01">
      <table id="1st" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 1</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title1" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname1" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname1" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration02">
      <table id="2nd" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 2</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title2" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname2" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname2" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration03">
      <table id="3rd" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 3</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title3" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname3" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname3" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration04">  
      <table id="4th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 4</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title4" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname4" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname4" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration05">
      <table id="5th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 5</td>
            </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title5" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname5" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname5" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration06">
      <table id="6th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 6</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title6" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname6" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname6" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration07">
        <table id="7th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 7</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title7" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname7" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname7" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration08">
      <table id="8th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 8</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title8" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname8" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname8" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration09">
      <table id="9th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 9</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title9" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname9" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname9" size="20" type="text">*</td>
          </tr>
        
      </table>
    </div>
    
    <div id="registration10">
      <table id="10th" border="0" width="100%">
        
          <tr>
            <td colspan="2">
            <hr></td>
          </tr>
          <tr>
            <td colspan="2">Registration 10</td>
          </tr>
          <tr>
            <td>Title:</td>
            <td><input name="title10" size="10" type="text"></td>
          </tr>
          <tr>
            <td>First Name:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname10" size="20" type="text">*</td>
          </tr>
          <tr>
            <td>Surname:</td>
            <td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname10" size="20" type="text">*</td>
          </tr>
        
     </table>
    </div>
    
      <table id="buttons" border="0" cellpadding="0" width="100%">
        
          <tr>
            <td><input value="Send" name="send" type="submit"><input value="Reset" name="reset" type="reset"></td>
          </tr>
        
      </table>
    </form>
    </body>
    </html>
    Hope it helps.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Tried to edit my last post but it didn't seem to want to work, anyway just some minor additional notes:
    You can't start html IDs with numbers so you need to change your table ids.
    There is no "language" attribute for the form element.
    I've renamed div 6 from "attndee06" to "registration06".

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! Thanks, I'll have a play with it.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mcjwb, that's utterly brilliant. Thank you so much!

    Expanding textfield validation was a dream and I've managed to get most of it working. The only thing I'm struggling with is validation on the radio buttons and dropdowns in the expanded version of the form. It's just to make sure they do choose and option other than -Select- and that they don't miss the radio buttons out.

    Complete page code is too long to post, so I've attached it as a file. Rename to form.htm, I didn't zip it.
    Attached Files Attached Files

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Ok, I've modified the validate function to handle different types of inputs, however it's not perfect.
    • You'll get a message for each radio button even though you can only select one of them.
    • If you have more than 4 registration forms, due to the limited number of characters you can put in an alert box, you don't get the full message.
    Also I've renamed your numberofreg and cardholder inputs by putting a 0 on the end so I didn't have to modify the validation function even more. The validation function only checks inputs if they have a number in their name.

    One other thing, it's probably not the best to tell users which field they haven't filled in by using the inputs html name, although I'm sure you'd thought of that. Perhaps the final version will highlight the actual input that needs filling in, therefore providing the user with a visuable reference on what's wrong? Might draw the line on doing all the work for that mod!

    rename the file, it' not zipped.
    Attached Files Attached Files

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mcjwb View Post
    Ok, I've modified the validate function to handle different types of inputs, however it's not perfect.
    • You'll get a message for each radio button even though you can only select one of them.
    Okay, I think I'll make that a dropdown.
    • If you have more than 4 registration forms, due to the limited number of characters you can put in an alert box, you don't get the full message.
    Ok, thanks for the heads up.

    Thank you for all your hard work mcjwb.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •