473,657 Members | 2,515 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.s um.value =
(document.form. number1.options[document.form.n umber1.selected Index].text-0)
+
(document.form. number2.options[document.form.n umber2.selected Index].text-0);
}
//--></script>

<form name="form" action="">
number1
<select name="number1" onChange="updat esum()">
<option selected>0<opti on>1<option>2<o ption>3<option> 4
<option>5<optio n>6<option>7<op tion>8<option>9
</select>
number2
<select name="number2" onChange="updat esum()">
<option selected>0<opti on>1<option>2<o ption>3<option> 4
<option>5<optio n>6<option>7<op tion>8<option>9
</select>
Their sum is:</th<td><input name="sum" readonly style="border:n one"
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 1396

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.s um.value =
(document.form. number1.options[document.form.n umber1.selected Index].text-0)
+
(document.form. number2.options[document.form.n umber2.selected Index].text-0);
}
//--></script>

<form name="form" action="">
number1
<select name="number1" onChange="updat esum()">
<option selected>0<opti on>1<option>2<o ption>3<option> 4
<option>5<optio n>6<option>7<op tion>8<option>9
</select>
number2
<select name="number2" onChange="updat esum()">
<option selected>0<opti on>1<option>2<o ption>3<option> 4
<option>5<optio n>6<option>7<op tion>8<option>9
</select>
Their sum is:</th<td><input name="sum" readonly style="border:n one"
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.s um.value =
(document.form. number1.options[document.form.n umber1.selected Index].text-0)
+
(document.form. number2.options[document.form.n umber2.selected Index].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.selectedIn dex].text
+ +num2.options[num2.selectedIn dex].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.c om/faq/#FAQ4_6>
and
<URL:http://www.jibbering.c om/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="updat esum()">
Pass 'this' from your handler:

<select name="number1" onchange="updat esum(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.c om/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.javascriptt oolbox.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.s um.value =
(document.form. number1.options[document.form.n umber1.selected Index].text-0)
+
(document.form. number2.options[document.form.n umber2.selected Index].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.selectedIn dex].text
+ +num2.options[num2.selectedIn dex].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.c om/faq/#FAQ4_6>
and
<URL:http://www.jibbering.c om/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="updat esum()">

Pass 'this' from your handler:

<select name="number1" onchange="updat esum(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.c om/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.javascriptt oolbox.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="JavaS cript"><!--
function setField1(what) {
if (what.myTick1.c hecked)
what.myText1.va lue = '4';
else
what.myText1.va lue = '';
}
//--></script>

<script language="JavaS cript"><!--
function setField2(what) {
if (what.myTick2.c hecked)
what.myText2.va lue = '2';
else
what.myText2.va lue = '';
}
//--></script>

<script language="JavaS cript"><!--
function setField3(what) {
if (what.myTick3.c hecked)
what.myText3.va lue = '5';
else
what.myText3.va lue = '';
}
//--></script>



<form name="f">

<select name="s" onchange="this. form.myText4.va lue=this.value; ">
<option value=""></option>
<option value="63">Tang o</option>
<option value="11">Foxt rot</option>
<option value="52">Ball room</option>
<option value="41">Walt z</option>
</select>
<input type="text" name="myText4" />

<br/>
<input type="radio" name="myTick1" onClick="setFie ld1(this.form)" >
<input type="text" name="myText1"> <br />
<input type="radio" name="myTick2" onClick="setFie ld2(this.form)" >
<input type="text" name="myText2"> <br />

<input type="radio" name="myTick3" onClick="setFie ld3(this.form)" >
<input type="text" name="myText3"< br />
<INPUT TYPE="BUTTON" VALUE="=" onClick="this.f orm.answer.valu e =
(this.form.myTe xt1.value - 0) + (this.form.myTe xt2.value - 0) +
(this.form.myTe xt3.value - 0) + (this.form.myTe xt4.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="JavaS cript"><!--
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.c hecked)
what.myText1.va lue = '4';
else
what.myText1.va lue = '';
}
//--></script>

<script language="JavaS cript"><!--
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.element s[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="setFie ld1(this.form)" >
<input type="checkbox" onclick="setFie ld(this, 'text1')">

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

<input type="text" name="myText1"> <br />
<input type="text" name="text1"><b r>

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

<input type="radio" name="myTick3" onClick="setFie ld3(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.f orm.answer.valu e =
(this.form.myTe xt1.value - 0) + (this.form.myTe xt2.value - 0) +
(this.form.myTe xt3.value - 0) + (this.form.myTe xt4.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.answe r.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.element s[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="setFie ld(this, 'text1')">
<input type="text" name="text1">
<br>
<input type="checkbox" value="2" name="tick2"
onclick="setFie ld(this, 'text2')">
<input type="text" name="text2">
<br>
<input type="checkbox" value="5" name="tick3"
onclick="setFie ld(this, 'text3')">
<input type="text" name="text3">
<br>

<!-- wrapped for posting -->
<input type="button" value="=" onclick="
this.form.answe r.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
2837
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; helles:/ # /usr/java/apache-ant-1.5.4/bin/ant -version Apache Ant version 1.5.4 compiled on August 12 2003 It complains about some unsupported class-version; does it require an
1
1230
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 such a way as to allow them to turn on/off the editable nature of certain form fields. ie: Say the form has 10 fields in it, one of which is a field for the users birthdate. Some clients want the user to be able to change their birthdate,...
0
1310
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 --without-gcc... no checking for --with-cxx=<compiler>... no checking for c++... c++
1
3305
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 # ant -version Apache Ant version 1.5 compiled on October 15 2002
14
3046
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 make the change? Thank you David
4
1622
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
1275
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? configure: WARNING: thread.h: see the Autoconf documentation configure: WARNING: thread.h: section "Present But Cannot Be Compiled" configure: WARNING: thread.h: proceeding with the preprocessor's result
1
3584
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 --with-png-dir=/usr/local --with-zlib-dir=/usr/local --with-apxs2=/usr/local/apache2/bin/apxs --with-libxml-dir=/usr/local and I get this error:
0
1218
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. However, I can't configure a <locationsection for the subdirectory because it would require absolute paths (because it will start with https://....). Can anyone help?
0
8392
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8732
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8503
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8605
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6163
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5632
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4151
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4302
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1611
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.