• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1480
  • Last Modified:

Multiple onChange events?

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
seanpowell
Asked:
seanpowell
  • 4
  • 4
1 Solution
 
ColosseoCommented:
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
 
seanpowellAuthor Commented:
Part 1 is nailed :-)

Sorry, I should have asked 2 separate questions here...
0
 
ColosseoCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
seanpowellAuthor Commented:
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
 
ColosseoCommented:
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
 
seanpowellAuthor Commented:
0
 
seanpowellAuthor Commented:
Darn - too late. Can you just post your comment at the new question?
0
 
ColosseoCommented:
i can indeed and have done :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now