SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alert boxes and forms

    Gudday all
    I have been trying to devise a script that will, within a form with radio buttons warn the user if they have not made a selection before submitted.
    I can get the warning working, using alert boxes but the submission portion does not work.
    The script is
    Code:
    <script language="javascript" type="text/javascript">
    function checkRadio (frmName, rbGroupName){
      var radios = document[frmName].elements[rbGroupName];
       for (var i=0; i<radios.length;i++)
        {
    	 if (radios[i].checked) {
    	  return true;
    	  }
    	}
    	return false; 
     }
     function valFrm(){
      if (!checkRadio("princess", "productpr"))
       alert("You need to select a product option. Please select an option");
      else
       alert("Thank you for selecting an option");
    }     
    </script>
    It resides within the head.

    The form header is
    Code:
    <form name="princess" action="javascript:valFrm();">
    I need to replace the code
    Code:
    alert("Thank you for selecting an option");
    with
    Code:
    <form name="princess" method="post" action="http://ww8.aitsafe.com/cf/add.cfm">
    or rather the method and action portions.
    It goes to a shopping cart (Mal's E-commerce)

    Does any one have any suggestions? (Please )
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I think what you want is to do something like this:
    Code:
    <form name="princess" method="post" action="http://ww8.aitsafe.com/cf/add.cfm" onsubmit="return valFrm();">
    Action is reserved for the URL that the form is supposed to go to on submit. Whatever is placed in the onsubmit attribute is called whenever someone hits a submit button.

    In your valFrm() function, you'll need to return either true (if it was valid) or false (if it wasn't... you would call your alert right before this). By having "return valFrm()" instead of just "valFrm()", it will check, and if the value is false it will cancel the submitting process.

    So, your valFrm() should look something like this:
    Code:
    function valFrm(){
     if (!checkRadio("princess", "productpr")) {
      alert("You need to select a product option. Please select an option");
      return false;
     } else
       return true;
    }
    Hope that helps.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Samanime
    Thanks for that, it appears to work.
    As easy as that, eh? I have always had trouble with javascript and those actions.
    (With that I will go to bed. )
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Attention: Samanime (or anyone else)

    Samanime
    That has worked really well so far, but I wish to expand it.
    On my pages I will have > 2 items that have unique radio button selections. Rather than have to craete separate function for each I am trying to reuse the function of yours. I am passing to onsubmit the name of the form and then that form name in the resultant error message. But I keep getting an error. See attachment. I would like to replace the word 'undefined' with the form name (in this case princess, but there will be other names).
    Here is the form definition
    HTML Code:
    <form name="princess" method="post" action="http://ww8.aitsafe.com/cf/add.cfm" onsubmit="return valFrm(princess);">
    The js is
    Code:
    <script language="javascript" type="text/javascript">
    function checkRadio (frmName, rbGroupName){
      var radios = document[frmName].elements[rbGroupName];
       for (var i=0; i<radios.length;i++)
        {
    	 if (radios[i].checked) {
    	  return true;
    	  }
    	}
    	return false; 
     }
    function valFrm(frmName){
     if (!checkRadio("princess", "productpr")) {
      var err = 'You have not selected a ' + frmName  + ' option. Please select an option';
      alert(err);
     // alert("You have not selected a princess option. Please select an option");
      return false;
     } else
       return true;
    } 
    </script>
    I am sure the error is staring me in the face but I cannot see it.
    Attached Images Attached Images
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Look at the following

    Code html4strict:
    <form name="princess" ... onsubmit="return valFrm(princess);">

    valFrm is having passed to it an undefined value, because as the computer sees it, princess as a variable hasn't yet been defined.

    You need to pass princess to valFrm as a string value instead.

    Code html4strict:
    <form name="princess" ... onsubmit="return valFrm('princess');">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PWM57
    Thanks for that, it appears to work now.
    Just another question
    What exactly is the difference between
    Code:
    onsubmit="return valFrm('princess');"
    and
    Code:
    onsubmit="return valFrm("princess");"
    ?
    I had tried the second but not the first.
    Last edited by Tigers!; Apr 16, 2008 at 17:02. Reason: left out "
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The second has two separate strings.

    When javascript sees that a string is delimited with a double quote, it end the string at the next double quote. They can't be nested.

    So with you example, "return valFrm(" is the first string, then javascript tries to interpret princess, then it sees another string ");" As you can imagine, no sense can be made from that.

    There are also some subtle differences between single quotes and double quotes.

    See http://jennifermadden.com/javascript...Character.html and http://www.quirksmode.org/js/strings.html for more details.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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