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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    retaining input in web form

    this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked.
    i've to check all the radio button in order to proceed with submission.
    here is the code...anyone pls help how to solve this..tq

    <script type = "text/javascript">

    function validate_form ( )
    {
    valid = true;

    if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) )
    {
    alert ( "Please choose your Gender: Male or Female" );
    gender.focus();
    valid = false;
    }

    if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) )
    {
    alert ( "Please choose your Nationality" );
    nationality.focus();
    valid = false;
    }


    if ( document.myform.age.selectedIndex == 0 )
    {
    alert ( "Please select your Age." );
    age.focus();
    valid = false;
    }
    return valid;
    }




    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    We need to see your HTML - <form> tag and submit button.

    gender.focus(); // you cannot focus on two radio buttons at the same time, and in any case you must address it by document.formname.elementname.focus();

    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok.this is my html code

    Code:
    <HTML>
    <HEAD>
    <H2><P ALIGN="CENTER" 
    <TITLE><font color="blue"> ABC:</font></TITLE><H2></P> 
    <H3><P ALIGN ="CENTER"><font color="ff0ff0"><font face="arial"> CDE </font></font></P></H3>
    </HEAD>
    <body>
    <form name="myform" onSubmit="return validate_form ( );">
    
      <table border="5" cellspacing="5" cellpadding="3" align="center" bgcolor="#FFFFFF">
        <tr>
    	 <th colspan="15" bgcolor="66FFCC"> Part A: </th>
    	 <tr> 
          <td>Please select your gender:</td>
          <td colspan="15"><input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female</td>
        </tr>
    	  <td>Nationality:</td>
    	  <td colspan="15"><input type="radio" name="nationality" value="Malaysian">Malaysian<input type="radio" name="nationality" value="Others (please specify)">Others(please specify)<input type="text" size="30" maxlength="30" /></td>
        <tr>
          <td>Please select your age group:</td>
    	  <td colspan="15">
        <select name="age">
    	    <option value="">Please Select an Option:</option>
                <option value="1"><25</option>
                <option value="2">25-35</option>
                <option value="3">36-45</option>
                <option value="4">46-55</option>
                <option value="5">>56</option>
            </select>
        </tr>
      </table><br />
    
     <input type="submit" name="send" value="Send Details">
      <input type="reset" value="Reset!">
      
    </form>
    </body>
     
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Your form has no action attribute, so it submits to itself, that is reloads and of course wipes out the previous inputs.

    Observe this with <form name="myform" onSubmit="alert ('hello'); return validate_form();">


    Delete the lines
    gender.focus();
    nationality.focus();
    age.focus();

    and then it works OK.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <form name="myform" onSubmit="alert ('hello'); return validate_form();">
    gender.focus();
    nationality.focus();
    age.focus();

    i tried above but the problem now, all the alert box appears one by one continuosly.only with focus() there is a break between each alert for user to update selection.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Delete the two lines
    valid = true;
    return valid;

    and change all three lines
    valid = false;
    to
    return false;

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    anan (03-01-2012)

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for your help,it works now.
    Last edited by anan; 03-01-2012 at 05:35 PM. Reason: code mistake

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Your function calculate() in the code posted at post #7 but which you have now deleted is not called anywhere.

    You don't seem to have much idea of how to capture the values of selected radio buttons, still less multiple groups of radios.
    Try this added to the end of your validate_form() function (don't forget to take out the final closing brace } )


    Code:
    var markScore = 0;
    
    for (var i=1;i<=3;i++) {  // 3 questions
    var q =  document["myform"]["ques"+i];  // the radio group
    var len = q.length;  // how many radios in this group?
    
    for (var j =0; j<len; j++) {
    if (q(j).checked) {  // is this radio checked?
    var val = q(j).value;  // if so get checked radio value
    markScore += Number(q(j).value);  // add them up
    }
    }
    
    }
    alert ("Your score is " + markScore)
    }  // final closing brace to end function
    Failure to check a radio button is equivalent to checking 0. If you want to calculate a percentage then you will need to do the proper arithmertic calculation on markScore.


    I have the feeling that this is homework. If so you have had enough help!
    Last edited by Philip M; 03-01-2012 at 05:54 PM. Reason: typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for your help.this is not a homework.i m voluntarily creating a quiz for standard 1 of primary school at my area with some helps from friend.this is a great task as i can improve my little knowledge of javascript.

    from your code :
    if (q(j).checked) { // this is to check if radio button are selected
    var val = q(j).value; // here it will capture the value from selected radio button

    so in order to make sure all the radio button are checked before the values passed to next line, i have to create validation line between of this 2 line.am i correct?
    or
    i need to add radio validation immediately after the Please select your age line..
    if ( document.myform.age.selectedIndex == 0 )?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    You can test whether a selection has been made in several ways, but this change to the code I gave you ought to suit:-

    Code:
    var chosen = false;
    for (var j =0; j<len; j++) {
    if (q(j).checked) {  // is this radio checked?
    var val = q(j).value;  // if so get checked radio value
    markScore += Number(q(j).value);  // add them up
    chosen = true;  // a radio in this group has been checked
    }
    }
    
    if (!chosen) {  // if chosen is false
    alert ("You must make a selection from each group of radio buttons");
    // or if you prefer
    // alert ("You have not made a selection from radio group " + i);
    return false;  // terminate
    }
    Last edited by Philip M; 03-02-2012 at 09:16 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    anan (03-02-2012)

  • #11
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you. appreciate your help.


  •  

    Posting Permissions

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