/    Sign up×
Community /Pin to ProfileBookmark

From Select menu to radio buttons -Newbie

Copy linkTweet thisAlerts:
Jan 17.2008

I use the following function to put a value in a form field based on a selection from a dropdown menu (select yes/no). The user wants to change the select menu to radio buttons. I’m stuck on what needs to be changed to accomodate the radio buttons? Any help is greatly appreciated.

function CM3func(){
if (document.form1.CM3.value == “Yes”) {
document.form1.CM3score.value = 1;
} else if (document.form1.CM3.value == “No”) {
document.form1.CM3score.value = 0 ;
} else {
document.form1.CM3score.value = ” “;
}
}

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJan 17.2008 — This should be a good start:
function CM3func() {
var fields = document.form1.elements;
var CM3Value = getRadioValue(fields.CM3);

if (CM3Value == "Yes") {
fields.CM3score.value = 1;
} else if (CM3Value == "No") {
fields.CM3score.value = 0;
} else {
fields.CM3score.value = " ";
}
}

function getRadioValue(rad) {
var i = 0;
var end = 0;
var value = "";
if (rad.length) {
for (i, end=rad.length; i < end; i++) {
if (rad[i].checked) {
value = rad[i].value;
}
}
} else {
value = rad.value;
}
return value;
}
Copy linkTweet thisAlerts:
@ChamarkauthorJan 17.2008 — Toicantien - Thank You Thank You Thank you - you have saved my job - One thing though is when I click No I get a return of 1 and when I click Yes I get a return of 0

<input type="radio" name="CM3" onchange="CM3func()" id="CM3" value="Yes" />Yes

<input type="radio" name="CM3" id="CM3" onchange="CM3func()" value="No" />No

Any suggestions?
Copy linkTweet thisAlerts:
@toicontienJan 17.2008 — function CM3func() {
var fields = document.form1.elements;
var CM3Value = getRadioValue(fields.CM3);

if (CM3Value == "Yes") {
[B]fields.CM3score.value = 1;[/B]
} else if (CM3Value == "No") {
[B]fields.CM3score.value = 0;[/B]
} else {
fields.CM3score.value = " ";
}
}
The bold face code is where you set those values.
Copy linkTweet thisAlerts:
@ChamarkauthorJan 17.2008 — Thank you - looks like I was having some buffer problems. All is well now.
Copy linkTweet thisAlerts:
@toicontienJan 17.2008 — Just replying to your private message, seeing that it directly relates to this thread:

Hi just one more thing: I need to create 7 individual functions like this one - So change the names accordingly ...[/QUOTE]

Why not create one function to handle all the functionality?

/* Function to handle all special functionality for this form: */
function handleForm(name, form) {
var value = "";

switch (name) {

<i> </i>// Handle the radio buttons named "CM3"
<i> </i>case "CM3":
<i> </i> value = getRadioValue(form.elements[name]);
<i> </i> if (value == "Yes") {
<i> </i> form.elements[name].value = "Some value";
<i> </i> } else if (value == "No") {
<i> </i> form.elements[name].value = "Another value";
<i> </i> } else {
<i> </i> form.elements[name].value = "";
<i> </i> }
<i> </i> break;

}

}


/* Function to add event handlers to form fields: */
function addFormEvents() {
var form = arguments[0];
var i = 1;
var end = arguments.length;
var field;
var f = 0;

for (i; i &lt; end; i++) {
field = form.elements[arguments[i]];

<i> </i>if (field.length) {
<i> </i> // Form field group
<i> </i> for (f=0; f &lt; field.length; f++) {
<i> </i> field[f].onchange = function() {
<i> </i> handleForm(this.name, this.form);
<i> </i> };
<i> </i> }
<i> </i>} else {
<i> </i> // Single form field
<i> </i> field.onchange = function() {
<i> </i> handleForm(this.name, this.form);
<i> </i> };
<i> </i>}

}
}

The handleForm function has a case in the switch statement for each form field name that you want to do something special with. The addFormEvents function is used to attach JavaScript event handlers to each of the form fields. Now, remove all [B]onchange="..."[/B] code from your form fields, then add this snippet of code below your form:
[code=html]</form> <!-- The end of your FORM -->

<script type="text/javascript">
addFormEvents(document.forms.form1, "form_field_1", "form_field_2", ... "form_field_n");
</script>[/code]

The addformEvents function adds the onchange event handlers to the given form fields in the given form. The first parameter is a node reference to the FORM tag (document.forms.form1), and every parameter after that is the name of a form field, or group of form fields, that you want to attach onchange events to so the handleForm function handles all the onchange events.

Can you post more information on the form fields in your form?
×

Success!

Help @Chamark spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...