Solved

Multiple onChange events?

Posted on 2004-10-02
8
1,466 Views
Last Modified: 2008-02-01
I currently have the following in a select box that totals a form, and displays another fieldset:

<label for="Member"><span>Member</span></label>
<select size="1" name="Member" onChange="TotalForm(); document.getElementById('attendee').style.display=this.options[selectedIndex].text=='1'?'inline':'none';">
      <option value="">Select a Qty</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
</select><br />

<div id="attendee" style="display:none;">
<fieldset>
<legend>Attendee Information</legend>
<label for="Name"><span>Name</span></label><input name="Name" type="text"><br />
<label for="Title"><span>Title</span></label><input name="Title" type="text"><br />
</fieldset>
</div>

So, if a user selects "1" in the select box, the form totals, and the attendee div is displayed.

Here are the problems:

1. If a user selects "1" and then changes the selection back to "Select a Qty", I get an error...
2. If a user selects another value (2, 3, 4, or 5) I need the corresponding amount of attendee fieldset's to display. This (I think) is the tricky part... So depending on the value, we display id="attendee1", id="attendee2", etc

Does that make sense?
Here it is online: http://www.pdgmedia.com/code/form.html

Thanks,
Sean
0
Comment
Question by:seanpowell
  • 4
  • 4
8 Comments
 
LVL 15

Expert Comment

by:Colosseo
ID: 12207842
Hi again sean

for part 1 try changing the Select a Qty options value to 0. so..

     <option value="">Select a Qty</option>

to

     <option value="0">Select a Qty</option>

if that works you will be able to remove these lines from your function

        if (form.Member.value == "") {form.Member.value = 0}
        if (form.NonMember.value == "") {form.NonMember.value = 0}

looking at part 2 now :)

Cheers

Scott
0
 
LVL 31

Author Comment

by:seanpowell
ID: 12207994
Part 1 is nailed :-)

Sorry, I should have asked 2 separate questions here...
0
 
LVL 15

Accepted Solution

by:
Colosseo earned 500 total points
ID: 12208050
Hi Sean

ok this probably isnt totally right but i think its a step in the right direction. :)

I have added this function

// Display the correct number of attendee divs based on the select value
function displayAttendee(obj_Member)
{
      // while i is less than the number of select options (this will run from 1 to 5 in this case)
      for (i=1;i < obj_Member.length;i++)
      {
            // If i is less than or equal to the select value then display the div otherwise dont
            document.getElementById('attendee' + i).style.display=i<=obj_Member.value?'inline':'none';
      }
}

and the onChange for the Member select is now onChange="TotalForm(); displayAttendee(this)"

I also copied the attendee div so there is now attendee1 to attendee5 (the text fields in each div will have to be renamed aswell but I thought I would leave that for now)

I am not sure if you want to have divs based on the non member select and if so whether you want different ones from the member select so I thought if we get member working we can go from there.

here is the full code so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<link rel="stylesheet" type="text/css" href="formstyle.css">
<script type="text/javascript">
<!--

function TotalForm()
{
        form=document.Form1
        var taxvalue=1.07
       
        if (form.Member.value == "") {form.Member.value = 0}
        if (form.NonMember.value == "") {form.NonMember.value = 0}        
        CostMember=form.Member.value * 150
        CostNonMember=form.NonMember.value * 350        
        Costt=CostMember + CostNonMember
        Cost=taxvalue*Costt
        Dollar = Math.floor(Cost)
        Cost = "" + Math.round(Cost * 100)
        Decimal = Cost.substring (Cost.length-2, Cost.length)
        form.Total.value= ("$" + Dollar + "." + Decimal);
       
        return (true);
}

// Display the correct number of attendee divs based on the select value
function displayAttendee(obj_Member)
{
      // while i is less than the number of select options (this will run from 1 to 5 in this case)
      for (i=1;i < obj_Member.length;i++)
      {
            // If i is less than or equal to the select value then display the div otherwise dont
            document.getElementById('attendee' + i).style.display=i<=obj_Member.value?'inline':'none';
      }
}

//-->
</script>
</head>
<body>

<form method="post" onSubmit="return Form1_Validator(this)" name="Form1">
      
<fieldset>
            
      <legend>Quantities</legend>
                  
      <label for="Member"><span>Member</span></label>
      <select size="1" name="Member" onChange="TotalForm(); displayAttendee(this)">
            <option value="0">Select a Qty&nbsp;</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
      </select><br />
                  
      <label for="NonMember"><span>Non Member</span></label>
      <select size="1" name="NonMember" onChange="TotalForm(); document.getElementById('attendee').style.display=this.options[selectedIndex].text=='1'?'inline':'none';">
            <option value="0">Select a Qty&nbsp;</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
      </select><br />

      <label for="Total"><span>Total</span></label>
      <input type="text" name="Total" style="width:80px;"><br />

</fieldset>

<div id="attendee1" style="display:none;">            
<fieldset>

      <legend>Attendee 1 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee2" style="display:none;">            
