CODEWITHSUNDEEP
jquery
Paolo Rossi
Paolo Rossi

Reputation: 2510

Jquery- enable/disable form submit

I use the sub class to perform on click the submit of the parent form. I would try to enable / disable the button dinamically. I tried in this way, but even if I remove dinamically the sub class action submit remains active

HTML

<form action="foo.php" method="post">
   <div id="btn_src" class="bttn sub">CLICK ME</div>
</form>

CSS

.bttn {
   width: 100px;
   border: 1px solid #ccc;
   text-align: center;
}

.sub {
   background: red;
}

.disabled {
   background: grey;
}

JS

$('.bttn.sub').on('click', function() {
  var form = $(this).closest('form');
  $(form).submit();
});

var disab_btn = function() {
  $('#btn_src').removeClass('sub').addClass('disabled');
  alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
  $('#btn_src').removeClass('disabled').addClass('sub');
  alert($('#btn_src').attr('class'));
}

disab_btn();

Then I tried removing the sub class from html, but in this case the submit action is always disabled.

<form action="foo.php" method="post">
    <div id="btn_src" class="bttn">CLICK ME</div>
</form>

JSFIDDLE

how can I do it? Thanks

Upvotes: 0

Views: 85

Answers (3)

Super Hornet
Super Hornet

Reputation: 2907

The main issue is when you submit your form your whole page is refreshed then everything starts from the beginning. So you have to try Ajax to post your data to avoid refreshing whole page.

Upvotes: 0

user2575725
user2575725

Reputation: 

$('.bttn.sub').on('click', function() {
  var btn = $(this),
    form = btn.closest('form');
  if (!btn.hasClass('disabled')) {//<-- added this line
    form.submit();
  }
});

var disab_btn = function() {
  $('#btn_src').removeClass('sub').addClass('disabled');
  alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
  $('#btn_src').removeClass('disabled').addClass('sub');
  alert($('#btn_src').attr('class'));
}

disab_btn();
.bttn {
  width: 100px;
  border: 1px solid #ccc;
  text-align: center;
}
.sub {
  background: red;
}
.disabled {
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="foo.php" method="post">
  <div id="btn_src" class="bttn sub">CLICK ME</div>
</form>

Upvotes: 1

Shaeldon
Shaeldon

Reputation: 883

Fiddle Demo

Wrap the code inside document ready if not already done. 2nd You cant use classes as selector like you tried. Select the form, then give action, classes to look for, and a function.

$( document ).ready(function() {
$('form').on('click','.bttn.sub',function() {
    alert("Clicked");
    var form = $(this).closest('form');
    $(form).submit();
});

var disab_btn = function() {
    $('#btn_src').removeClass('sub').addClass('disabled');
    //alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
    $('#btn_src').removeClass('disabled').addClass('sub');
    //alert($('#btn_src').attr('class'));
}

enab_btn();
});

As an alternativ you can simply select your button by id like this:

 $('#btn_src').on('click', function() {
    alert("Clicked");
    var form = $(this).closest('form');
    $(form).submit();
});

Fiddle here

Upvotes: 0

Related Questions