• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 395
  • Last Modified:

Javascript radio button value plus other text box

I have 2 sets of radio buttons for amounts plus a button "Other" and text box for free form amount entry.

To make things a bit trickier, the name of the radio buttons is dynamic, handled (correctly) in PHP.

Currently, the function works correctly for the first set of buttons, but without the Other amount.

How can I evaluate both sets of buttons in the one function?
Javascript:

function additionalSwap(iAmt){
	if (iAmt>=29) {
		document.getElementById('theImage').src = "../images/g2nd.jpg";    // Choosing new image based on amount
		document.getElementById('theImage1').src = "../images/g2nd.jpg";    // Choosing new image based on amount
	}
}

HTML/PHP:

Please choose your amount...
<?php
	$sDetails = "<input name='RB".$SelectedPartnerId."' type='radio' value='19' onclick='additionalSwap(this.value)' />$19";
	$sDetails .= "<input name='RB".$SelectedPartnerId."' type='radio' value='29' onclick='additionalSwap(this.value)' />$29";
	$sDetails .= "<input name='RB".$SelectedPartnerId."' type='radio' value='49' onclick='additionalSwap(this.value)' />$49";
	$sDetails .= "<input name='RB".$SelectedPartnerId."' type='radio' value='Other' onclick='additionalSwap(this.value)' />Other";
	sDetails .= "<input size='3' type='text' name='OtherAmt".$SelectedPartnerId."' />";
	echo $sDetails;
?>

Open in new window

0
kkbenj
Asked:
kkbenj
  • 10
  • 5
  • 3
2 Solutions
 
mattibuttCommented:
hi
i am not sure what are you trying to accomplish you want to apply two sets of execution under same function? what is the purpose of combinng two different execution under same function or you want to execute further action under the same button please clarify/

thanks
0
 
kkbenjAuthor Commented:
I want a specific graphic to display if the TOTAL amount (from both sets of buttons) >= 29.
0
 
mattibuttCommented:
put the graphic in the div and add its propety to be
display=none

in the javascript add another if block

if (iAmt==29) {
            here div display = block
      }


you need add a right syntax i have given a rough example.

thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kkbenjAuthor Commented:
I need to add the values from BOTH sets of radio buttons combined, plus the value entered into the OtherAmt text boxes.
0
 
kkbenjAuthor Commented:
I have the functionality in place to handle the graphic.  It's the evaluation of amounts I need the help with.
0
 
mattibuttCommented:
all you have to do is check variable value by comparing it to the dynamic value selected by the user if i am perceiving the same problem as you are.

thanks
0
 
kkbenjAuthor Commented:
I need a code example of how to refer to the variable named radio buttons please.
0
 
nap0leonCommented:
If your radio buttons look like this:
<form name="frmRadio" method="post">
    <input name="choice" value="1" type="radio" />1 
    <input name="choice" value="2" type="radio" />2 
    <input name="choice" value="3" type="radio" />3 
    <input name="choice" value="4" type="radio" />4
</form>

Open in new window


Your javascript to get the value of the button selected looks like this:
	<script language="JavaScript">
 
		function getRadioValue() {
			for (index=0; index < document.frmRadio.choice.length; index++) {
				if (document.frmRadio.choice[index].checked) {
					var radioValue = document.frmRadio.choice[index].value;
					break;
				}
			}
		}
 
	</script>

Open in new window

0
 
kkbenjAuthor Commented:
How can I reference the radio buttons that have names that are set via the PHP code?  Please see my code above.

The radio button name is RB + a variable name set in PHP.
0
 
nap0leonCommented:
A few thoughts...
1- names should be the same... make the IDs unique.  That way you can use the standard code for what you are trying to accomplish.

2- if you must have irregular names... the easy way out?
  a- declare a global variable
  b- add another function call to the onclick event that updates the value of the global variable to "this.id"
  c- whenever you want the value of the radio button that is selected, reference that new global variable.

3- if you must use irregular names... a method coders would consider better than my suggestion #2... use getElementsByTagName such as the following (totally untested, just typing it up as I go)
var allinputs = document.getElementsByTagName("input");
var re = new RegExp('^RB-','i');

for (var i = 0; i < allinputs.length; i++) {
  if(allinputs[i].name && re.test(allinputs[i].name)) {
    //looking at an input that starts with 'RB'
    if (allinputs[i].checked) {
      //whatever you want to do with it
    }
  }
}

Open in new window

0
 
nap0leonCommented:
wait a sec... why are you even using radio buttons?
radio buttons are for enforcing "only one item in the set is selected".
by having a different name on each radio button, the entire purpose of using radio buttons is shot to hell... you should just use checkboxes instead.

Another approach to getting which items (since they all have different names, there can be multiple items selected) is to give each of them a special class name like "class=I_like_using_radio_buttons_for_something_other_than_what_they_were_intended".  You can then use a "getElementsByClassName" method which is fairly easy to add to your JS
(see here for example: http://javascript.about.com/library/bldom08.htm)
0
 
kkbenjAuthor Commented:
nap0lean,
I'm sorry for any confusion.  I have 2 SETS of radio buttons.  The first set all have the same name, the second all have the same name but different from the first set.

I need the total of Set A value + Set B value.

I will try your suggestions in the morning.
0
 
kkbenjAuthor Commented:
nap0lean -

I have the getElementsByClassName working - exactly what I was looking for.  But how can I evaluate the value as numeric rather than strings?

I am attaching my code.

If I choose Set A button of 19 and Set B button of 29, the alert displays 1929.
textbox = document.getElementsByClassName('AddIt');
var iAmt = 0;
for (var i=0; i<textbox.length; i++) {
	if (textbox[i].checked) {
		iAmt = iAmt + textbox[i].value;
	}
}
alert(iAmt);

Open in new window

0
 
nap0leonCommented:
slap a "parsefloat" around it before adding:

iAmt = iAmt + parsefloat(textbox[i].value);

Open in new window

0
 
kkbenjAuthor Commented:
I have tried both parsefloat and intval.  I do not see an error but it does not evaluate the iAmt = iAmt + line.
0
 
kkbenjAuthor Commented:
Uncaught ReferenceError: parsefloat is not defined & intval is not defined
0
 
kkbenjAuthor Commented:
but parseFloat is case sensitive.

Works perfectly.  Thanks for all of the help!
0
 
nap0leonCommented:
oops - my bad - glad you caught it - should be parseFloat() not parsefloat.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 10
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now