How do I configure forms?

[Kissingfish]

Hi there..

I'm trying to configure a quote form for my website.. I want to have
different fields, for example radio buttons, check boxes and drop-down
menus, and depending on what you select, a different value will appear
on the 'total' box down the bottom..

I can figure out how to write a scipt and have textboxes add up to a
total.. And I can do it with dropdown menus, like this..

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value =
(document.form.number1.options[document.form.number1.selectedIndex].text-0)
+
(document.form.number2.options[document.form.number2.selectedIndex].text-0);
}
//--></script>

<form name="form" action="">
number1
<select name="number1" onChange="updatesum()">
<option selected>0<option>1<option>2<option>3<option>4
<option>5<option>6<option>7<option>8<option>9
</select>
number2
<select name="number2" onChange="updatesum()">
<option selected>0<option>1<option>2<option>3<option>4
<option>5<option>6<option>7<option>8<option>9
</select>
Their sum is:</th> <td><input name="sum" readonly style="border:none"
value="(not computed)">
</form>


And so on..

But I can't get it to interact with radio buttons, for example, instead
of a dropdown number, simply have a radio button (or a check box) with
an assigned value, it doesn't recognize it..


Please help.. I know am missing something.. Or maybe point me to a
website that might have such example I can practice from..

 

[Kissingfish]

Hi there..

I'm trying to configure a quote form for my website.. I want to have
different fields, for example radio buttons, check boxes and drop-down
menus, and depending on what you select, a different value will appear
on the 'total' box down the bottom..

I can figure out how to write a scipt and have textboxes add up to a
total.. And I can do it with dropdown menus, like this..

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value =
(document.form.number1.options[document.form.number1.selectedIndex].text-0)
+
(document.form.number2.options[document.form.number2.selectedIndex].text-0);
}
//--></script>

<form name="form" action="">
number1
<select name="number1" onChange="updatesum()">
<option selected>0<option>1<option>2<option>3<option>4
<option>5<option>6<option>7<option>8<option>9
</select>
number2
<select name="number2" onChange="updatesum()">
<option selected>0<option>1<option>2<option>3<option>4
<option>5<option>6<option>7<option>8<option>9
</select>
Their sum is:</th> <td><input name="sum" readonly style="border:none"
value="(not computed)">
</form>


And so on..

But I can't get it to interact with radio buttons, for example, instead
of a dropdown number, simply have a radio button (or a check box) with
an assigned value, it doesn't recognize it..


Please help.. I know am missing something.. Or maybe point me to a
website that might have such example I can practice from..

I could assign a value to the radio (or check) boxes, but then, even if
they're not checked (or selected), when I press 'calculate', the answer
will include that value anyway..

 

[RobG]

Hi there..

I'm trying to configure a quote form for my website.. I want to have
different fields, for example radio buttons, check boxes and drop-down
menus, and depending on what you select, a different value will appear
on the 'total' box down the bottom..

I can figure out how to write a scipt and have textboxes add up to a
total.. And I can do it with dropdown menus, like this..

<script type="text/javascript"><!--

HTML comments delimiters inside script elements are completely
unnecessary and have been for many, many years. Just don't use them.

function updatesum() {
document.form.sum.value =
(document.form.number1.options[document.form.number1.selectedIndex].text-0)
+
(document.form.number2.options[document.form.number2.selectedIndex].text-0);
}

If you pass 'this' from your onchange handler, you can try something
like:

function updatesum(el){
var f = el.form;
var num1 = f.number1;
var num2 = f.number2;
f.sum.value = +num1.options[num1.selectedIndex].text
+ +num2.options[num2.selectedIndex].text;
}

Which seems neater to me - opinions may differ. However read the FAQ
in regard to adding decimal numbers and the pitfalls that await:

<URL:http://www.jibbering.com/faq/#FAQ4_6>
and

//--></script>

<form name="form" action="">

I don't think it's a good idea to name a form 'form'.

number1
<select name="number1" onChange="updatesum()">

Pass 'this' from your handler:

<select name="number1" onchange="updatesum(this)">

[...]

And so on..

But I can't get it to interact with radio buttons, for example, instead
of a dropdown number, simply have a radio button (or a check box) with
an assigned value, it doesn't recognize it..


