Sending variable to form

[m2c1r]

I don't know enough to make this work but (I think) it is along these lines. I want to use a radio button selection to pass a value to a hidden value field when the submit button is clicked. Here's what I have:

<form name="Coupon" method="post" action="http://www.example.com/coupon.php">

<input type="radio" name="type" value="1"> Product 1<br>
<input type="radio" name="type" value="2"> Product 2<br>
<input type="radio" name="type" value="3"> Product 3<br>

<input name="Coupon" type="text" id="Coupon">
<input name="prod" type="hidden" id="prod" value="rad_val" (this is the value I want passed from the radio button value)>
<br>
<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon">
</form>

<script language="JavaScript" type="text/javascript">
function get_radio_value()
{
for (var i=0; i < 3; i++)
{
if (document.orderform.type[i].checked)
{
var rad_val = document.orderform.type[i].value;
}
}
}
</script>

Any help much appreciated! Thanks, Matt

[daveVk]

Not sure why input hidden needed, can the rad_val go directly on to radio button, with example rad_val's of Widget1 etc.

<input type="radio" name="type" value="Widget1"> Product 1<br>
<input type="radio" name="type" value="Widget2"> Product 2<br>
<input type="radio" name="type" value="Wigdwt3"> Product 3<br>

Otherwise need 3 hiddens or 1 hidden with 3 part value ?

[m2c1r]

The form is part of a coupon program that isn't mine. It was originally set up so that there would be one text box for each product and the product value was hard coded into the form. The coupon code was then checked against that product and if ti was correct the discount applied.

My goal is to use the same coupon code for many products- therefore the user selects the product and the radio button then fills the hidden product value in the form making it work correctly. I can't change the coupon program but I can (I think) get the hidden value field filled in using the radio button selection so I don't need to have 3 different coupon text boxes just one.

[daveVk]

Ok think I understand now

change

var rad_val = document.orderform.type[i].value;

to

document.orderform.prod.value = document.orderform.type[i].value;

[m2c1r]

Hmmm- no, didn't work. Just to be sure I understand, this is my new js code where before it named var rad_val=:

if (document.orderform.type[i].checked)
{
document.orderform.prod.value = document.orderform.type[i].value;
}
}

I also tried it with replacing the value="val_rad" with value="" but no go. I must be missing something in your suggestion.

It still works fine if I just type in 1 or 2 or 3 in the value field, though so I know if could just get the javascript to fill in that value I'd be in business.

[daveVk]

Can not see call to get_radio_value() ?

Maybe

<form name="Coupon" method="post" action="http://www.example.com/coupon.php" onsubmit="get_radio_value()">

[rocknbil]

You have form name as Coupon but are referring to it by "orderform." But you don't need to worry about that if you pass the form object to the function.

Tested code, remove alerts and note the submit moved to JS, as well as passing form object to function to manage submit:

<form name="orderform" method="post" onSubmit="return get_radio_value(this);" action=""> 
<input type="radio" name="type" value="1"> Product 1<br> 
<input type="radio" name="type" value="2"> Product 2<br> 
<input type="radio" name="type" value="3"> Product 3<br> 
<input name="Coupon" type="text" id="Coupon"> 
<input name="prod" type="hidden" id="prod" value="rad_val"> 
<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon"> 
</form> 
<script type="text/javascript"> 
function get_radio_value(form) { 
 var ischecked=0; 
 for (var i=0; i < 3; i++) { 
 if (form.type[i].checked) { 
  ischecked = 1; 
  document.getElementById('prod').value=form.type[i].value; 
  break; 
 } 
 } 
 if (ischecked==0) { alert('Please select a product.'); } 
 else { form.submit(); } 
 // remove 
 alert(document.getElementById('prod').value); 
 // Don't remove 
 return false; 
} 
</script>  

