Forum Moderators: open

Message Too Old, No Replies

Radio button selection to update form value

         

nimonogi

8:38 am on Jun 21, 2010 (gmt 0)

10+ Year Member



Hello,

I want the Radio button selection to update the "action" in form...


<form action="http ://www.domain.com/file.php?value=[i want the radio button value here]" method="post" id="SearchForm">

<input type="text" value="" name="search" />
<select name="options">
<option selected="selected">a</option>
<option>b</option>
</select>

<label for="number0"><input value="1" name="number" id="number0" type="radio"> 1</label>
&nbsp;<label for="number1"><input value="2" name="number" id="number1" type="radio"> 2</label>

<a href="#" onclick="document.getElementById('SearchForm').submit()">GO</a>


with the following code i can get the value in an alert box... but i want the value to update the "action" without a submit button...

<input onclick="alert('Checked value is: '+getCheckedValue(document.forms['SearchForm'].elements['number']));" value="Show Checked Value" type="button">


Thanks!

nimonogi

8:40 am on Jun 21, 2010 (gmt 0)

10+ Year Member



here is the javascript source code i'm using:


// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}

MichaelBluejay

2:20 pm on Jun 22, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



How about this?

<form id=SearchForm action=http://www.example.com/file.php?value=1>
<input value="1" name="number" id="number0" type="radio" checked> 1
<input value="2" name="number" id="number1" type="radio"> 2

<input onclick="setAction();" value="Submit" type="submit">
</form>

<script type=text/javascript>
function setAction() {
theForm = document.getElementById('SearchForm');
radioGroup = theForm.elements['number'];
for (var i=0; i < radioGroup.length; i++) {
if (radioGroup[i].checked) theForm.action = "http://www.example.com/file.php?value=" + radioGroup[i].value;
}
}
</script>

nimonogi

9:35 pm on Jun 22, 2010 (gmt 0)

10+ Year Member



Thanks a lot.
This works exactly as i wanted.

One issue i'm having is when i use "<a href" instead of a button, is not working. Any ideas?

<a href="#" onclick="setAction()">GO</a>

MichaelBluejay

2:47 am on Jun 23, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, it's an easy fix. Why would the form submit if you didn't tell it to submit? When you click a Submit button, the browser knows it should submit the form. If you click anything else, it has no idea you want to submit the form unless you say so explicitly. So to submit from an <a href>, add this code to the end of your script (before the final } } ):
theForm.submit();


Are you sure you want to submit from an <a href> rather than from a button? Users are used to a button submitting a form, not a link. It drives me crazy when I'm trying to fill out some form, looking for the "Next" or "Submit" button, only to find that it's a link somewhere that doesn't look in any way like it will actually submit the form, unless I read every word on the page.

nimonogi

6:19 am on Jun 23, 2010 (gmt 0)

10+ Year Member



Thank you Michael!