Click to See Complete Forum and Search --> : javaScript Form
carlosthehitman
01-15-2004, 06:06 PM
i'm trying to a complicated form and i find there are a few difficulties. i have a selection drop down box with 4 options and under it i have 4 radio buttons. i need different values to be be displayed in a text box acording to the selections. eg. if option 1 is selected in drop down menu and option 3 on the radio buttons, then it needs to display a number. If option 2 in drop down and option 3 on radio then another number, so on and so forth.
I seem to be having issues with the javaScript.
any help would be appreciated.
thanks
batfink
01-16-2004, 03:00 AM
Here ya go. variable sl holds the select list choice and rad the radio choice (remember indexes start at zero)
So just add if statements to act on these two values.
<html><head>
<title> :::by BATFINK ::: http://www.batfink.clara.co.uk :::</title>
<script language="javascript">
function acT()
{
var sl = document.getElementById("seL").selectedIndex;
var buttons = document.getElementsByName("_r");
var rad=0;
for(x=0;x<buttons.length;x++)
{
if(buttons[x].checked){rad=x};
}
document.getElementById("_txt").value = sl + ":" + rad;
}
</script>
</head>
<body onLoad="acT()">
<form>
<select id="seL" onChange="acT()">
<option>Alpha</option>
<option>Bravo</option>
<option>Charlie</option>
<option>Delta</option>
</select><br>
<input type="radio" name="_r" checked onClick="acT()">Ant
<input type="radio" name="_r" onClick="acT()">Bat
<input type="radio" name="_r" onClick="acT()">Cat
<input type="radio" name="_r" onClick="acT()">Dog
<br>
<input type="text" id="_txt">
</form>
</body></html>
:D
<html>
<head>
<script>
function showR(){
s = document.forms[0].sel.selectedIndex;
r='';
for (i=0;i<document.forms[0].rad.length;i++){
if(document.forms[0].rad[i].checked){r=i}
}
if(r =='' || s == 0){
alert('You have to choose an option AND a radio button!')
}
else{
alert( 'OPTION = '+s+' RADIO BUTTON = '+r)
}
}
</script>
</head>
<body>
<form>
<select name="sel">
<option>Choose</option>
<option>op 1</option>
<option>op 2</option>
<option>op 3</option>
<option>op 4</option>
</select>
<input name="rad" type="radio">
<input name="rad" type="radio">
<input name="rad" type="radio">
<input name="rad" type="radio"><br>
<br>
<br>
<br>
<br>
<input type="button" value="Show the rersult" onclick="showR()">
</form>
</body>
</html>
:D Quite the same. (but mine is complete cross-browser...)
Anyway, the main ideea is the same. You have to set an if satement. The values you need for this are:
selectedIndex and the checked i in the increment (the i for which the radion button is checked)
batfink
01-16-2004, 10:20 AM
Kor,
I'm not trying to argue here, but I must point out my code works in IE , Netscape and Opera. Is that not cross browser?
Please take this comment in the way it is intended (to help you not rubbish your code) but your code does not work when radio button zero is selected.
Batfink
carlosthehitman
01-18-2004, 03:24 PM
thanks alot for that guys, i've come across another small issue. ive got 4 check boxes and 2 text boxes, the 4 check boxes have 4 different monetary values ($22,$27.5,$250,$33) and in the text fields, users will enter different amounts. I have a "Total" text box at the bottom that will have to add up the total value of all check boxes and/or text fields automatically. i'm working on the Onclick function but going nowhere.
batfink
01-18-2004, 06:30 PM
Tested in IE, NN & Opera.
<html><head>
<title> :::by BATFINK ::: http://www.batfink.clara.co.uk :::</title>
<script language="javascript">
function acT()
{
d = document;total=0;
for(x=0;x<4;x++)
{
if(d.forms[0].elements[x].checked)
{
total += parseFloat(d.forms[0].elements[x].value);
}
}
t1 = "0" + d.getElementById("_txt1").value;
total += parseFloat(t1);
t2 = "0" + d.getElementById("_txt2").value;
total += parseFloat(t2);
d.getElementById("_tot").value = total;
}
</script>
</head>
<body onLoad="acT()">
<form>
<input type="checkbox" value="22" name="_c1" onClick="acT()">Ant
<input type="checkbox" value="27.5" name="_c2" onClick="acT()">Bat
<input type="checkbox" value="250" name="_c3" onClick="acT()">Cat
<input type="checkbox" value="33" name="_c4" onClick="acT()">Dog<br>
<input type="text" id="_txt1" onKeyUp="acT()"><br>
<input type="text" id="_txt2" onKeyUp="acT()"><br>
<input type="text" id="_tot" onFocus="this.blur()">
</form>
</body></html>
carlosthehitman
01-18-2004, 09:02 PM
thanks batfink, that works well. But once i apply it to my form this error occurs:
'd.forms.0.elements[...].checked' is null or not an object
cant sem to work out why.
To batfink
Your script is correct, I just want to say that yours, for instance, will not work on NS4 and IE4... You must have known that the getElementById(id) object reference works only for IE5+, NS6+ and compatible...
Furthermore, in this particular case getElementById brings no special facilities so I don't see why not use the classic reference
document.forms[].elements[order_position].attribute
instead of
document.getElementById(id).attribute
Because this way will cover the older browsers as NS4 and IE4.
About the 0 check error... easy to repair. asign a certain string to r value will avoid the interpretor confusion between 0 and a void string''.
batfink
01-19-2004, 03:40 PM
Originally posted by carlosthehitman
thanks batfink, that works well. But once i apply it to my form this error occurs:
'd.forms.0.elements[...].checked' is null or not an object
cant sem to work out why.
Carlos the code should read if(d.forms[0].elements[x].checked)
not sure how your square brackets have moved. Re-copy the code again.
Kor, as you identified this was tested in IE6, NN7.02, and Opera 7. Most people use IE 94%. (The majority IE5+ and for NN most using NN5+.
carlosthehitman
01-19-2004, 04:55 PM
hey batfink,
the code i was using was correct, i cant sem to get the code to work within another form. even if i move the code below the other form it doesnt work. Even placing the checkboxes in tables returns an error. i've got a form with 2 other javascript snippets used and this was the last one needed. it seems to be having difficulty combining with the exising form. i'll attach the form so y0ou can see where i want to attach it.
batfink
01-20-2004, 04:26 AM
Originally posted by carlosthehitman
hey batfink,
the code i was using was correct, i cant sem to get the code to work within another form. even if i move the code below the other form it doesnt work. Even placing the checkboxes in tables returns an error. i've got a form with 2 other javascript snippets used and this was the last one needed. it seems to be having difficulty combining with the exising form. i'll attach the form so y0ou can see where i want to attach it.
You have just supplied the answer! forms[0] means the first form on the page. forms[1] is the second form and so on.
(If using getElementById this problem would not have arisen - sorry Kor)
using getElementById this problem would not have arisen
Yes, but even in your code u used forms[0]...:D
I often use getElementById or getElementsByTagName mainly for movement or hide/show objects... Yet, when working with a great number of objects I saw that it is a shorter code if using the order of the elements rather than their specific ids... Of course, I can give a comon id, thus I can use getElementById(id)[i] method to build an array... But... If specific reference document/form/element/attribute works as well on every browser I do prefere sometimes this old fashioned coding :cool:
batfink
01-20-2004, 08:28 AM
carlosthehitman
01-20-2004, 03:35 PM
thanks heaps guys, is there any way i could put all that on 1 form, instead of using it in 2 forms.
can i put a form within a form?
batfink
01-20-2004, 04:12 PM
Yes, just use one set of form tags & put the form tags around everything you want on the form.
Remember, as you will then have ONE form that the reference to it will be forms[0]
carlosthehitman
01-20-2004, 04:24 PM
i'm getting there mate, its all functioning correctly except for the check boxes, the text boxes add up correctly but when you tick the check boxes nothing happens. its not returning an error or anything so i cant see where the problem lies.
thanks for your help batfink, we'll have to have a virtual Beer.
David Harrison
01-20-2004, 05:27 PM
Originally posted by Kor
Of course, I can give a comon id, thus I can use getElementById(id)[i]A common id?:confused:?
Tut tut, id's should be unique, surely you know that Kor.
carlosthehitman
01-20-2004, 05:33 PM
Here you go lavalamp,
the attached text file should show you the whole form. its all working except for the check boxes that read "refer to drawer" "unbarring" etc.
once they are ticked, the amount should add up in the total box, along with the amounts in the text boxes. with the current script, the text boxes work but not the check boxes.
David Harrison
01-20-2004, 05:49 PM
This do it for you?
carlosthehitman
01-20-2004, 05:58 PM
Case is closed,
thanks alot lavalamp.
Big thanks to Batfink and Kor for your help.
David Harrison
01-20-2004, 06:02 PM
I only did the little bit at the end. Now I feel bad, I'm like the guy that everyone knows at least one of, who takes credit for everyone else's stuff. :(
carlosthehitman
01-20-2004, 06:18 PM
Hi lavalamp,
all the code works correctly but i get an "error on page" bottom left of window. it all still functions though.
the error is :
line: 28
char: 7
error: expected ';'
should i put that semi colon somewhere?
David Harrison
01-20-2004, 06:57 PM
Since you weren't actually doing anything when the form was submitted I included the required action attribute in the form tag, then to stop the button from doing anything I included an onsubmit="return false;" but I missed an "r" out, it should look like this:
<form name="debitform" method="post" action="#" onsubmit="return false;">
I've uploaded a corrected version.
carlosthehitman
01-20-2004, 07:11 PM
thanks mate
To lavalamp:
Even it is IE only, the below code shows you that a common ID may be use. I know it makes no sense, there are many other correct and cross-browser ways to do it. Stll I wanted to show you that it can be done :)
IE only:
<html>
<head>
<script>
function bla(){
for(i=0;i<oak.length;i++){
alert(oak[i].style.color)
}
}
</script>
</head>
<body onload="bla()">
<div id="oak" style="color:#FF0000">bla</div>
<div id="oak" style="color:#FFFF00">blabla</div>
</body>
</html>
David Harrison
01-21-2004, 04:26 AM
Originally posted by Kor
IE onlyYou said it, IE only, and therefore by definition wrong. :P
to lavalamp:
Don't missunderstand me, please. I don't recomend that to anyone. Just show that think IS POSSIBLE (possiblity that you have denied some replays ago :D )
On the other hand, wether you want or not, at this moment IE covers more than 3/4 of the market... maybe more...
I don't defend IE, just a notice. I repeat, that is a wrong code but, gee, look, it works :D
batfink
01-21-2004, 11:06 AM
I L:eek: VE IE