<fieldset>

      <legend>Attendee 2 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee3" style="display:none;">            
<fieldset>

      <legend>Attendee 3 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee4" style="display:none;">            
<fieldset>

      <legend>Attendee 4 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee5" style="display:none;">            
<fieldset>

      <legend>Attendee 5 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>
            
<button class="submit" onclick="submit()">Submit</button>
            
</form>

</body>
</html>

Cheers

Scott
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 31

Author Comment

by:seanpowell
ID: 12208073
Damn, you're good. Wish I had someone like you on staff :-)

That is perfect. The Attendee info is not based on the type of individual, and one would not ever submit the form using both options, so the logic is:

1. User selects a value from "either but not both" of the selects, and the corresponding number of div's display.

I suppose the easiest way would be to disable one select box if the value in the other one is anything other than "Select a Qty" ? Do you agree?

So now I just need to get the second select box working, yes?

0
 
LVL 15

Expert Comment

by:Colosseo
ID: 12208134
Well thats my first almost job offer on here lol... whats the benfits package like? :)

Ah I get you now... As for only selecting a value in one select you could do it like you say but that would mean if the user set members to 1 then nonmembers would be disabled so in order to change their mind to nonmembers the user would have to set members to select a qty and then select the option in non members(i think lol)

I would change the code so that if the user selects an option in one select then the other one is reset to select a qty. This way there can only ever be a value in one but they are both always available... like this :)

made another change to the onChange events for both selects now...

the displayAttendee now sets the value of the other select to 0 when an option is selected and once it has displayed the correct amount of divs it then calls the TotalForm function from itself

here is the full code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<link rel="stylesheet" type="text/css" href="formstyle.css">
<script type="text/javascript">
<!--

function TotalForm()
{
        form=document.Form1
        var taxvalue=1.07
       
        if (form.Member.value == "") {form.Member.value = 0}
        if (form.NonMember.value == "") {form.NonMember.value = 0}        
        CostMember=form.Member.value * 150
        CostNonMember=form.NonMember.value * 350        
        Costt=CostMember + CostNonMember
        Cost=taxvalue*Costt
        Dollar = Math.floor(Cost)
        Cost = "" + Math.round(Cost * 100)
        Decimal = Cost.substring (Cost.length-2, Cost.length)
        form.Total.value= ("$" + Dollar + "." + Decimal);
       
        return (true);
}

// Display the correct number of attendee divs based on the select value
function displayAttendee(obj_Member,str_Sel)
{
      // Set the value of the other select to 0      
      document.getElementById(str_Sel).value=0;

      // while i is less than the number of select options (this will run from 1 to 5 in this case)
      for (i=1;i < obj_Member.length;i++)
      {
            // If i is less than or equal to the select value then display the div otherwise dont
            document.getElementById('attendee' + i).style.display=i<=obj_Member.value?'inline':'none';
      }
      
      // Calculate the total for the form
      TotalForm();
}

//-->
</script>
</head>
<body>

<form method="post" onSubmit="return Form1_Validator(this)" name="Form1">
      
<fieldset>
            
      <legend>Quantities</legend>
                  
      <label for="Member"><span>Member</span></label>
      <select size="1" name="Member" onChange="displayAttendee(this,'NonMember');">
            <option value="0">Select a Qty&nbsp;</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
      </select><br />
                  
      <label for="NonMember"><span>Non Member</span></label>
      <select size="1" name="NonMember" onChange="displayAttendee(this,'Member');">
            <option value="0">Select a Qty&nbsp;</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
      </select><br />

      <label for="Total"><span>Total</span></label>
      <input type="text" name="Total" style="width:80px;"><br />

</fieldset>

<div id="attendee1" style="display:none;">            
<fieldset>

      <legend>Attendee 1 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee2" style="display:none;">            
<fieldset>

      <legend>Attendee 2 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee3" style="display:none;">            
<fieldset>

      <legend>Attendee 3 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee4" style="display:none;">            
<fieldset>

      <legend>Attendee 4 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>

<div id="attendee5" style="display:none;">            
<fieldset>

      <legend>Attendee 5 Information</legend>

      <label for="Name"><span>Name</span></label>
      <input name="Name" type="text"><br />
                  
      <label for="Title"><span>Title</span></label>
      <input name="Title" type="text"><br />
                  
      <label for="Phone"><span>Phone</span></label>
      <input name="Phone" type="text"><br />
                  
      <label for="Fax"><span>Fax</span></label>
      <input name="Fax" type="text"><br />
                  
      <label for="Email"><span>Email</span></label>
      <input name="Email" type="text"><br />
                  
</fieldset>
</div>
            
<button class="submit" onclick="submit()">Submit</button>
            
</form>

</body>
</html>

Let me know if that works for you

Cheers

Scott
0
 
LVL 31

Author Comment

by:seanpowell
ID: 12208141
0
 
LVL 31

Author Comment

by:seanpowell
ID: 12208145
Darn - too late. Can you just post your comment at the new question?
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 12208157
i can indeed and have done :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question