jquery enable submit button when select an option

Question

i need to enable submit button when user select an option and this is a dynamic data. my HTML:

<form method="post" action="xxx" id="member">
    <tr>
        <td>1</td>
        <select name="status">
            <option value="a">aktif</option>
            <option value="l">terkunci</option>
            <option value="b" selected="b">blokir</option>
        </select>
        </td>
        <input type="hidden" name="update_buyer" value="TRUE" />
        <input type="hidden" name="id" value="1" />
        <td>
            <button role="button" data-toggle="modal" data-target="#modal" class="btn btn-danger delete">Delete</button>&nbsp;
            <input type="submit" class="btn btn-primary save" disabled="disabled" value="Save">
        </td>
    </tr>
    </form>
        <form method="post" action="xxx" id="member">
    <tr>
        <td>2</td> 
        <td>
        <select name="status">
            <option value="a" selected="a">aktif</option>
            <option value="l">terkunci</option>
            <option value="b">blokir</option>
        </select>
        </td>
        <input type="hidden" name="update_buyer" value="TRUE" />
        <input type="hidden" name="id" value="2" />
        <td>
            <button role="button" data-toggle="modal" data-target="#modal" class="btn btn-danger delete" data-email="[email protected]">Delete</button>&nbsp;
            <input type="submit" class="btn btn-primary save" disabled="disabled" value="Save">
        </td>
    </tr>
    </form>

i try

$('select').change(function(){
$('.save').removeAttr('disabled');
}

but it enable all submit button, i just want to enable which user click, not all submit button.

maybe like

$('select').change(function(){
$(this).parent('form').find('.save').removeAttr('disabled');
}

but it doesn't work :( how do i do this? help...

Jai · Accepted Answer · 2013-02-28 10:12:03Z

2

use .prop():

$('select').change(function(){
  $(this).parent().siblings().find('.save').prop('disabled', false);
});

Note:

You have same id for both forms this can cause issue and its invalid to use this way. ID should be unique to elems on a single page.

edited Feb 28, 2013 at 10:12

answered Feb 28, 2013 at 10:06

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

1 Comment

Bari Over a year ago

EDIT: i use foreach for form ID's and it produce unique form like "member1,member2,...memberX" anyway thanks :)

Munawer Aziz · Accepted Answer · 2015-05-26 10:19:03Z

1

try this one -

$(document).ready(function(){
  $('select').change(function(){
       $('.save').removeAttr('disabled');        
  });
});

edited May 26, 2015 at 10:19

answered Feb 28, 2013 at 10:11

Munawer Aziz

1961 silver badge7 bronze badges

Comments

Roger · Accepted Answer · 2013-02-28 10:07:02Z

0

Try this

$('select').change(function(){
 $('.save').prop("disabled", false);
}

Hope this helps

answered Feb 28, 2013 at 10:07

Roger

1,7011 gold badge18 silver badges34 bronze badges

Comments

bipen · Accepted Answer · 2013-02-28 10:08:44Z

0

your second code is working , however you have invalid HTML tags.. chck it out..

here is the working fiddle using your code.

$('select').change(function(){
  $(this).parent('form').find('.save').removeAttr('disabled');
});
-^----here

note: i could see you are missing bracket at the end of change function...(not sure if it is a typo)

answered Feb 28, 2013 at 10:08

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Kurt · Accepted Answer · 2013-02-28 10:09:05Z

0

JSFiddle here

$('select').change(function(){
   $(this).parent().children('.save').prop('disabled', false);
});

answered Feb 28, 2013 at 10:09

Kurt

7,2222 gold badges22 silver badges16 bronze badges

Comments

james emanon · Accepted Answer · 2013-02-28 10:11:51Z

0

Give each of your forms different ID names.. they are both id="member", they need to be unique. Not sure that is your error.

This worked for me even with same ID's.

$('#member select[name=status]').change(function(){
    $('#member input[type="submit"]').removeAttr('disabled');
 })

answered Feb 28, 2013 at 10:11

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Comments

cernunnos · Accepted Answer · 2013-02-28 10:13:24Z

0

.parent method only goes up the DOM tree once, so that code will only work if the form element is the imediate parent of the select element, in this case it isnt. Use .parents() instead.

$('select').change(function(){
  $(this).parents('form').find('.save').removeAttr('disabled');
}

Also, note that your first select is not inside a <td>

EDIT: Other suggestions using .parent() that seem to work happen to be taking advantage of your invalid HTML (tr without table, unopened td, etc), they will not work with proper html, either remove the rows and columns and use other elements or build proper valid tables (one table per form)

edited Feb 28, 2013 at 10:13

answered Feb 28, 2013 at 10:08

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

2 Comments

Bari Over a year ago

i put <table> before <form> tag. i just don't write in here :) btw thanks

cernunnos Over a year ago

The resulting html is still invalid, sadly you cant put <form> between rows, the browsers will usually push the form outside the table (with no contents), meaning that if you submit, no values will be passed with the form. I suggest inspecting the code with a developer tool, to see the DOM structure the browser has built for your html.

Collectives™ on Stack Overflow

jquery enable submit button when select an option

7 Answers 7

Note:

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Note:

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related