how can i check to see if a radio button was given input?

[jwk811]

i have a form and it checks that everything that is required is filled in and if not shows an alert.. i got to the radio button parts and i didnt know how to do that since they were different than the other types

[Telemachus]

You can loop through them and check if document.myForm.myRadioButton[[i][/i]i].checked is true, and if so set a variable as true and break the loop, and if that variable is false afterwards give the alert, or add to the existing one.

[jwk811]

i dont know much at all about javascript.. do you think you could give me some code i could look at?

[Telemachus]

Well I only tinker with it a bit as a hobby myself, but this is what I came up with:



[code]
function hasChosen(){
var madeChoice;
var radio = document.myForm.myRadio;

for (s = 0; s < radio.length; s++){
if (radio[s].checked){
madeChoice = true;
break;
}
}

if (!madeChoice){
alert("You forgot to pick one");
return false;
}
else{
return true;
}
}
[/code]

For a form something like this:

[code]
<form action="whatever.php" method="get" name="myForm" onsubmit="return hasChosen()">
<input type="radio" name="myRadio" id="one" value="1" /><label for="one">1</label>
<br />
<input type="radio" name="myRadio" id="two" value="2" /><label for="two">2</label>
<br />
<input type="radio" name="myRadio" id="three" value="3" /><label for="three">3</label>
<br />
<input type="submit" value="Submit">
</form>
[/code]

[jwk811]

awww i still cant get the radios to validate

[Telemachus]

Could you post the exact code as you're using it for me?

[jwk811]

i cant post the whole form cuz its really long but heres the beginning.. radio part.. and end:
[code]     
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>?step=2" method="post" name="frmCheckout" id="frmCheckout" onSubmit="return checkShippingAndPaymentInfo();">

      <table width="550" border="0" align="center" cellpadding="5" cellspacing="1" class="entryTable">
      <tr>
        <td width="150" class="entryTableHeader">Payment Method </td>
        <td class="content">
        <input name="optPayment" type="radio" id="optPaypal" value="paypal" onClick="showHidePaypalDiv()" />
        <label for="optPaypal" style="cursor:pointer">Paypal</label>
        <input name="optPayment" type="radio" value="cod" id="optCod" onClick="showHideCodDiv()" <?php echo $cod_checked ?>/>
        <label for="optCod" style="cursor:pointer">Cash on Delivery</label></td>
      </tr>
    </table>
<input class="box" name="btnStep1" type="submit" id="btnStep1" value="Proceed &gt;&gt;">[/code]
the check shipping and payment info is a js that checks them all but it doesnt work with the radios and i tried the one you gave me and added that function to the onSubmit part.. do you know how i could do this? im probably just doing something wrong........... thanks for the help!

[Telemachus]

I'm trying that but replacing checkShippingAndPaymentInfo(); with my own function and it's not giving me any problems.  :(

[fenway]

And $cod_checked is what?

[jwk811]

yes i got that to work i know what i was doing wrong.. the checkPaymentInfo function checks all the others and i was trying to add it to that function or put the two functions to run once submitted.. how can i do that? and cod_checked has nothing to do with it..

[fenway]

It makes more sense to call a single function with both logical pieces, but you could simply call two separate functions e.g. sub1(); sub2();

[jwk811]

nope not working.. only doing first function

[fenway]

Post the code... that doesn't add up.

[jwk811]

heres the first line.. is this right?
[code]<form action="<?php echo $_SERVER['PHP_SELF']; ?>?step=2" method="post" name="frmCheckout" id="frmCheckout" onSubmit="return checkShippingAndPaymentInfo(); return hasChosen();">[/code]

[jwk811]

for the function couldnt i just do-- if (field.value!="") { alert("Forgot Input") }
?

[jwk811]

another thing.. if this is the form input how will i be able to see if there was input in a [b]JS[/b] function?

[code]<input name="optPayment" type="radio" id="optPaypal" value="paypal" onClick="showHidePaypalDiv()" />
        <label for="optPaypal" style="cursor:pointer">Paypal</label>[/code]

i was just playing around with it and i thought maybe this would work

[code]function hasChosen(){
if (optPayment == "paypal") {
alert("You Clicked Paypal");
}
}[/code]

that didnt work.. would you know how i could do this? thanks

[fenway]

That's not what I said to do... you can't have two return statements.

[Telemachus]

My guess would be:
[code]onsubmit="return (checkShippingAndPaymentInfo() && hasChosen());"[/code]
at least that trims it down to one and it worked when I tested it, but even I know there should be better ways to do it.  One would be having this all in one function, what error did you get when trying to combine them?  To be honest, and I could be very wrong on this, since in theory one of the radio buttons is checked by default, which means if they are set up correctly the only way it can get unchecked is by making another valid selection, is it really even useful to validate that part client-side?  Again, that's more of a question for my sake than a suggestion.

[jwk811]

rather than doing that maybe i could do a thing like if this radio is chosen validate these form inputs (the ones that come up once one of the radios is selected) do you know how i could do this? i might do both this and the other one..

[Telemachus]

I would say it depends on what information is required for each; I would imagine a lot of it is going to be the same, so for what is, say first name, last name, email, etc, validate all that first, then find out which radio button is checked and use a switch/case statement based on the radio choice to evaluate the fields unique to that selection.  I'd go into more detail than that but I'd rather see if it's the right track from someone more knowledgeable before you get too far.

[jwk811]

that seems right.. should i have the switch statment to switch from either one set of data to validate and another depending on what radio they chose though?

[fenway]

I would tend to agree.

[jwk811]

then how can i do that? lol im really bad at this.. i know php n all but javascript... i dont know how to do this and whatever i try isnt working

[Telemachus]

This is cheesy and rushed but hopefully will at least help illustrate the concept:

[code]function validateForms(){

var isValid = document.frmCheckout.firstName.value && document.frmCheckout.lastName.value;
var paymentType;
var radio = document.frmCheckout.optPayment;

for (var s = 0; s < radio.length; s++){
if (radio[s].checked){
paymentType = radio[s].value;
break;
}
}


if (isValid){
switch(paymentType){
case "paypal":
accountNumber = document.frmCheckout.accountNumber.value;
isValid = accountNumber && !isNaN(accountNumber);
break;
case "cod":
address = document.frmCheckout.address.value;
isValid = address;
break;
default:
isValid = false;
break;
}
}

if (!isValid){
alert("Some information was missing or incorrect.");
return false;
}
else{
return true;
}

}[/code]

[Telemachus]

I changed the name of the function for clarity's sake, and gave the form fields generic names for that reason as well.  Now I'll run through it a bit.  Let's say first and last name are the only fields visible for both options, so I'm assigning a variable as true if they are both filled out, and false if not.  Then it finds out the value of the option that's checked, and if the first two required fields were filled out, goes into the switch based on that option.  If a field isn't filled out or in the case of the account number is but isn't a number, or if someway, somehow, neither option got checked, it sets the variable back to false.  If something is missing, it says so and then returns false to the submission, but if everything looks okay it returns true. One could add validation with regular expressions, set an error message based on what exactly is wrong, make the basic function more elegant, etc. but this is just to show the general concept.