How do I implement these functions?

[spock9458]

I am pretty new to Javascript, but I think it is what I need to build the functions I want into my form.  I am working with a registration system that was written by someone else, that works for my needs but I want to add logic to it.  The system creates an HTML page with all of the form elements I need, in a table format.  Basically there are three options for my registrants to select from, in the form of radio buttons.  The name of the radio button set is "rad_attend", and the available values are "1", "2" or "3".

 

What I want to do is have the optional table rows associated with each "attend" value to be hidden initially, and only appear when the radio button is selected.  In the code there is another function tied to the "onchange" condition of the radio button - it adds the registration price to a running total calculated by the existing script.  So, I need a way to have the "onchange" condition fire the additional function of showing the related table rows that I want available when that radio button is selected.

 

I think it is possible to fire two separate functions with the "onchange" condition of the radio button, but I'm getting confused as to how to handle the three options I want to "reveal" depending on the choice of the attendance buttons.  To illustrate, let's call my attendance options: "Member", "Exhibitor", and "Guest".  When the page loads initially, no option is selected.  When the registrant chooses "Member", I want certain table rows to be displayed - if possible using the "onchange" condition.

 

Likewise, I want different table rows to be displayed when "Exhibitor" or "Guest" radios are selected.  And, if someone selects "Member" and then changes to "Exhibitor", I need the Member optional rows to disappear ("display:none") and the Exhibitor optional rows to appear ("display:block").

 

So it seems like some kind of "toggle" function would work, according to the different Element IDs that I can assign to the various associated table rows, but I have not been successful in finding something that works with the three different options.

 

If anyone has any suggestions, I would really appreciate the help.

 

Thanks

[Psycho]

Adding additional logic to existing triggers is a pretty simple process. You could add the logic in the current function that is called or create an additional function. However, you have provided no code as to what is currently occurring. So, it's kind of hard to provide any suggestions. We'd need to see how the onchange trigger is implemented (in line, onload, etc.) and what is currently getting passed. For example, if the function that is called has the "value" of the clicked option, then you could simply call another function from within that one to do the additional work

 

//Existing function
function registrationPrice(registrationType) {
 
    //Call new function to show appropriate fields
    showField(registrationType);
 
    //... rest of code for registration price
}
 
//new function
function showFields(registrationType) {
 
    switch(registrationType) {
        case 1:
            //Show hide relevant fields
            break;
        case 2:
            //Show hide relevant fields
            break;
        case 3:
            //Show hide relevant fields
            break;
        default:
            //Fail-safe condition. Hide all fields
            break;
    }
}

 

 

In the code there is another function tied to the "onchange" condition of the radio button - it adds the registration price to a running total calculated by the existing script.

 

However, you may have a bigger issue based on the above. Any price calculation on the client side should be strictly cosmetic and not used to send to the server. Any important calculations should always be calculated on the server based on the parameters that are received by the user. It is a trivial task for a user to change any values submitted by a form whether they are select lists, hidden fields, etc. So, it is fine to have client-side logic to provide the user additional information and usability, but never rely upon JavaScript to enforce business logic. E.g. If option B is disabled when option A is selected. A user could very easily pass a form with both options selected. Even though it is a good idea to disable options based on other input from a usability stand point, the server-side logic should check for ALL error conditions and reject invalid data (with appropriate messaging to the user).

In the code there is another function tied to the "onchange" condition of the radio button - it adds the registration price to a running total calculated by the existing script.

 

[spock9458]

OK, here are some more details:  The existing function used for the "onchange" assigned to the radio buttons is: onchange = 'UpdateTotal(True);'

 

Here is the script code I am trying so far:

<script>
function checkRadios(rad_attend) {
   switch(rad_attend) {
	case 1:   
    document.getElementById("hideshow1").style.display = 'block';
	break;
	case 2:
	document.getElementById("hideshow2").style.display = 'block';
	break;
	case 3:
	document.getElementById("hideshow3").style.display = 'block';
	default:
	document.getElementById("hideshow1, hideshow2, hideshow3").style.display = 'none';
	}
}

</script>

And the code (partial) in the body of the HTML is here:

  <legend> Attendance Options </legend>
<table border='0' cellspacing='0' cellpadding='4'>
  <tbody>
    <tr>
      <th align='left'>Option</th>
      <th align='left'>Price    </th>
      <th align='right'>Select</th>
    </tr>
    <tr>
      <td>Member Registration</td>
      <td align='left'>$<span id='aprice1'>450</span></td>
      <td align='right'><input type='radio' name='rad_attend' value='1'
        onchange='UpdateTotal(true); checkRadios(rad_attend);' /></td>
    </tr>
	
    <tr id="hideshow1" style="display:none;">
      <td>Member - Golf Tournament</td>
      <td align='left'>$<span id='mprice6'>150</span></td>
      <td align='right'><input type='checkbox' value='' 
        name='chk_mqty6' 
        onchange='UpdateTotal(true);' /></td>
    </tr>
    <tr id="hideshow1" style="display:none;">
      <td>Member - Wine and Watercolor</td>
      <td align='left'>$<span id='mprice8'>45</span></td>
      <td align='right'><input type='checkbox' value='' 
        name='chk_mqty8' 
        onchange='UpdateTotal(true);' /></td>
    </tr>
	
	<tr>
      <td>Exhibitor Registration</td>
      <td align='left'>$<span id='aprice2'>1000</span></td>
      <td align='right'><input type='radio' name='rad_attend' value='2'
        onchange='UpdateTotal(true);' /></td>
    </tr>
    <tr>
      <td>Guest Only</td>
      <td align='left'>$<span id='aprice3'>0</span></td>
      <td align='right'><input type='radio' name='rad_attend' value='3'
        onchange='UpdateTotal(true);' /></td>
    </tr>

On loading the page, the behavior is fine: None of the radio buttons are selected, and the rows with the id="hideshow1" are hidden.  However, when I click on the Member radio button (value=1) nothing happens to the table rows that are supposed to be revealed.  Please note that my code is not complete - I plan on adding additional "hidden" rows with id="hideshow2" and "hideshow3" for the other registration options, I just want to get the "reveal" function working first.  I feel like I'm missing something pretty basic, so please advise where I'm going wrong.  Thanks again.

Edited January 3, 2017 by spock9458