Adding JS to change viewable fields

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Adding JS to change viewable fields

Post by benzoD » 2013-02-07 19:20

I am trying to use some javascript to hide a div based on whether a radio button is clicked but I am having a tough time figuring out exactly where to put the snippet. I have this working on an earlier pre-AG version of my app and it's very simple. Here is the older way:

There are two radio buttons, Maintenance and IT, and a drop down menu under those. When either of those buttons is chosen, the drop down selections change to appropriate choices, i.e Maintenance gives the option of AC Issues, Plumbing, Roof Leak and IT gives the option of Email, Internet, Printer. The Maintenance div is shown by default (there are far more maintenance requests) and the IT div is hidden, positioned "on top" of the Maintenance div. The radio button toggles which div is hidden (plus I have a small bit of code, SelectedIndex, that resets both menus to blank if they choose another type of work).

header <script> is here:

Code: Select all

function toggleSelect(id)
{
    if (id == 'off')
    {
          document.getElementById('maintworktype').style['display'] = 'none';
		  document.getElementById('itworktype').style['display'] = 'block';  
		  document.getElementById('maintWork').selectedIndex = 0;
    }

    if (id == 'on')
    {
          document.getElementById('itworktype').style['display'] = 'none';
		  document.getElementById('maintworktype').style['display'] = 'block';		  
		  document.getElementById('itWork').selectedIndex = 0;
    }

}
...radio button code is here:

Code: Select all

<div id="radio-type"><br>
    <input type="radio" name="serviceType" value="Maintenance request" checked onclick="toggleSelect('on');">Maintenance <br />
    <input type="radio" name="serviceType" value="IT request" onclick="toggleSelect('off');">IT <br />
</div>
...and select menu code is here:

Code: Select all

<div id="maintworktype"><strong> Work Type </strong>
  <select name="maintWork">
    <option value="" style="display:none;"></option>
    <option value="AC">AC</option>
    <option value="Plumbing">Plumbing</option>
    <option value="RoofLeak">Roof Leak</option>
</div>
 <div id="itworktype"><strong> Work Type </strong>
  <select name="itWork">
    <option value="" style="display:none;"></option>
    <option value="Email">Email</option>
    <option value="Internet">Internet</option>
    <option value="Printer">Printer</option>
</div>
Now I'm trying to add this to the table view of my AG app but I can't find the correct page that it should be on. I've looked at templates/*_templateTV.html and *_templateTVS.html, index.php, home.php, etc but haven't found what I think is the correct page. I hate tables but it should be no problem to make the script work on them. Where would I put this code to make this work? Thanks in advance!

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: Adding JS to change viewable fields

Post by benzoD » 2013-02-27 17:26

So I never figured out where you would put the bits of code I had working on an earlier incarnation. I found the cascading drop-downs that give similar functionality but are not nearly as elegant. I will keep looking at this to try to understand the structure of the generated site better and post back here when I find anything.

Post Reply