Please help.. I know am missing something

Yes, a message yesterday asking almost exactly the same question. It
is normal to search a newsgroup first to see if you question has
already been answered. You will normally find it has been, many times.

.. Or maybe point me to a
website that might have such example I can practice from..

Read the FAQ:
<URL:http://www.jibbering.com/faq/#FAQ4_13>

Then the link below that entry:
<URL: http://jibbering.com/faq/faq_notes/form_access.html#faBut >

Poke around Matt Kruse's site:
<URL:http://www.javascripttoolbox.com/lib/form/>

 

[Kissingfish]

Hi there..

I'm trying to configure a quote form for my website.. I want to have
different fields, for example radio buttons, check boxes and drop-down
menus, and depending on what you select, a different value will appear
on the 'total' box down the bottom..

I can figure out how to write a scipt and have textboxes add up to a
total.. And I can do it with dropdown menus, like this..

<script type="text/javascript"><!--

HTML comments delimiters inside script elements are completely
unnecessary and have been for many, many years. Just don't use them.

function updatesum() {
document.form.sum.value =
(document.form.number1.options[document.form.number1.selectedIndex].text-0)
+
(document.form.number2.options[document.form.number2.selectedIndex].text-0);
}

If you pass 'this' from your onchange handler, you can try something
like:

function updatesum(el){
var f = el.form;
var num1 = f.number1;
var num2 = f.number2;
f.sum.value = +num1.options[num1.selectedIndex].text
+ +num2.options[num2.selectedIndex].text;
}

Which seems neater to me - opinions may differ. However read the FAQ
in regard to adding decimal numbers and the pitfalls that await:

<URL:http://www.jibbering.com/faq/#FAQ4_6>
and

//--></script>

<form name="form" action="">

I don't think it's a good idea to name a form 'form'.

number1
<select name="number1" onChange="updatesum()">

Pass 'this' from your handler:

<select name="number1" onchange="updatesum(this)">

[...]

And so on..

But I can't get it to interact with radio buttons, for example, instead
of a dropdown number, simply have a radio button (or a check box) with
an assigned value, it doesn't recognize it..


Please help.. I know am missing something

Yes, a message yesterday asking almost exactly the same question. It
is normal to search a newsgroup first to see if you question has
already been answered. You will normally find it has been, many times.

.. Or maybe point me to a
website that might have such example I can practice from..

Read the FAQ:
<URL:http://www.jibbering.com/faq/#FAQ4_13>

Then the link below that entry:
<URL: http://jibbering.com/faq/faq_notes/form_access.html#faBut >

Poke around Matt Kruse's site:
<URL:http://www.javascripttoolbox.com/lib/form/>

Thanks.. Would have been helpful if you had directed me to the thread
that was posted yesterday asking for the same thing I had asked for..
I can't seem to find it..

 

[Kissingfish]

UPDATE..

I've created the following:



<script language="JavaScript"><!--
function setField1(what) {
if (what.myTick1.checked)
what.myText1.value = '4';
else
what.myText1.value = '';
}
//--></script>

<script language="JavaScript"><!--
function setField2(what) {
if (what.myTick2.checked)
what.myText2.value = '2';
else
what.myText2.value = '';
}
//--></script>



<script language="JavaScript"><!--
function setField3(what) {
if (what.myTick3.checked)
what.myText3.value = '5';
else
what.myText3.value = '';
}
//--></script>







<form name="f">

<select name="s" onchange="this.form.myText4.value=this.value;">
<option value=""></option>
<option value="63">Tango</option>
<option value="11">Foxtrot</option>
<option value="52">Ballroom</option>
<option value="41">Waltz</option>
</select>
<input type="text" name="myText4" />

<br/>
<input type="radio" name="myTick1" onClick="setField1(this.form)">
<input type="text" name="myText1"><br />


<input type="radio" name="myTick2" onClick="setField2(this.form)">
<input type="text" name="myText2"><br />

<input type="radio" name="myTick3" onClick="setField3(this.form)">
<input type="text" name="myText3"> <br />


