Jquery- enable/disable form submit

Question

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

Disable dynamically based on what event? What condition? And why are you adding/removing classes, instead of setting/unsetting the disabled property? — David Thomas
– David Thomas, Commented Oct 30, 2014 at 9:53
@DavidThomas - is not important with that event disable. the problem is that I disable btn with disab_btn the submit remains active — Paolo Rossi
– Paolo Rossi, Commented Oct 30, 2014 at 10:14
That's your problem, certainly, but I was meaning to ask about the context of your problem (which is why I specifically asked "dynamically based on what event"). Using classes to indicate enabled/disabled states is fine, but I do think using the actual disabled property makes more sense; but that's your call and dictated by your use-case. — David Thomas
– David Thomas, Commented Oct 30, 2014 at 10:27

user2575725 · Accepted Answer · 2014-10-30 10:15:47Z

1

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

answered Oct 30, 2014 at 10:15

user2575725

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

Comments

Shaeldon · Accepted Answer · 2014-10-30 09:57:29Z

0

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

answered Oct 30, 2014 at 9:57

Shaeldon

8814 gold badges18 silver badges28 bronze badges

1 Comment

Paolo Rossi Over a year ago

although i call disab_btn, submit action remains

Super Hornet · Accepted Answer · 2014-10-30 10:16:59Z

0

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.

edited Oct 30, 2014 at 10:16

answered Oct 30, 2014 at 9:57

Super Hornet

2,9275 gold badges31 silver badges58 bronze badges

3 Comments

Paolo Rossi Over a year ago

although i call disab_btn, submit action remains

Paolo Rossi Over a year ago

unfortunately remains active even if I call disab_btn()

Super Hornet Over a year ago

the issue is when you submit your form the whole page is refreshed then every thing is reset. you have to post the form by ajax

Collectives™ on Stack Overflow

Jquery- enable/disable form submit

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related