submit button based on radio button selected

@big-dog1965Feb 01.2007

~~[B]~~[/B]I have a form that I use radio buttons on that have a different value for each, one 45 the second 20 and the 3rd is 60. If you click on radio button 1 it puts 45 in a text box at the bottom of page, radio 2 would put 20 in that textbox and so on.. I need my submit button to look at either the value in the textbox or the radio button that is click on. Then submit the form to the page that corresponds to the proper value i.e. 45, 20 or 60.
~~[I]~~Here is the script and radio button code I used to get the value from the radio buttons to the textbox.[/I]<HEAD>
<TITLE>Form</TITLE>
<script type=”text/javascript”>
function addVal(newVal, dest, addOrRemove) {
if (addOrRemove) { // true == add; false == remove;
if (dest.value.length != 0) {
dest.value= “”;
}
dest.value += newVal;
} else {
dest.value.replace(new RegExp(“[, ]?” + value, “ig”), “”);
}
}
</script>

~~[I]~~Here’s the submit code one is for 45 ones for 20 and the last is 60. There’s other stuff in each form of below I didn’t think it was relevant.[/I]
<form action=”https://www.wrcrw.com/cgi-bin/webscr” method=”post”>

to post a comment

JavaScript

5 Comments(s) _↴

@duke_okcFeb 01.2007 — #[B][/B]<input type="radio" name="JuniorMembership" value="20"onclick="addVal(this.value, this.form.AmountPaid, this.checked)" />

<input type="radio" name="FamilyMembership" value="60"onclick="addVal(this.value, this.form.AmountPaid, this.checked)" />

[I]Here’s the submit code one is for 45 ones for 20 and the last is 60. There’s other stuff in each form of below I didn’t think it was relevant.[/I]

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">[/QUOTE]
Do you want your users to be able to multi-select (possibly all 3 radio buttons)? The reason we use radio buttons (from design point of view) on a form is because we want our users to choose one value at a time, out of many possible one's. Otherwise, you could simply use a checkbox. Also, you mentioned something about submit button, but code here, shows something different. Looks like you want to change the action part of your form based on different values...can you please clarify this? Thanks.

@big-dog1965authorFeb 01.2007 — #I don’t want multi select but the JavaScript when added to get value to the textbox broke the radio to where know you can select all, What I figured was it is because the name of radio button are different. That’s my other problem.

Ill try to explain If I had 3 forms one for adult one for junior, and one for family and I have A submit on each it works. I change one part in each form to coraspond to the adult, junior, family

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="" value="">

<input type="hidden" name="item_name" value="">

<input type="hidden" name="amount" value="[COLOR="Red"]this is what I change for differant choices[/COLOR]">

<input type="hidden" name="return" value="">

<input type="hidden" name="cn" value="confirm date">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="tax" value="0">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="bn" value="">

<input type= submit name="Submit">

</form>

I want one button that will submit to which ever one is relevant to the radio button it corresponds to.

Basically the submit button needs to know which radio button is selected and then submit to the right form action

I was thinking if the <input type="hidden" name="amount" value="[COLOR="Red"]this is what I change for differant choices[/COLOR]"> value= had something to referance the radio or textbox.

Hope this helps

@duke_okcFeb 02.2007 — #I don’t want multi select.....That’s my other problem.

<input type="hidden" name="amount" value="[COLOR="Red"]this is what I change for differant choices[/COLOR]">[/QUOTE]

To disable multi-select, just choose the same 'name' for all radio buttons ( value is going to be different).

For second problem, I am assuming here, it looks like that you are trying to create an input field, with different values for each type, in your form. Easiest thing would be to create it dynamically. I would suggest calling a function (onclick) when radio button is clicked:

[CODE]<input type="radio" name="AdultMembership" value="45" onclick="addVal(this.value, this.form.AmountPaid, this.checked); onclick="inputChange('45');" />
 
 <input type="radio" name="JuniorMembership" value="20" onclick="addVal(this.value, this.form.AmountPaid, this.checked); onclick="inputChange('20');" />
 
 <input type="radio" name="FamilyMembership" value="60"onclick="addVal(this.value, this.form.AmountPaid, this.checked); onclick="inputChange('60');" />[/CODE]

and then have a function like this:

[CODE]function inputChange(val) {
 
 var inputVal = val;
 var myForm = document.getElementById(‘form’);/* form id=form*/
 
 if (inputVal == 45){
 var newInput = document.createElement('input');
 newInput.setAttribute('type','hidden');
 newInput.setAttribute('name','amount');
 newInput.setAttribute('value','whatever value you want goes here');
 myForm.appendChild(newInput);
 }
 else if (inputVal == 20){
 /* code goes here*/
 }
 else if(inputVal == 60){
 /* code goes here*/
 }
 
 }[/CODE]

@big-dog1965authorFeb 02.2007 — #Im an idit I guess is this how Im suposed to use your example

Im so ? and do I put this above the </HEAD> I added the <script> because it was showing on the page.

do I change this line

<form enctype='multipart/form-data' action='mem.php' method='post'>

<input type='submit' value='Submit Form'>

<script>

function inputChange(val) {

var inputVal = val;

var myForm = document.getElementById(‘form’);/* form id=form*/

if (inputVal == 45){

var newInput = document.createElement('input');

newInput.setAttribute('type','hidden');

newInput.setAttribute('name','amount');

newInput.setAttribute('value','whatever value you want goes here');

myForm.appendChild(newInput);

}

else if (inputVal == 20){

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="" value="">

<input type="hidden" name="item_name" value="">

<input type="hidden" name="amount" value="[B]20[/B]">

<input type="hidden" name="return" value="">

<input type="hidden" name="cn" value="confirm date">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="tax" value="0">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="bn" value="">

<input type= submit name="Submit">

</form>

}

else if(inputVal == 60){

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="" value="">

<input type="hidden" name="item_name" value="">

<input type="hidden" name="amount" value="[B]60[/B]">

<input type="hidden" name="return" value="">

<input type="hidden" name="cn" value="confirm date">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="tax" value="0">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="bn" value="">

<input type= submit name="Submit">

</form>

}

}

</script>

@duke_okcFeb 02.2007 — #
else if (inputVal == 20){

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="" value="">

<input type="hidden" name="item_name" value="">

<input type="hidden" name="amount" value="[B]20[/B]">

<input type="hidden" name="return" value="">

<input type="hidden" name="cn" value="confirm date">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="tax" value="0">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="bn" value="">

<input type= submit name="Submit">

</form>

}

else if(inputVal == 60){

<form action="https://www.wrcrw.com/cgi-bin/webscr" method="post">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="" value="">

<input type="hidden" name="item_name" value="">

<input type="hidden" name="amount" value="[B]60[/B]">

<input type="hidden" name="return" value="">

<input type="hidden" name="cn" value="confirm date">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="tax" value="0">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="bn" value="">

<input type= submit name="Submit">

</form>

}

}

</script>[/QUOTE]
Placing the above code in a javascript function would not do any good. You will need to place the above code in a form element (<form>..</form>) on you html page and then call the function when user clicks on radio button. In your function you would dynamically create the input element which has different value for each category.

Also in #JavaScript _↴

Form Text Field/SUBMIT links to onsite URL Random Background Image each time a site is loaded.I just want to know how to populate a text field!!!

Success!

Help @big-dog1965 spread the word by sharing this article on Twitter...

Tweet This

submit button based on radio button selected

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

submit button based on radio button selected

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