<INPUT TYPE="BUTTON" VALUE="=" onClick="this.form.answer.value =
(this.form.myText1.value - 0) + (this.form.myText2.value - 0) +
(this.form.myText3.value - 0) + (this.form.myText4.value - 0)">
<INPUT TYPE="TEXT" NAME="answer">

<br />


</form>


It just seems messy, but (almost) does what I need it to..
The radio buttons .. They stay on all the time.. And they don't alter
from one to the next (I'm assuming this is because they have different
names assigned to each)..

IS there a workaroudn for this?

Can I name them each the same, but assign them different values?

I assume the javascript will need to differ then..

 

[RobG]

Kissingfish wrote:
[...]

 

[RobG]

UPDATE..

I've created the following:



<script language="JavaScript"><!--

That's a backward step. You've replaced the required type attribute
with the deprecated language attribute - and kept the
(worthless/useless/annoying) HTML comment delimiter:

function setField1(what) {
if (what.myTick1.checked)
what.myText1.value = '4';
else
what.myText1.value = '';
}
//--></script>

<script language="JavaScript"><!--

Functions can be in the same script element, there is no need to
separate them. You only need one function that you pass a reference to
the checkbox and and the name of the form control to update. The
function could be:

function setField(el, controlName){
el.form.elements[controlName].value = (el.checked)? el.value : '';
}


See below for the call...

[...]

<input type="text" name="myText4" />

Forget pretend XHTML, use HTML. Much of the HTML seems superfluous -
keep posted code concise.

<br/>
<input type="radio" name="myTick1" onClick="setField1(this.form)">

<input type="checkbox" onclick="setField(this, 'text1')">

I'm totally over the whole 'my...' thing.

<input type="text" name="myText1"><br />

<input type="radio" name="myTick2" onClick="setField2(this.form)">
<input type="text" name="myText2"><br />

<input type="radio" name="myTick3" onClick="setField3(this.form)">
<input type="text" name="myText3"> <br />

The way to create a set of radio buttons where only one of the set is
checked is to give them all the same name. Individual radio buttons
can't be unchecked without script or re-setting the form.

If you want elements that can be checked/unchecked independently, use
checkboxes.

<INPUT TYPE="BUTTON" VALUE="=" onClick="this.form.answer.value =
(this.form.myText1.value - 0) + (this.form.myText2.value - 0) +
(this.form.myText3.value - 0) + (this.form.myText4.value - 0)">
<INPUT TYPE="TEXT" NAME="answer">

I would use a 'sumFields' function like:

function sumFields(){
var args = arguments;
var f = args[0];
var sum = 0;
for (var i=1, len=args.length; i<len; i++){
sum += +f[args].value;
}
return sum;
}


And make the onclick something like:

<input type="button" value="=" onclick="
this.form.answer.value = sumFields(this.form, 'text1', 'text2',
'text3');
">

<br />


</form>


It just seems messy, but (almost) does what I need it to..
The radio buttons .. They stay on all the time.. And they don't alter
from one to the next (I'm assuming this is because they have different
names assigned to each)..
Yes


IS there a workaroudn for this?
Yes...


Can I name them each the same, but assign them different values?

Yes, that's the 'work around'.

I assume the javascript will need to differ then..

Yes.


Since this appears to be purely for play, here's an example based on
your attempt:

<script type="text/javascript">

function setField(el, controlName){
el.form.elements[controlName].value = (el.checked)? el.value : '';
}

function sumFields(){
var args = arguments;
var f = args[0];
var sum = 0;
for (var i=1, len=args.length; i<len; i++){
sum += +f[args].value;
}
return sum;
}

</script>

<form name="f" action="">
<input type="checkbox" value="4" name="tick1"
onclick="setField(this, 'text1')">
<input type="text" name="text1">
<br>
<input type="checkbox" value="2" name="tick2"
onclick="setField(this, 'text2')">
<input type="text" name="text2">
<br>
<input type="checkbox" value="5" name="tick3"
onclick="setField(this, 'text3')">
<input type="text" name="text3">
<br>

<!-- wrapped for posting -->
<input type="button" value="=" onclick="
this.form.answer.value =
sumFields(this.form, 'text1', 'text2', 'text3');
">
<input type="text" name="answer"><br>
</form>