Link to home
Start Free TrialLog in
Avatar of dsr79
dsr79

asked on

JavaScript radio button issue...not reading the right value

Hi all:

I have HTML code that consists of the following radio button HTML

<dd class="specialdd"><input name="PayMeth" type="radio" class="paychoice" onclick="MM_showHideLayers('PayOptCC','','show')" value="Credit Card" />
                  <span>Credit Card</span></dd>
                  </dl>
                  <dl id="PayOptCC">
                  <dt><label>Name on Card:</label></dt>
                  <dd><input name="CCHolder" type="text" /></dd>
                  <dt><label>Card Number:</label></dt>
                  <dd><input name="CCNum" type="text" /></dd>
                  <dt><label>Street Address:</label></dt>
                  <dd><input name="CCAddress" type="text" /></dd>
                  <dt><label>City, State, Zip:</label></dt>
                  <dd><input name="CCCist" type="text" /></dd>
                  <dt><label>Expiration:</label></dt>
                  <dd class="smvalue"><input name="CCMo" type="text" maxlength="2" /><span> (MO) / </span>
                  <input name="CCYe" type="text" maxlength="2" /><span> (YR)</span>
                  </dd>
                  <dt><label>Security Code:</label></dt>
                  <dd class="smvalue"><input name="CCSecID" type="text" maxlength="4" />
                  </dd>
                  </dl>
                  <dl>
                  <dd><input name="PayMeth" type="radio" class="paychoice" onclick="MM_showHideLayers('PayOptCC','','hide')" value="Use billing information on file" />
                  <span>Use My Billing Information On File</span></dd>
                  </dl>


The "PayMeth" radio button has two choices...one where they can opt to use the information on file or they can submit their credit card info.

IF the users select "Credit Card", then some additional fields for name, credit card numbers etc. are shown using the MM_showHideLayers() function.  Here is the issue, when I select the "Credit Card" radio button, javascript is not recognizing that selection properly.  What happens is:

1.)  I select "Credit Card" option on the radio button.
2.)  All the fields under credit card i.e. Name, Number, Address etc are shown.

I have the following Javascript code

for (counter = 0; counter < form.PayMeth.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (form.PayMeth[counter].checked)
radio_payment = true;
payment_value=form.PayMeth[counter].value;
}
if (!radio_payment)

      {
            alert("Please enter your payment method");
            form.JobName.focus();
            return;
      }

if (payment_value="Credit Card"){
      if (form.CCHolder.value=="") {
            alert("Please enter the name of the card holder");
            form.CCHolder.focus();
            return;
      }
      if (form.CCNum.value=="") {
            alert("Please enter a credit card number");
            form.CCNum.focus();
            return;
      }
      if (form.CCAddress.value=="") {
            alert("Please enter the billing address");
            form.CCAddress.focus();
            return;
      }
      if (form.CCCist.value=="") {
            alert("Please enter city, state and zip");
            form.CCCist.focus();
            return;
      }
      if (form.CCMo.value=="") {
            alert("Please enter the expiration month");
            form.CCMo.focus();
            return;
      }
      if (form.CCYe.value=="") {
            alert("Please enter the expiration year");
            form.CCYe.focus();
            return;
      }
      if (form.CCSecID.value=="") {
            alert("Please enter the security code");
            form.CCSecID.focus();
            return;
      }
}

However, the javascript is always reading the radio button as having the value "Use billing information on file".  This is the case even if "Credit Card" is selected as the payment option.  So the script that checks for the card number etc. is not even being triggered.  What am I doing wrong?

Thanks
Avatar of hielo
hielo
Flag of Wallis and Futuna image

If you have only one form then you need:
 document.forms[0].PayMeth.length

for (counter = 0; counter < document.forms[0].PayMeth.length; counter++)
Avatar of dsr79
dsr79

ASKER

That does not fix the issue.  It still shows that the option selected is "Use billing information on file" even though I selected "Credit Card"
In what you posted originally, does form have a reference to a <form> object? You are using form all over the place, but it is not clear if it has a valid form reference. Within your function try intializing it as follows:
var form = document.forms[0];

Do you have a link to your page?
Avatar of dsr79

ASKER

Hi Hielo:

I don't have an internet accessible link currently.  The form does have a valid reference.  I tried to debug using Firebug and it does not really generate any errors.

