how to apply the same javascript/jquery to other input rows

Question

I am new to Javascript and jQuery. I was trying to apply the same code to every input row in the table.

The HTML for the input row in that table is:

<tr>
  <td>Seller1</td>
  <td><input type="text" placeholder="" class="form-control" name="text1"></td>
  <td><input type="text" placeholder="" class="form-control text2" id="text2">
  </td>
</tr>

The Javascript/JQuery code to enable/disable 2nd column(text2) of the row is:

/*text field enable*/

$('#text2').attr('disabled',true);
$('input[name="text1"]').keyup(function(){
    $('#text2').prop('disabled', this.value == "" ? true : false); 
});

Thanks

You want to enable every other row input when you write something on your first row input, is that correct? — Hackerman
– Hackerman, Commented Jan 23, 2017 at 16:19
Use a selector based on a class name rather then based on id or name. — Jeroen Heier
– Jeroen Heier, Commented Jan 23, 2017 at 16:20
You can use a more generic selector: $('input').keyup(function(){ ... }): If you don't like to apply method to all input elements you can use a class based selector instead of the input name — Gabriel Oliveira
– Gabriel Oliveira, Commented Jan 23, 2017 at 16:22

Sir McPotato · Accepted Answer · 2017-01-23 18:25:07Z

1

Here a snippet able to handle multiple rows. Relies on class name instead of 'name' or 'id' attr

$(function(){
    $('.text2').prop('disabled', true);
    $('table input.text1').keyup(function(e) {
        var show = $(this).val() == "" ? true : false;
        $(this).parent().parent().find('input.text2').prop('disabled', show);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Seller1</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
  <tr>
    <td>Seller2</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
  <tr>
    <td>Seller3</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
</table>

edited Jan 23, 2017 at 18:25

answered Jan 23, 2017 at 16:36

Sir McPotato

9897 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Snowmonkey Over a year ago

The problem with $(this).parent().parent() is that the structure becomes hardwired. Consider $(this).parents("tr") or possibly giving the TR a class that can be used as a selector. The class approach would allow changes to the page structure without breaking the code.

Hackerman Over a year ago

Seeing all those inputs with the same name` gives me the creeps!

Sir McPotato Over a year ago

@Hackerman Haha right, forgot to remove them from original code :P

Sir McPotato Over a year ago

@Snowmonkey Absolutely, but I wrote it in a hurry without thinkingabout parents, what a shame.

Workion · Accepted Answer · 2017-01-23 16:24:51Z

0

you could select inputs by class:

$('.form-control').attr('disabled',true);

this will disable all elements with form-control class

answered Jan 23, 2017 at 16:24

Workion

374 bronze badges

Comments

Snowmonkey · Accepted Answer · 2017-01-24 17:19:09Z

The problem you're encountering may be one of scope. inside the keyup function, you refer to this.value, which is saying "if the value of #text2 is null..." -- that may not be what you want. Instead, look at the following:

/*text field enable*/
$('.sellerLast').attr('disabled', true);

// 
$(".sellerFirst").each(function() {
  $(this).on("keyup", function() {
    console.log($(this).val());
    if ($(this).val() !== "") {
      $(this).parents("tr").find(".sellerLast").attr("disabled", false);
    } else {
      $(this).parents("tr").find(".sellerLast").attr("disabled", true);
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Seller1</td>
    <td>
      <input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-1">
    </td>
    <td>
      <input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-1">
    </td>
  </tr>
  <tr>
    <td>Seller2</td>
    <td>
      <input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-2">
    </td>
    <td>
      <input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-2">
    </td>
  </tr>
</table>

Well, I was an idiot. There were two thing going on -- first, the code within the template block may not have been doing what you expected, and second, you wanted to know how to extend that to ALL similarly structured elements on the page. This should do.

Edited with an "else" condition on the length of the first field -- the else sets the field back to disabled if the first field is blank.

the problem with this solution is that the second column input field does not go back to it's initial disabled state when the first input field is empty

Collectives™ on Stack Overflow

how to apply the same javascript/jquery to other input rows

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related