1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:36 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Form Help - creating more complex forms

adding more complex variables to forms

         

Ashantai

9:01 am on Jan 28, 2005 (gmt 0)

10+ Year Member



Hi-

I'm working on a form for my website, and I want there to be the ability that when you select a certain option, based on that selection it automatically fills is several fields.

eg, the page would look like this:

What would you like to purchase? -------- Price - Qt. (checkbox)
Package 1 -------------------------------------- $3.00 ___
Page 1 ------------------------------------------ $0.99 ___
Page 2 ------------------------------------------ $0.99 ___
Page 3 ------------------------------------------ $0.99 ___
Page 4 ------------------------------------------ $0.99 ___

So, if the visitor selects "Package 1," the box (or as it's shown in my example, the ___) beside Page 1 auto-fills with 3, Page 2 with 4, Page 3 with 1, and Page 4 with 8, for example. Or, the visitor can simply ignore "Package 1" and specify their own amounts for each individual page that they want to buy. But once they select "Package 1," the amounts of Pages 1-4 are locked in, so the only way for the visitor to specify the quantities of Pages 1-4 is if they don't select Package 1.

I know that was kind of a long explanation, but I wanted to try to make it as clear as possible. :) I don't know how to do the code to make this work and I really hope someone can help me out.

Thanks!

[edited by: BlobFisk at 1:00 pm (utc) on Jan. 28, 2005]
[edit reason] No personal information please! [/edit]

lZakl

5:23 pm on Jan 28, 2005 (gmt 0)

10+ Year Member



Try this :0) 

<html>
<head>
<SCRIPT LANGUAGE="javascript">
  function package1()
  {
document.packages.page1.value = "3";
document.packages.page2.value = "4";
document.packages.page3.value = "1";
document.packages.page4.value = "8";
}
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
  function package2()
  {
document.packages.page1.value = "5";
document.packages.page2.value = "9";
document.packages.page3.value = "2";
document.packages.page4.value = "6";
}
</SCRIPT>
</head>
<body>
<form name="packages">
Package 1 -------------- $3.00 <input type="button" value="Select Package 1" onclick="package1()"><br>
Package 2 -------------- $3.00 <input type="button" value="Select Package 2" onclick="package2()"><br>
<br><br>
Page 1 ----------------- $0.99 <input type="text" maxlength="5" name="page1"><br>
Page 2 ----------------- $0.99 <input type="text" maxlength="5" name="page2"><br>
Page 3 ----------------- $0.99 <input type="text" maxlength="5" name="page3"><br>
Page 4 ----------------- $0.99 <input type="text" maxlength="5" name="page4"><br>
<br><br><br>
<input type="reset">
</form>
</body>
</html>

Hope this helps :0)

-- Zak

Ashantai

10:04 pm on Jan 28, 2005 (gmt 0)

10+ Year Member



That really did get almost to exactly what I wanted, thank you! I changed the "Select Package" buttons to checkboxes though, but it still works exactly the same. :)

There's just one thing- when I click on "Select Package 1" checkbox, for example, the numbers all appear in the boxes of Pages 1-4, but I want 1) the numbers to be locked in, so they can't be changed once you've selected Package 1, and 2) that when you uncheck the Package 1 checkbox, all the numbers disappear (in effect, it resets that particular section).

Is there any way to do this? Thanks again!

lZakl

11:28 pm on Jan 28, 2005 (gmt 0)

10+ Year Member



1) the numbers to be locked in, so they can't be changed once you've selected Package 1.

2) that when you uncheck the Package 1 checkbox, all the numbers disappear (in effect, it resets that particular section).

Well as for number one... this will be a little difficult for me to just sit and off the top of my head write the code out for you. What I might suggest is a dynamic "label" then instead of a textbox. This way it's just text displayed on the page instead of being changable by customers.

You could then have a separate section that has the separate text fields for Pages 1-4 and a "add to order" button that adds these numbers to the labels mentioned above IF neither of the packages are checked. I would then issue the user an alert that says something to the effect "Error: You must uncheck your packages before attempting to add items to Pages 1-4".

This would be effective and user friendly I think. If you need help, I may be able to draft something up but it may take some time...

2) Unchecking the box to cause the labels we just created instead of text boxes, would be fairly easy I think. This would be another function that instead of making the values of the items "2" It would simply make the value "". Again, if you need help with this I am willing to help :0)

If you run into problems, or don't understand what I mean by something (I blew through this, I don't even have time to check for typos right now ;0) sticky me and I'll give you some more detailed explainations of what I mean.

Good luck and let us know!

-- Zak

lZakl