I tried to troubleshoot it by having only the "credit card" as the option under the radio button "PayMeth".  I removed "Use billing information on file" from the radio button groups.  Here is the interesting thing.  When I do that and remove the second radio button from the group, the script gets stuck at the point where I check if a payment method has been selected.

Even if I select "Credit Card" radio button, I keep getting the message "Please enter your payment method".  It is not even recognizing the selection for the "credit card" radio button.  I don't know if that helps.  Anyway, here is my entire javascript.

function procFormtest (form) {
var radio_payment=false;
var radio_postage=false;
var n;
var self_mailer = null;
var extras=null;
var extras_value;
var payment_value;
var counter;
if (form.JobName.value=="")
      {
            alert("Please enter a job name");
            form.JobName.focus();
            return;
      }

for (counter = 0; counter < document.forms[0].PayMeth.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (document.forms[0].PayMeth[counter].checked)
radio_payment = true;
payment_value=document.forms[0].PayMeth[counter].value;
}
if (!radio_payment)

      {
            alert("Please enter your payment method");
            form.JobName.focus();
            return;
      }

if (payment_value=="Credit Card"){
      if (form.CCHolder.value=="") {
            alert("Please enter the name of the card holder");
            form.CCHolder.focus();
            return;
      }
      if (form.CCNum.value=="") {
            alert("Please enter a credit card number");
            form.CCNum.focus();
            return;
      }
      if (form.CCAddress.value=="") {
            alert("Please enter the billing address");
            form.CCAddress.focus();
            return;
      }
      if (form.CCCist.value=="") {
            alert("Please enter city, state and zip");
            form.CCCist.focus();
            return;
      }
      if (form.CCMo.value=="") {
            alert("Please enter the expiration month");
            form.CCMo.focus();
            return;
      }
      if (form.CCYe.value=="") {
            alert("Please enter the expiration year");
            form.CCYe.focus();
            return;
      }
      if (form.CCSecID.value=="") {
            alert("Please enter the security code");
            form.CCSecID.focus();
            return;
      }
}
      
for (counter = 0; counter < form.Postage.length; counter++)
      {
      // If a radio button has been selected it will return true
      // (If not it will return false)
      if (form.Postage[counter].checked)
            radio_postage = true;
      }
      if (!radio_postage)

      {
            alert("Please Select Postage Type");
            form.Postage.focus();
            return;
      }

      
      if (form.mailinfo.value=="")
      {
            alert("Please enter your mailing information");
            form.mailinfo.focus();
            return;
      }
  for (n=0; n < form.MailingSelf.length; n++)
                  if (form.MailingSelf[n].checked)
                        self_mailer = form.MailingSelf[n].value;
 
            if (!self_mailer) {
                  alert("Please Select If You Want To Be Included In The Mailing");
                      form.MailingSelf.focus();
                              return;
                        }

            if (self_mailer == "Yes" && form.mailingselfaddress.value.length == 0) {
                  alert("Please enter the address that you want to include in the mailing");
                  form.mailingselfaddress.focus();
                  return;            
            }
                  
for (counter = 0; counter < form.extrasship.length; counter++)
      
      // If a radio button has been selected it will return true
      // (If not it will return false)
      if (form.extrasship[counter].checked)
            extras =form.extrasship[counter].value;
      
      if (!extras)

      {
            alert("Please Select If You Want Extras To Be Shipped To You");
            form.extrasship.focus();
            return;
      }
      
      if (extras == "Yes" && form.extrasqty.value.length == 0) {
                  alert("Please enter the number of extras you want");
                  form.extrasqty.focus();
                  return;            
            }
      if (extras == "Yes" && form.extrasshipaddress.value.length == 0) {
                  alert("Please enter the address that you want the extras shipped to");
                  form.extrasshipaddress.focus();
                  return;            
            }
      
      if (form.maildate.value=="")
      {
            alert("Please enter your mailing date");
            form.maildate.focus();
            return;
      }

document.myform.action = "pc_thankyou_CC.asp";
form.submit();
      
}



Just so you know all other validations in the above script work.  Only the part with the credit card information does not work.
All that javascript is tied to a <form>. If you do not post all your html code I can't help you.
Avatar of dsr79

ASKER

I fixed it.  It was a syntax issue.  After the following statement

if (document.forms[0].PayMeth[counter].checked)

a "{" was missing.  Similarly, one was missing in a "For" statement lower in the script.  This was causing the erratic behavior.  Once I fixed the syntax issue, it works great.
ASKER CERTIFIED SOLUTION
Avatar of Computer101
Computer101
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial