How to enable specific input with button click

Question

I have list of 10 input with disabled property like this

<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

When I click Edit button, I want to remove disabled property and alert class for input which is same row with that button. I have tried like this

$('form.rule-form').find('button.rule-btn').each(function(){
    $(this).click(function(){

        $(this).text('Submit');

        $('form.rule-form').find('input[name="rule"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-info');
        });

        $('form.rule-form').find('input[name="point"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-success');
        });

        $(this).click(function(){
            $('form.rule-form').submit();
        })
    });
});

but it seems all of input list are enabled after I click Edit button.

Rory McCrossan · Accepted Answer · 2018-02-15 13:00:06Z

2

The issue is because you need to use DOM traversal to find the input elements relevant to the row of the clicked button. To do that you can use a combination of closest() and find().

Also note that a simpler way to submit the form on the second click of the button would be to change the type to submit in the HTML, then use preventDefault() on the first click to stop the submission. Try this:

$('form.rule-form button.rule-btn').click(function(e) {
  var $btn = $(this);
  if ($btn.text() !== 'Submit') {
    e.preventDefault();
    $btn.text('Submit');
    $btn.closest('.form-row').find('input')
      .prop('disabled', false)
      .removeClass('alert-info alert-success');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="10" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="1" data-poin="10">Edit</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="20" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="2" data-poin="20">Edit</button>
    </div>
  </div>
</form>

answered Feb 15, 2018 at 13:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

4 Comments

ghabriel Over a year ago

Thankyou, it works. What is the different between parent() and closest(), it seem closest is very common to use rather than parent()

Rory McCrossan Over a year ago

The difference is that parent() looks for the single parent element, whereas closest() looks all the way up the DOM tree to find the selector your provide. You can read more in the documentation: api.jquery.com/parent & api.jquery.com/closest

ghabriel Over a year ago

how to get it back disabled if I click outside input or somewhere else? Should I make another button to cancel it?

Rory McCrossan Over a year ago

That would be the easiest way. Alternatively you can detect a click outside the button or the inputs and cancel then: stackoverflow.com/questions/152975/…

Bucket · Accepted Answer · 2018-02-15 15:06:34Z

2

It looks like you can't find your element under $(this), so navigating up the DOM hierarchy will help:

$('button').click(function(){
    $(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
    $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
});

edited Feb 15, 2018 at 15:06

Bucket

7,5599 gold badges38 silver badges48 bronze badges

answered Feb 15, 2018 at 13:09

Abdul Hashik

995 bronze badges

Comments

jasinth premkumar · Accepted Answer · 2018-02-15 13:34:25Z

this find input and enable on clikcing edit button if once edit is clicked button text will be changed into submit on next click it check whether button text is submit or not if it is submit it will submit the form.

$(function() {$('.rule-btn').click(function(){
if(alreadyClicked)
  {
    
  $(this).attr('type','submit');
   return;
  }
$(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
   $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
   $(this).attr('id','submit');
   $(this).text("submit");
   alreadyClicked = true;
   console.log($(this).attr('class'));
});
var alreadyClicked = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

Suresh Suthar · Accepted Answer · 2018-02-15 13:01:22Z

0

$('.rule-btn').click(function(){
   $('input[name="rule"]', $(this).closest('.form-row')).each(function(){
     $(this).prop('disabled', false).toggleClass('alert-info');
 })
 $('input[name="point"]', $(this).closest('.form-row')).each(function(){
   $(this).prop('disabled', false).toggleClass('alert-success');
  })
})

You can do simply like pass parent and find element and you can do whatever with element

answered Feb 15, 2018 at 13:01

Suresh Suthar

81210 silver badges17 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2018-02-15 13:17:18Z

0

Try by finding the siblings and change attribute value.

$(this).parent().siblings().find(".form-group").removeAttr("disabled");

Same way you can remove class also.

edited Feb 15, 2018 at 13:17

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Feb 15, 2018 at 13:00

Alekhya

1471 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to enable specific input with button click

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related