12:58 am on Jan 29, 2005 (gmt 0)

10+ Year Member



okok... I had a spare sec...

let me know how this works :0) 

<html>
<head>
<SCRIPT LANGUAGE="javascript">
pchk1 = "no";
pchk2 = "no";
function package1()
{
if (pchk2 == "yes")
 {
alert ("Please uncheck package 2 first!")
document.packages.pak1.checked = false;
 }
 else
 {
 if (pchk1 == "no")
 {
 document.packages.page1.value = "3";
 document.packages.page2.value = "4";
 document.packages.page3.value = "1";
 document.packages.page4.value = "8";
 document.packages.page1.onfocus=blurit
 document.packages.page2.onfocus=blurit
 document.packages.page3.onfocus=blurit
 document.packages.page4.onfocus=blurit
 pchk1 = "yes";
 }
 else if (pchk1 == "yes")
 {
 document.packages.page1.value = "";
 document.packages.page2.value = "";
 document.packages.page3.value = "";
 document.packages.page4.value = "";
 document.packages.page1.onfocus=new Function()
 document.packages.page2.onfocus=new Function()
 document.packages.page3.onfocus=new Function()
 document.packages.page4.onfocus=new Function()
 pchk1 = "no";
 }
 } 
}
function package2()
{
 if (pchk1 == "yes")
 {
alert ("Please uncheck package 1 first!")
document.packages.pak2.checked = false;
 }
 else
 {
 if (pchk2 == "no")
 {
 document.packages.page1.value = "3";
 document.packages.page2.value = "4";
 document.packages.page3.value = "1";
 document.packages.page4.value = "8";
 document.packages.page1.onfocus=blurit
 document.packages.page2.onfocus=blurit
 document.packages.page3.onfocus=blurit
 document.packages.page4.onfocus=blurit
 pchk2 = "yes";
 }
 else if (pchk2 == "yes")
 {
 document.packages.page1.value = "";
 document.packages.page2.value = "";
 document.packages.page3.value = "";
 document.packages.page4.value = "";
 document.packages.page1.onfocus=new Function()
 document.packages.page2.onfocus=new Function()
 document.packages.page3.onfocus=new Function()
 document.packages.page4.onfocus=new Function()
 pchk2 = "no";
 }
 }
}
function blurit(){
document.packages.reset.focus()
}
</SCRIPT>
</head>
<body>
<form name="packages">
Package 1 -------------- $3.00 <input name="pak1" type="checkbox" value="Select Package 1" onclick="package1()"><br>
Package 2 -------------- $3.00 <input name="pak2" type="checkbox" value="Select Package 2" onclick="package2()"><br>
<br><br>
Page 1 ----------------- $0.99 <input type="text" maxlength="5" name="page1"><br>
Page 2 ----------------- $0.99 <input type="text" maxlength="5" name="page2"><br>
Page 3 ----------------- $0.99 <input type="text" maxlength="5" name="page3"><br>
Page 4 ----------------- $0.99 <input type="text" maxlength="5" name="page4"><br>
<br><br><br>
<input name="reset" type="reset">
</form>
</body>
</html>

-- Zak

Ashantai

9:46 am on Jan 29, 2005 (gmt 0)

10+ Year Member



Okay, great! I've almost figured it out. :D To suit my purposes, I've changed the code to as follows:

<html>
<head>
<SCRIPT LANGUAGE="javascript">

pchk1 = "no";
pchk2 = "no";
function package1()
{
if (pchk2 == "yes")
{
alert ("Please uncheck package 2 first!")
document.packages.pak1.checked = false;
}
else
{
if (pchk1 == "no")
{
document.packages.page1.value = "3";
document.packages.page2.value = "4";
document.packages.page3.value = "1";
document.packages.page4.value = "8";
document.packages.page1.onfocus=blurit
document.packages.page2.onfocus=blurit
document.packages.page3.onfocus=blurit
document.packages.page4.onfocus=blurit
pchk1 = "yes";
}
else if (pchk1 == "yes")
{
document.packages.page1.value = "";
document.packages.page2.value = "";
document.packages.page3.value = "";
document.packages.page4.value = "";
document.packages.page1.onfocus=new Function()
document.packages.page2.onfocus=new Function()
document.packages.page3.onfocus=new Function()
document.packages.page4.onfocus=new Function()
pchk1 = "no";
}
}
}

