if radio button value is checked, then ask for something too

closser · 12-17-2012, 09:09 PM

Hi guys, as it says on tittle if radio button value is checked, then ask for something too, so below you will see how my page looks like right now, but i want to make it to ask something else after we choose A or B or C or D, i tried in this way (below), but it didn't work, it used to work with select option -s in this way.

the way i tried eg.

Code:

if (form.type.value == "A") 
{

if (form.A1.value == "")
{ alert("Please enter A1."); form.A1.focus(); return;}

}

THE SITE SOURCE RIGHT NOW:

Code:

<SCRIPT language=JavaScript>
<!--
function check(form) {

var radio_choice = false;
for (counter = 0; counter < form.type.length; counter++)
{ if (form.type[counter].checked)
radio_choice = true; }
if (!radio_choice)
{ alert("Please select a letter.")
return (false); }

form.submit()
}
//-->
</SCRIPT>

<form method="post" action="#work">
<input type="radio" value="A" name="type">A
<br>
<input type="radio" value="B" name="type">B
<br>
<input type="radio" value="C" name="type">C
<br>
<input type="radio" value="D" name="type">D
<br>
<input type="button" onclick=check(this.form)  value="Submit" >
</form>

Old Pedant · 12-17-2012, 09:31 PM

Ummm...even if your code worked (it won't, but fixing it isn't hard), you don't show any field named A1 in your <form>.

Also, you don't say: Is the user then required to fill in A1 before the form is submitted? If so, what kind of value(s) do you want to accept in A1?

felgall · 12-17-2012, 09:35 PM

With that style of coding you'd use form.type[counter].value to refer to the selected radio button.

Just to point out a few other issues with your code:

language="javascript" was replaced by type="text/javascript" many years ago.

 inside the script is there to hide it from Internet Explorer 2 - it isn't necessary provided that all your visitors are using at least IE3.

The JavaScript ought to be attached immediately before the </body> tag so it doesn't slow the loading of the HTML and so that the HTML is there before the script runs.

alert() is now suitable only for debugging - you should be updating the error messages directly into the HTML using either innerHTML or proper DOM methods.

Since 1997 input fields have not been allowed directly inside a form tag. You should have a fieldset or div tag wrapped around the inputs.

You should wrap the text associated with each radio button inside <label> tags and attach those to the appropriate button so that clicking on the text works as well as clicking the button.

The onclick JavaScript should be moved out of the HTML and included in the JavaScript code instead.

You should be using type="submit" instead of type="button" so tat the form works for those with JavaScript disabled.

Old Pedant · 12-17-2012, 09:35 PM

One more thing:

You have action="#work" for you <form>.

But you have specified method="post". You can't use method=post to send data to another HTML page, or even to the same page (which is what #work would imply).

closser · 12-17-2012, 09:45 PM

Hi Old Pedant thank you for your answer, i didn't show the A1 on my page cause i thought you would understand it, it will be required to fill in A1 , it would be any simple input; eg. if he checked the A option (just eg.) // that's not the point, what i want to do is: if A is checked to ask for A1 or more .. on the current style of coding i'm using.

And about the action="#work" i know it's supposed to be action="mail.php" or something like that.
But please if you get it, and you're able to help me, do it.

Hi, felgall thank you for your answer, i honestly respect all the words you said and i know you're right, but please if you can help me too, just do it.

Thank you once again.

Old Pedant · 12-17-2012, 10:01 PM

Here, try this:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
<style type="text/css">
div#oops { color: red; font-weight: bold; }
div#more { visibility: hidden; }
</style>    
</head>
<body>
<form id="theForm" method="post" action="#work">
<div id="oops"></div>
<div>
    <label><input type="radio" value="A" name="type">A</label>
    <br>
    <label><input type="radio" value="B" name="type">B</label>
    <br>
    <label><input type="radio" value="C" name="type">C</label>
    <br>
    <label><input type="radio" value="D" name="type">D</label>
    <br>
    <div id="more">
        Enter your name: <input name="yourname">
    </div>
    <br>
    <input type="submit" value="Submit" >
</div>
</form>

<script type="text/javascript">
(
  function( )
  {
      var form = document.getElementById("theForm");
      var goof = document.getElementById("oops");

      form.onsubmit = function( )
      {
          goof.innerHTML = "";
          var rbs = form["type"];
          var val = null;
          for ( var r = 0; r < rbs.length; ++r )
          {
              if ( rbs[r].checked ) val = rbs[r].value;
          }
          if ( val == null )
          {
              goof.innerHTML = "You must select a letter A, B, C, or D";
              return false;
          }
          document.getElementById("more").style.visibility = (val == "A") ? "visible" : "hidden";
          if ( val == "A" )
          {
              if ( form.yourname.value.replace(/\s/g,"").length < 3 )
              {
                  goof.innerHTML = "Please enter your name";
                  return false;
              }
          }
          return true;
      } // end of onsubmit

  } // end of anonymous master function

)(); // self-invoke the master function
</script>
</body>
</html>

But you will still need to use some server-side page to process the form, not #work.

Old Pedant · 12-17-2012, 10:03 PM

And, by the by, that code should satisfy all Felgall's complaints *AND* it passes the W3C validator.

Old Pedant · 12-17-2012, 10:05 PM

Quote:

Originally Posted by felgall

Since 1997 input fields have not been allowed directly inside a form tag. You should have a fieldset or div tag wrapped around the inputs.

Well, not true in HTML5. But still, doesn't hurt to put one or the other in, even with HTML5.

closser · 12-17-2012, 11:05 PM

it's not exactly how i wanted, but it's okay it worked for me / thanks alot.

Philip M · 12-18-2012, 07:42 AM

Quote:

Originally Posted by Old Pedant

Well, not true in HTML5. But still, doesn't hurt to put one or the other in, even with HTML5.

Well, according to the HTML 4.01 specification (specifically section 17.3), this is technically true. However, I don't know of any web browser that would actually give you a problem over it.

The <fieldset> tag draws a box around the included elements. Ugly IMO. <div> is fine but redundant really.

felgall · 12-18-2012, 07:56 AM

Quote:

Originally Posted by Philip M

The <fieldset> tag draws a box around the included elements. Ugly IMO. <div> is fine but redundant really.

That depends on what CSS you use to style the fieldset or div tags. They can both be styled the same way the only difference is that with a fieldset you can also specify a legend whereas you can't with a div.

I'd suggest using two such tags at least in the one form so that the error messages can be highlighted differently from the rest of the form.

Where you have radio buttons as well as other fields it is also useful to wrap each group of radio buttons so that you clearly identify them as a group.

If you think it looks ugly then that is just because you are not applying the appropriate CSS to it.