Show/hide input text after click with multiple selectbox

Question

I have selectbox like this

rows 1

<form action="" method="POST">
  <select id="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input id="txtname" type="text" name="txtname" style="display:none;">
</form>

rows 2

<form action="" method="POST">
  <select id="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input id="txtname" type="text" name="txtname" style="display:none;">
</form>

and javascript

$(document).ready(function(){
    $("#showhide").change(function(){
        var valx = $('#showhide').val();
        if(valx == '1'){
            $("#txtname").show();
        }else if(valx == '2'){
            $("#txtname").hide();
        }
    });
});

when i use selectbox in rows 1 show/hide the inputbox in rows 1 working, but when i use selectbox in rows 2 the show/hide not working like rows 1.

how to solved this.

thankyou

@Ramanlfc. after i change to class with the same class name, this not work to. i can't use uniqname because this rows is dynamic. — riski maker
– riski maker, Commented Mar 5, 2016 at 11:55

Gene R · Accepted Answer · 2016-03-05 11:56:07Z

Replace id attribute with name in select, and remove id attribute from input, because id attribute must be unique over all document.

<form action="" method="POST">
  <select name="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
  <select name="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input type="text" name="txtname" style="display:none;">
</form>

JS:

$(document).ready(function(){
    $("select[name='showhide']").change(function(){
        $(this).siblings('input[name="txtname"]').toggle(this.value == 1);
    });
});

Example: https://jsbin.com/pavijufige/edit?html,js,output

RIYAJ KHAN · Accepted Answer · 2016-03-05 12:35:57Z

0

Do this changes.

In the current scenario,use $(this) to get current context selection

$(document).ready(function() {
        $("select.showhide").change(function() {

        var valx = $(this).val();
        if (valx == '1') {
            $(this).next().show();
        } else if (valx == '2') {
            $(this).next().hide();
        }
    });
});

Add class class="showhide" to your select drop-down. Id Should be unique.So, you can not use same id twice.

HTML :

<form action="" method="POST">
        <select class="showhide">
            <option value="0">-SELECT-</option>
            <option value="1">Show</option>
            <option value="2">Hide</option>
        </select>
        <input id="txtname" type="text" name="txtname" style="display:none;">
    </form>
    <form action="" method="POST">
        <select class="showhide">
            <option value="0">-SELECT-</option>
            <option value="1">Show</option>
            <option value="2">Hide</option>
        </select>
        <input id="txtname" type="text" name="txtname" style="display:none;">
    </form>

edited Mar 5, 2016 at 12:35

answered Mar 5, 2016 at 11:52

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

1 Comment

riski maker Over a year ago

not work, when i change selectbox in rows 1 and 2 the inputbox in rows 1 working and show and hide but not to input box in rows 2

Collectives™ on Stack Overflow

Show/hide input text after click with multiple selectbox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related