473,320 Members | 1,853 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How do I configure forms?

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

Jul 25 '06 #1
6 1385

Kissingfish wrote:
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..

Jul 25 '06 #2
Kissingfish wrote:
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
<URL:http://www.jibbering.com/faq/#FAQ4_7>

//--></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/f...ess.html#faBut >

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

Jul 25 '06 #3

RobG wrote:
Kissingfish wrote:
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
<URL:http://www.jibbering.com/faq/#FAQ4_7>

//--></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/f...ess.html#faBut >

Poke around Matt Kruse's site:
<URL:http://www.javascripttoolbox.com/lib/form/>
--
Rob
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..

Jul 25 '06 #4
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..

Jul 25 '06 #5

Kissingfish wrote:
[...]
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..
<URL:
http://groups.google.com/group/comp....becd60/?hl=en#
>
Jul 25 '06 #6

Kissingfish wrote:
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:

<script type="text/javascript">

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="text" name="text1"><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[i]].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[i]].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>
--
Rob

Jul 25 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Markus Wollny | last post by:
Hello! When I try to run ./configure --with-java, it complains that ant doesn't work. However ant is installed, as is the latest Java SDK 1.4.2 from sun, PATH and JAVA_HOME are set correctly; ...
1
by: dm_dal | last post by:
I'm looking for some feedback or for someone to point me in a good direction. We have a web application that consist of many forms. Some of our clients have asked if we can configure the app in...
0
by: Samuel M. Smith | last post by:
I am trying to build python2.4.2 on an arm 9 running Debian 3 Sarge when I run ./configure it fails with ../configure checking MACHDEP... linux2 checking EXTRAPLATDIR... checking for...
1
by: Markus Wollny | last post by:
Hi! I am trying to build PostgreSQL 7.4.3 with Java enabled; I've got Apache Ant version 1.5 and j2sdk1.4.1_05 installed: Verifiying ant: # which javac /usr/java/j2sdk1.4.1_05/bin/javac #...
14
by: david | last post by:
I have developed web forms including login by using ASP.NET via HTTP. Now I want to secure the connection from client to the server via HTTPS. How can I configure the server or something else to...
4
by: Andrew Chalk | last post by:
How do I configure IIS for the following. I have a directory called base and then several directories at the next level down corresponding to versions of my ASP app. I.e. BASE Ver1.0 Ver1.1...
0
by: Satish S Nandihalli | last post by:
following errors were found on executing configure file: 1) configure: WARNING: thread.h: present but cannot be compiled configure: WARNING: thread.h: check for missing prerequisite headers?...
1
by: Jim McCullars | last post by:
Greetings: Getting configure errors trying to build PHP 5.2.5 under Solaris 9. The configure command I use is this: ../configure --with-mysql --with-gd --with-jpeg-dir=/usr/local...
0
by: Manuel Ricca | last post by:
Hi all, I need to protect a "members" area in my site for which I want to require forms authentication and allow only a specific role. This subdirectory must be accessible through SSL only....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.