Adding JS to change viewable fields
Posted: 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:
...radio button code is here:
...and select menu code is here:
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!
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;
}
}
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>
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>