Issues with attaching on click function through Jquery

Question

I have some disabled check boxes when the screen loads and change of one of the textbox the check box get automatically checked and i want the checkbox value to be submitted to my backing bean during form submit so i attached an onclick function to the submit button through Jquery to enable the checbox at submit time but still the values are not submitted but if i directly add a javascript function to the onclick of submit button the values get submmited.

My code looks like this

 <input type="checkbox" id="chck_box1" class="enableCheckbox"/>
 <input type="submit" id="submitButton" onclick="enableCheckBox()"/>

 there are two ways i implemented
 **1.**    --- this enables the checkbox and values submitted
 function enableCheckbox(){    
   $('.enableCheckbox').each(function() {
      $(this).removeAttr('disabled');

   });
 }
 **2.** -- this enables the checkbox but the values not submitted
 $("#submitButton").on("click", function(){
     $('.enableCheckbox').each(function() {
         $(this).removeAttr('disabled');

   });
  });

Can some one help me to understand the difference between the submit button onclick and jquery's on(submit)

thanks

I did try the prop but that didn't help either.. the problem is that the removeAttr or prop works when called from the javascript function at submit time instead of dynamic binding... this enableCheckBox function had the code from my above post.. — JSF, Jan 10 '14 at 16:49

score 1 · Accepted Answer · answered Jan 10 '14 at 18:00

I think

<input type="submit" id="submitButton" onclick="enableCheckBox()"/>

fires form submit event first, but

 $("#submitButton").on("click", function(){

fires button click before submitting the form, that is the difference. I think the right way is subscribe to

$("Your_form_id).on("submit" , function() {

and add the

return false;

at the end of function for prevent submit the form if necessary (for example: send all form variables by ajax or so).

i previously tried $("Your_form_id).submit() that didnt work but this on() worked. thanks — JSF, Jan 10 '14 at 19:21

score 0 · Answer 2 · answered Jan 10 '14 at 16:48

I think you have a typo in '.enableChecbox', it could be '.enableChec*k*box'

in my example everything works fine HTML:

<input type="checkbox" class="enableCheckbox" disabled="true">
<input type="button" id="enablechk" value="Enable">

Script:

$("#enablechk").click(function() { 
     $('.enableCheckbox').each(function() {
     $(this).removeAttr('disabled');
 });
});

jsfiddle:

http://jsfiddle.net/zx10tomcat/LZBfD/

the difference between the submit button onclick and jquery's on(submit) In first case it just a ckick event, in second - form submit - different objects. Also you can write return false; at the end of on(submit) function and form will not be submitted(and send any data). Hope it helps.

thank you . Even i got it enabled but the values aren't getting submitted to my backingbean during the submit but it gets enabled and submitted when called from the HTML onclick function — JSF, Jan 10 '14 at 17:01

Issues with attaching on click function through Jquery

2 Answers2