How do I configure forms?

K

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

Kissingfish

Kissingfish said:
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..
Click to expand...


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

RobG

Kissingfish said:
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"><!--
Click to expand...

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);
}
Click to expand...

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="">
Click to expand...

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

number1
<select name="number1" onChange="updatesum()">
Click to expand...

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
Click to expand...

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..
Click to expand...

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/>
 
K

Kissingfish

RobG said:
Kissingfish said:
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"><!--
Click to expand...

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);
}
Click to expand...

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="">
Click to expand...

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

number1
<select name="number1" onChange="updatesum()">
Click to expand...

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
Click to expand...

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..
Click to expand...

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/>
Click to expand...

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

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

RobG

Kissingfish said:
UPDATE..

I've created the following:



<script language="JavaScript"><!--
Click to expand...

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"><!--
Click to expand...

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" />
Click to expand...

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)">
Click to expand...

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

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

<input type="text" name="myText1"><br />
Click to expand...

<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 />
Click to expand...

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">
Click to expand...

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?
Click to expand...

Yes, that's the 'work around'.

I assume the javascript will need to differ then..
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I configure forms? 0
How can I make the ddChild dropdown conditionally required and its selected value should not be the initial value(which is value="") 2
How do I fix this issue in sqaurespace code block? 1
I dont get this. Please help me!! 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How do I get the if statement correct in the lines that has it in the program? 2
How to display input options only after selecting an option from the 'select class' tag JS? 6

Members online

Total: 61 (members: 2, guests: 59)
Robots: 519

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top