Link to home
Start Free TrialLog in
Avatar of kkbenj
kkbenj

asked on

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

Avatar of mattibutt
mattibutt
Flag of United States of America image

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
Avatar of kkbenj
kkbenj

ASKER

I want a specific graphic to display if the TOTAL amount (from both sets of buttons) >= 29.
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
Avatar of kkbenj

ASKER

I need to add the values from BOTH sets of radio buttons combined, plus the value entered into the OtherAmt text boxes.
Avatar of kkbenj

ASKER

I have the functionality in place to handle the graphic.  It's the evaluation of amounts I need the help with.
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
Avatar of kkbenj

ASKER

I need a code example of how to refer to the variable named radio buttons please.
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

Avatar of kkbenj

ASKER

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.
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

ASKER CERTIFIED SOLUTION
Avatar of nap0leon
nap0leon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kkbenj

ASKER

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.
Avatar of kkbenj

ASKER

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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kkbenj

ASKER

I have tried both parsefloat and intval.  I do not see an error but it does not evaluate the iAmt = iAmt + line.
Avatar of kkbenj

ASKER

Uncaught ReferenceError: parsefloat is not defined & intval is not defined
Avatar of kkbenj

ASKER

but parseFloat is case sensitive.

Works perfectly.  Thanks for all of the help!
oops - my bad - glad you caught it - should be parseFloat() not parsefloat.