CODEWITHSUNDEEP
javascriptjqueryhtml
dpr
dpr

Reputation: 35

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

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

Upvotes: 0

Views: 44

Answers (3)

Snowmonkey
Snowmonkey

Reputation: 3761

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.

Upvotes: 0

Sir McPotato
Sir McPotato

Reputation: 959

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>

Upvotes: 1

Workion
Workion

Reputation: 37

you could select inputs by class:

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

this will disable all elements with form-control class

Upvotes: 0

Related Questions