-------------------------------------------------
EDIT: Whoops I didn't see the part where you can't
access the form. I still don't see how you can add
JS, but this should work, it attaches the behavior
to the form on window load. Same function.
-------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- doctype on one line --> 
<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<script type="text/javascript"> 
window.onload=function() { attachBehaviors(); }; 
function attachBehaviors () { 
 if (document.forms['orderform']) { 
  document.forms['orderform'].onsubmit=function() { return get_radio_value(this); }; 
 } 
} 
function get_radio_value(form) { 
 var ischecked=0; 
 for (var i=0; i < 3; i++) { 
  if (form.type[i].checked) { 
   ischecked = 1; 
   document.getElementById('prod').value=form.type[i].value; 
   break; 
  } 
 } 
 if (ischecked==0) { alert('Please select a product.'); } 
 else {  
  form.submit();  
 } 
 // remove 
 alert(document.getElementById('prod').value); 
 // Don't remove 
 return false; 
} 
</script> 
</head> 
<body> 
<form name="orderform" method="post" action=""> 
<input type="radio" name="type" value="1"> Product 1<br> 
<input type="radio" name="type" value="2"> Product 2<br> 
<input type="radio" name="type" value="3"> Product 3<br> 
<input name="Coupon" type="text" id="Coupon"> 
<input name="prod" type="hidden" id="prod" value="rad_val"> 
<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon"> 
</form> 
</body> 
</html> 

[m2c1r]

Thanks for the help. I tried the above, and it wouldn't go. If I manually type in value="1" instead of value="rad_val" it works fine. So somehow it still isn't sending the actual value to the rad_val variable...

Alternatively, I could get this to work:

jsvar=1;
document.orderform.prod.value = jsvar;

in the sense that is will effectively pass the value into value="" but then I couldn't get the radio button value to = jsvar

So if could just get rad_val = jsvar and then pass it in I imagine it would all work but my brain is clearly too small to accomplish this.

[m2c1r]

OK, finally cracked the code- this is what works:

<script type="text/javascript">
function get_radio_value()
{
for (var i=0; i < 8; i++)
{
if (document.orderform.type[i].checked)
{
var jsvar = document.orderform.type[i].value;
}
}
document.orderform.prod.value = jsvar;
}

</script>

Then the line in the form:
<input name="prod" type="hidden" id="prod" value="">

And the submit button line:
<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon" onclick="get_radio_value()">

Thanks again for the help- I only got there by putting together parts from the various posts.

[daveVk]

<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon" onclick="get_radio_value()">

If user presses enter key on submit button, processing is skipped, doing get_radio_value() on form submit is safer.

[rocknbil]

.... it wouldn't go. If I manually type in value="1" instead of value="rad_val" it works fine. So somehow it still isn't sending the actual value to the rad_val variable...

Are your sure your receiving script is reading the right field? Earlier you said you wanted to populate the hidden field, not the Coupon text field. But when you say "manually type in" it sounds like you're reading the Coupon field.

If your script is reading the text field, what you need to do is change this

document.getElementById('prod').value=form.type[i].value;

to this

document.getElementById('Coupon').value=form.type[i].value;

<input name="SubmitCoupon" type="submit" id="SubmitCoupon" value="Submit Coupon" onclick="get_radio_value()">

DaveVK is correct; if you type in the text field (or any text field) and press enter, the form will submit without calling the JS function. This is why I've put it in the form action, and returned false to allow the JS to manage the submit. This raises another point, if JS is disabled . . . won't work . . . which brings us to DaveVK's original suggestion, managing the submit server-side using just the radio buttons.

[m2c1r]

Yes, it is working correctly. I meant manually type it into my code, not via the page UI.

The value is being passed to the hidden field, which is prod. The text field is the coupon code. Then, the coupon program, which is a third party app I can't get into, evaluates the product and the coupon code and if they match what's in the database it then sends the user to the discounted payment URL.

The onsubmit vs. onclick is a valid point and I will make the change.

If the user doesn't have js enabled then they are going to complain and I will just email them the correct URL directly. I don't expect this to be a frequent occurence, however, and if it does become a problem then I'll have to come up with a different solution.

Thanks for all the help.

[rocknbil]

Then, the coupon program, which is a third party app I can't get into, evaluates the product and the coupon code

One last suggestion, then.

Change the action of your form to a script on your site you can control, then post that to the third part app. One possible method is to use curl via perl or PHP. You can use curl to post the data, receive the result, and the user need never leave your site.

With that solution, you can dispense with the Javascript entirely.