hide/show multiple buttons with Select menu onChange

Question

I am not sure if anyone can help me with this but I currently have a < select menu > with onchange that shows 2 different forms when toggle. problem is I also have an update button outside of the form and is trying to change the button as well when the form changes.

below is my codes. can anyone help me figure this out.

JavaScript:

Hide/Show

function changelocation(val) {
    var id = val;
    //alert(id);
    if (id == '1') {
        $('#tr_1').css('display', 'table-row');
        $('#tr_2').css('display', 'none');
    }
    if (id == '2') {
        $('#tr_2').css('display', 'table-row');
        $('#tr_1').css('display', 'none');
    }
}

Display Save button out of Form

$(document).ready(function () { $("#location1_update").click(function () { $("#location1").submit(); }); });

$(document).ready(function () {
    $("#location2_update").click(function () {
        $("#location2").submit();
    });
});

buttons

<input class="submit-button" type="submit" name="location1_update" value="Update">
<input class="submit-button" type="submit" name="location2_update" value="Update">

< select menu > - using smarty note -- this works fine.

<select class="selmenu-wo" name="company_locations" onChange="changelocation(this.value)">
    <option value="1" selected="selected">{section name=r loop=$location1}{$location1[r].LOCATION}
&nbsp;&nbsp;{/section}</option>
    <option value="2">{section name=q loop=$location2}{$location2[q].LOCATION}&nbsp;&nbsp;{/section}
    </option>
</select> 

Forms.

<form action="" id="location1" name="location1" method="POST">
<table  cellpadding="0" id="tr_1"  cellspacing="0">
<tr> <td><b>Name</b></td>

<input name="test" type="text" value="Test data">

</td></tr>
</table>
</form>

<form action="" id="location2" name="location2" method="POST">
<table  cellpadding="0" id="tr_2" style="display:none" cellspacing="0">
<tr> <td><b>Name</b></td>

<input name="test2" type="text" value="Test data">

</td></tr>
</table>
</form>

the forms toggle fine but I would like it to show the button when toggle as well. if I assign the same id to the form and button only the button toggles.

Answer 1

use

$("#location1_update").hide()

and

$("#location1_update").show()

for hide and show the button. change this html whit id instead name

<input class="submit-button" type="submit" id="location1_update" value="Update">
<input class="submit-button" type="submit" id="location2_update" value="Update">

then the js could be

if (id == '1') {
    $('#tr_1').css('display', 'table-row');
    $('#tr_2').css('display', 'none');
    $("#location1_update").show();
    $("#location2_update").hide();

}
if (id == '2') {
    $('#tr_2').css('display', 'table-row');
    $('#tr_1').css('display', 'none');
    $("#location2_update").show();
    $("#location1_update").hide();
}

Answer 2

Add the same class to the buttons and form for example:

<input class="submit-button location1" type="submit" name="location1_update" value="Update">
<input class="submit-button location2" type="submit" name="location2_update" value="Update">

<form action="" id="location1" class="location1" name="location1" method="POST">
<form action="" id="location2" class="location2" name="location2" method="POST">

Then show/hide both of them like this:

function changelocation(val) {
    var id = val;
    if (id == '1') {
        $('.location1').show();
        $('.location2').hide();
    }
    if (id == '2') {
        $('.location2').show();
        $('.location1').hide();
    }
}