function package2()
{
if (pchk1 == "yes")
{
alert ("Please uncheck package 1 first!")
document.packages.pak2.checked = false;

}
else
{
if (pchk2 == "no")
{
document.packages.page5.value = "2";
document.packages.page6.value = "6";
document.packages.page7.value = "4";
document.packages.page8.value = "7";
document.packages.page5.onfocus=blurit
document.packages.page6.onfocus=blurit
document.packages.page7.onfocus=blurit
document.packages.page8.onfocus=blurit
pchk2 = "yes";
}
else if (pchk2 == "yes")
{
document.packages.page5.value = "";
document.packages.page6.value = "";
document.packages.page7.value = "";
document.packages.page8.value = "";
document.packages.page5.onfocus=new Function()
document.packages.page6.onfocus=new Function()
document.packages.page7.onfocus=new Function()
document.packages.page8.onfocus=new Function()
pchk2 = "no";
}
}
}

function blurit(){
document.packages.reset.focus()
}

</SCRIPT>

</head>
<body>

<form name="packages">
Package 1 -------------- $3.00 <input name="pak1" type="checkbox" value="Select Package 1" onclick="package1()">
<dd>Page 1 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page1"><br>
<dd>Page 2 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page2"><br>
<dd>Page 3 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page3"><br>
<dd>Page 4 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page4"><br><br>

Package 2 -------------- $3.00 <input name="pak2" type="checkbox" value="Select Package 2" onclick="package2()">
<dd>Page 5 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page5"><br>
<dd>Page 6 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page6"><br>
<dd>Page 7 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page7"><br>
<dd>Page 8 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page8"><br>
<br><br><br>
<input name="reset" type="reset">
</form>

</body>
</html>

The only thing I'm now trying to do is eliminate the alert that pops up when both checkboxes are selected. I want every individual package with its unique set of pages to be able to be selected simultaneously if that's what the individual wants. But other than that, this is exactly what I'm looking for! :) Thank you thank you thank you!

lZakl

11:02 pm on Jan 30, 2005 (gmt 0)

10+ Year Member



Ummmmm... take the:

if (pchk2 == "yes")
{
alert ("Please uncheck package 2 first!")
document.packages.pak1.checked = false; ....

out... This is what you want:

[code]

<html>
<head>
<SCRIPT LANGUAGE="javascript">

pchk1 = "no";
pchk2 = "no";
function package1()
{

if (pchk1 == "no")
{
document.packages.page1.value = "3";
document.packages.page2.value = "4";
document.packages.page3.value = "1";
document.packages.page4.value = "8";
document.packages.page1.onfocus=blurit
document.packages.page2.onfocus=blurit
document.packages.page3.onfocus=blurit
document.packages.page4.onfocus=blurit
pchk1 = "yes";
}
else if (pchk1 == "yes")
{
document.packages.page1.value = "";
document.packages.page2.value = "";
document.packages.page3.value = "";
document.packages.page4.value = "";
document.packages.page1.onfocus=new Function()
document.packages.page2.onfocus=new Function()
document.packages.page3.onfocus=new Function()
document.packages.page4.onfocus=new Function()
pchk1 = "no";
}
}

function package2()
{
if (pchk2 == "no")
{
document.packages.page5.value = "2";
document.packages.page6.value = "6";
document.packages.page7.value = "4";
document.packages.page8.value = "7";
document.packages.page5.onfocus=blurit
document.packages.page6.onfocus=blurit
document.packages.page7.onfocus=blurit
document.packages.page8.onfocus=blurit
pchk2 = "yes";
}
else if (pchk2 == "yes")
{
document.packages.page5.value = "";
document.packages.page6.value = "";
document.packages.page7.value = "";
document.packages.page8.value = "";
document.packages.page5.onfocus=new Function()
document.packages.page6.onfocus=new Function()
document.packages.page7.onfocus=new Function()
document.packages.page8.onfocus=new Function()
pchk2 = "no";
}
}

function blurit(){
document.packages.reset.focus()
}

</SCRIPT>

</head>
<body>

<form name="packages">
Package 1 -------------- $3.00 <input name="pak1" type="checkbox" value="Select Package 1" onclick="package1()">
<dd>Page 1 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page1"><br>
<dd>Page 2 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page2"><br>
<dd>Page 3 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page3"><br>
<dd>Page 4 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page4"><br><br>

Package 2 -------------- $3.00 <input name="pak2" type="checkbox" value="Select Package 2" onclick="package2()">
<dd>Page 5 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page5"><br>
<dd>Page 6 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page6"><br>
<dd>Page 7 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page7"><br>
<dd>Page 8 ----------------- $0.99 <input type="text" size="3" maxlength="3" name="page8"><br>
<br><br><br>
<input name="reset" type="reset">
</form>

</body>
</html>

[\code]

-- Zak

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:36 am May 14, 2026