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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts

    :: need some help making function more versatile ::

    hi peeps!

    i am doing a validation script but i need to get everything to be called from the function on the page - sorry its hot here!

    its being called like: onClick="validateText('text1,text2')" so i can stick all the scripts in a .js rather than the header etc...

    you will see what i mean but i cant get it working.... TIA!

    Code:
    <HTML>
    <HEAD>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>:: validations ::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript">
    function validateText(tfield) {
    //alert(which);
    d=document.forms[0];
    txtmsg='Please fill out all text fields marked * - thankyou';
    var textval = new Array(tfield);
    
    	for (var i=0; i<textval.length; i++) {
    	//alert(textval[i]);
    		if(d.elements[textval[i]].value=='') {
    		alert(txtmsg); 
    		d.elements[textval[i]].focus(); 
    		return false
    		}
    	}
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM METHOD=post NAME="dummyform">
    <p>select1
        <SELECT NAME="select1" CLASS="vacancyfield" id="select1">
          <OPTION>**Please choose **
          <OPTION>Building Magazine
          <OPTION>Construction News
          <OPTION>Contract Journal
          <OPTION>Employee referral
          <OPTION>Speculative web search
          <OPTION>Other (see below)
        </SELECT>
    </p>
    <p>select2 
      <SELECT NAME="select2" CLASS="vacancyfield" id="select2">
        <OPTION>**Please choose **
        <OPTION>Building Magazine
        <OPTION>Construction News
        <OPTION>Contract Journal
        <OPTION>Employee referral
        <OPTION>Speculative web search
        <OPTION>Other (see below)
      </SELECT>
    </p>
    <p>text1 
      <INPUT NAME="text1" VALUE="" CLASS="vacancyfield" type="text">
    </p>
    <p>
      text2 
        <INPUT NAME="text2" VALUE="" CLASS="vacancyfield" type="text"> 
    </p>
    <p>radio1 
      <INPUT TYPE=radio NAME="radio1" VALUE="Yes" CLASS="vacancyradio">
      Yes
      <INPUT TYPE=radio NAME="radio1" VALUE="No" CLASS="vacancyradio">
      No</p>
    <p>radio2 
      <INPUT TYPE=radio NAME="radio2" VALUE="Yes" CLASS="vacancyradio">
    Yes
    <INPUT TYPE=radio NAME="radio2" VALUE="No" CLASS="vacancyradio">
    No</p>
    <p>
      <INPUT TYPE=button VALUE="Submit" onClick="validateText('text1,text2')">
      </p>
    </FORM>
    </BODY>
    </HTML>
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try using the arguments array instead of textval

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    huh? im not good at arrays - can you explain as if i am a total sausage
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    function validateText(textval) {
    //alert(which);
    d=document.forms[0];
    txtmsg='Please fill out all text fields marked * - thankyou';
    var textval = new Array(tfield); <-- remove this

    and then...

    onClick="validateText(['text1','text2'])"


    Note: This is not what Garadon suggested but another way of doing it. Garadon's suggestion is fine too.
    Last edited by glenngv; 06-09-2004 at 11:20 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    thanks m8 - im sure i will be back again when i get the radio etc bit to work one
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    ok, what am i doing wrong here then?

    a) the functions just keep going even tho i have a return false in there.. ??
    b) the radio oneseven tho checked still dont validate?
    c) is there a way to focus on the radio boxes not filled out?
    d) why cant i add the color to them as with the others?
    e) why cant i declare the d=document.forms[0]; outside the functions?

    TIA!!!

    Code:
    <HTML>
    <HEAD>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>:: validations ::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript">
    function validateText(textval) {
      d=document.forms[0];
      txtmsg='Please fill out all text fields marked * - thankyou';
    
    	for (var i=0; i<textval.length; i++) {
    		if(d.elements[textval[i]].value=='') {
    		alert(txtmsg); 
    		d.elements[textval[i]].style.background='#cccccc';
    		d.elements[textval[i]].focus(); 
    		return false;
    		}
    		else d.elements[textval[i]].style.background='#FFFFFF';
    	}
    }
    
    function validateSelect(selectval) {
      d=document.forms[0];
      selectmsg='Please fill out all drop down boxes marked * - thankyou';
    
    	for (var i=0; i<selectval.length; i++) {
    		if(d.elements[selectval[i]].selectedIndex==0) {
    		alert(selectmsg); 
    		d.elements[selectval[i]].style.background='#cccccc';
    		d.elements[selectval[i]].focus(); 
    		return false;
    		}
    		else d.elements[selectval[i]].style.background='#FFFFFF';
    	}
    }
    
    function validateRadio(radioval) {
      d=document.forms[0];
      radiomsg='Please fill out all radio boxes marked * - thankyou';
    
    	for (var i=0; i<radioval.length; i++) {
    		if (!(d.elements[radioval[i]].checked)) {
    		alert(radiomsg); 
    		return false;
    		}
    	}
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM METHOD=post NAME="dummyform">
    <p>select1
        <SELECT NAME="select1" CLASS="vacancyfield" id="select1">
          <OPTION>**Please choose **
          <OPTION>Building Magazine
          <OPTION>Construction News
          <OPTION>Contract Journal
          <OPTION>Employee referral
          <OPTION>Speculative web search
          <OPTION>Other (see below)
        </SELECT>
    </p>
    <p>select2 
      <SELECT NAME="select2" CLASS="vacancyfield" id="select2">
        <OPTION>**Please choose **
        <OPTION>Building Magazine
        <OPTION>Construction News
        <OPTION>Contract Journal
        <OPTION>Employee referral
        <OPTION>Speculative web search
        <OPTION>Other (see below)
      </SELECT>
    </p>
    <p>text1 
      <INPUT NAME="text1" VALUE="" CLASS="vacancyfield" type="text">
    </p>
    <p>
      text2 
        <INPUT NAME="text2" VALUE="" CLASS="vacancyfield" type="text"> 
    </p>
    <p>radio1 
      <INPUT TYPE=radio NAME="radio1" VALUE="Yes" CLASS="vacancyradio">Yes
      <INPUT TYPE=radio NAME="radio1" VALUE="No" CLASS="vacancyradio">No
      </p>
    <p>radio2 
      <INPUT TYPE=radio NAME="radio2" VALUE="Yes" CLASS="vacancyradio">Yes
    <INPUT TYPE=radio NAME="radio2" VALUE="No" CLASS="vacancyradio">No
    </p>
    <p>
      <INPUT TYPE=button VALUE="Submit" onClick="validateText(['text1','text2']); validateSelect(['select1','select2']); validateRadio(['radio1','radio2'])">
      </p>
    </FORM>
    </BODY>
    </HTML>
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by babelfish
    ok, what am i doing wrong here then?

    a) the functions just keep going even tho i have a return false in there.. ??
    b) the radio oneseven tho checked still dont validate?
    c) is there a way to focus on the radio boxes not filled out?
    d) why cant i add the color to them as with the others?
    e) why cant i declare the d=document.forms[0]; outside the functions?

    TIA!!!
    a) You should call all the functions like this

    <input type="submit" onclick="return validateText([...]) && validateSelect([...]) && validateRadio([...])" />

    and make sure you have return true at the end of those functions.

    Though, it's better to put the validations in the form onsubmit handler.

    <form onsubmit="return validateText([...]) && validateSelect([...]) && validateRadio([...])" />

    You can then pass the form reference to the validation functions easily.

    <form onsubmit="return validateText(this, [...]) && validateSelect(this, [...]) && validateRadio(this, [...])" />

    And the functions now has the form reference. See b) for sample.

    b) The code should be like this
    Code:
    function validateRadio(f, radioval) {
      var radiomsg='Please fill out all radio boxes marked * - thankyou';
      var radioGrp;
      var hasCheck;
      for (var i=0; i<radioval.length; i++) {
        radioGrp = f.elements[radioval[i]]; 
        hasCheck = false;
        for (var j=0; i<radioGrp.length; j++) {
           if (radioGrp[j].checked) {
              hasCheck=true; 
              break;
           }
        }
        if (!hasCheck){
           alert(radiomsg);
           radioGrp[0].focus();
           return false;
        }
      }
      return true;
    }
    c) See code in b)

    d) Background color for radio buttons only cover the side, excluding the inside of the circle.

    e) Because you're calling document.forms[0] when the form has not yet loaded. You can declare a global variable that refers to the form on onload. But you don't need it, see the suggestion in a)
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    fisrt two work perfectly now, radio one does nothing...?!?

    any ideas?

    Code:
    <HTML>
    <HEAD>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>:: validations ::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript">
    function validateText(f, textval) {
      txtmsg='Please fill out all text fields marked * - thankyou';
    
    	for (var i=0; i<textval.length; i++) {
    		if(f.elements[textval[i]].value=='') {
    		alert(txtmsg); 
    		f.elements[textval[i]].style.background='#cccccc';
    		f.elements[textval[i]].focus(); 
    		return false;
    		}
    		else f.elements[textval[i]].style.background='#FFFFFF';
    	}
    	return true;
    }
    
    function validateSelect(f, selectval) {
      selectmsg='Please fill out all drop down boxes marked * - thankyou';
    
    	for (var i=0; i<selectval.length; i++) {
    		if(f.elements[selectval[i]].selectedIndex==0) {
    		alert(selectmsg); 
    		f.elements[selectval[i]].style.background='#cccccc';
    		f.elements[selectval[i]].focus(); 
    		return false;
    		}
    		else f.elements[selectval[i]].style.background='#FFFFFF';
    	}
    	return true;
    }
    
    function validateRadio(f, radioval) {
    
      var radiomsg='Please fill out all radio boxes marked * - thankyou';
      var radioGrp;
      var hasCheck;
      for (var i=0; i<radioval.length; i++) {
        radioGrp = f.elements[radioval[i]]; 
        hasCheck = false;
        for (var j=0; i<radioGrp.length; j++) {
           if (radioGrp[j].checked) {
              hasCheck=true; 
              break;
           }
        }
        if (!hasCheck){
           alert(radiomsg);
           radioGrp[0].focus();
           return false;
        }
      }
      return true;
    }
    
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME="dummyform" onSubmit="return validateText(this, ['text1','text2']) && validateSelect(this, ['select1','select2']) && validateRadio(this, ['radio1','radio2'])">
    <p>select1
        <SELECT NAME="select1"  id="select1">
          <OPTION>**Please choose **
          <OPTION>Building Magazine
          <OPTION>Construction News
          <OPTION>Contract Journal
          <OPTION>Employee referral
          <OPTION>Speculative web search
          <OPTION>Other (see below)
        </SELECT>
    </p>
    <p>select2 
      <SELECT NAME="select2"  id="select2">
        <OPTION>**Please choose **
        <OPTION>Building Magazine
        <OPTION>Construction News
        <OPTION>Contract Journal
        <OPTION>Employee referral
        <OPTION>Speculative web search
        <OPTION>Other (see below)
      </SELECT>
    </p>
    <p>text1 
      <INPUT NAME="text1" VALUE=""  type="text">
    </p>
    <p>
      text2 
        <INPUT NAME="text2" VALUE=""  type="text"> 
    </p>
    <p>radio1 
      <INPUT TYPE=radio NAME="radio1" VALUE="Yes">Yes
      <INPUT TYPE=radio NAME="radio1" VALUE="No" >No
      </p>
    <p>radio2 
      <INPUT TYPE=radio NAME="radio2" VALUE="Yes"  >Yes
    <INPUT TYPE=radio NAME="radio2" VALUE="No" >No
    </p>
    <p>
      <INPUT TYPE=submit VALUE="Submit">
      <INPUT TYPE=reset VALUE="Reset">
      </p>
    </FORM>
    </BODY>
    </HTML>
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Sorry, I had a mixup of the counter variables for the 2 for loops

    for (var j=0; i<radioGrp.length; j++) {

    Change the i to j

    You may want to validate the select fields first before the text fields to follow the order of the fields in the form

    onsubmit="return validateSelect(this, ['select1','select2']) && validateText(this, ['text1','text2']) && validateRadio(this, ['radio1','radio2'])"
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    the radio section now works but it doesnt focus sorry to be such a pain - i really appreciate your help m8!
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It focuses on the first item in the radio group. Can't you see the square border around it?

    To confirm the first radio has the focus, try pressing the space bar after the alert has displayed and it will be checked.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    i couldnt see the border! but it had focus.... most odd! i have just added radioGrp[0].style.backgroundColor='#CC0000'; to temporarily show it more clearly... maybe its an IE5 thing?

    THANKS for your help m8!!!
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    When you tab through the fields, do you see the border on the radio button when it receives focus?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    yup.... i see the focus when i tab

    its an odd one as it is definately focussing but not showing the marching ants we usually see
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson


  •  

    Posting Permissions

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