Solved

Multiple onChange events?

Posted on 2004-10-02
8
1,461 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now