CODEWITHSUNDEEP
javascriptjqueryhtml
ghabriel
ghabriel

Reputation: 123

How to enable specific input with button click

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.

Upvotes: 2

Views: 926

Answers (5)

Abdul Hashik
Abdul Hashik

Reputation: 99

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');
});

Upvotes: 2

jasinth premkumar
jasinth premkumar

Reputation: 1413

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>

Upvotes: 1

Alekhya
Alekhya

Reputation: 147

Try by finding the siblings and change attribute value.

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

Same way you can remove class also.

Upvotes: 0

Suresh Suthar
Suresh Suthar

Reputation: 812

$('.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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

Related Questions