Enable button after input text field generated by jquery is filled

Question

Adding of text field are generated by jquery. I just want to enable the submit button after the input text field are typed in. Thanks. Here's the code: https://jsfiddle.net/akoni/kL8jdpdc/

I tried this code, but no luck.

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('body').find('input[type="text"]').each(function() {
        if (($(this).val() == '')) {
            empty = true;
        }
    });

    if (empty) {
        $('#submit').attr('disabled', 'disabled');
    } else {
        $('#submit').removeAttr('disabled');
    }
});
})()

you try this url http://jsfiddle.net/yy4jr8qn/3/ or http://fiddle.jshell.net/K5Pfj/ — SNS, Sep 07 '17 at 05:00
Console in fiddle says `Uncaught ReferenceError: select_all is not defined` — IzumiSy, Sep 07 '17 at 05:03
Perhaps change $('body').find('input[type="text"]') to $(this).closest('form').find('input[type="text"]') so you only query text inputs within the form — Anthony McGrath, Sep 07 '17 at 05:04
Hi, thanks for the quick answer, but that's not what I want. The thing is that all inputs are generated by jquery not in HTML. — enrique, Sep 07 '17 at 05:04

Berkay Yaylacı · Answer 1 · 2017-09-07T05:25:55.620

2

The issue that you actually faced explained here, basically you should use on() instead of keyup(). And

input[type="text"]

will return less count then form > input, here is the changes

$(document).on("keyup", "input[type='text']", function() {
  var empty = false;
  $('input[type="text"]').each(function() {
    if (($(this).val() == '')) {
      empty = true;
    }
  });

  if (empty) {
    $('#submit').attr('disabled', 'disabled');
  } else {
    $('#submit').removeAttr('disabled');
  }
});

jsfiddle result

Hope helps,

edited Sep 07 '17 at 05:25

answered Sep 07 '17 at 05:19

Berkay Yaylacı

4,383
2
20
37

We should not use `.attr()` and `.removeAttr()` for element props like 'disabled', 'readonly', 'checked', etc. We should use `.prop()`. And we also better use single line code, e.g. `$('#submit').prop('disabled',empty);` – Taufik Nur Rahmanda Sep 07 '17 at 05:51

score 1 · Accepted Answer · answered Sep 07 '17 at 05:24

1

You must use delegation binding for any html elements that is dynamically added.

Try change $('form > input').keyup(function() {

to $('form').on('keyup','input',function() {

Good luck!

answered Sep 07 '17 at 05:24

Taufik Nur Rahmanda

1,862
2
20
36

Yes!! This is what I want. Thank you bro.. My complete code is (function() { $('form').on('keyup','input',function() { var empty = false; $('body').find('input[type="text"]').each(function() { if (($(this).val() == '')) { empty = true; } }); if (empty) { $('#submit').attr('disabled', 'disabled'); } else { $('#submit').removeAttr('disabled'); } }); })() – enrique Sep 07 '17 at 05:33
@enrique I'm glad to help you with such simple answer :D then please mark this as accepted answer – Taufik Nur Rahmanda Sep 07 '17 at 05:41

score 0 · Answer 3 · answered Sep 07 '17 at 05:07

0

This should right about do it:

(function() {
$("form > input").keyup(function() {
    var text = $("form > input").val();

    if (text == "") {
        $('#submit').attr('disabled', 'disabled');
    } else {
        $('#submit').removeAttr('disabled');
    }
});
})()

answered Sep 07 '17 at 05:07

Mona Lisa

193
1
12

Hi, thanks for the quick answer, but that's not what I want. The thing is that all inputs are generated by jquery not in HTML. – enrique Sep 07 '17 at 05:11

Shiladitya · Answer 4 · 2017-09-07T05:20:10.603

Here you go with a solution https://jsfiddle.net/kL8jdpdc/9/

(function() {
    $('form').on('keyup', 'input[type="text"]', function() {
    
        var empty = false;
        $('input[type="text"]').each(function() {
            if (($(this).val() == '')) {
                empty = true;
            }
        });

        if (empty) {
            $('#submit').attr('disabled', 'disabled');
        } else {
            $('#submit').removeAttr('disabled');
        }
    });
})()


var i=1;
$(".addmore").on('click',function(){
  $('#submit').attr('disabled', 'disabled');
 count=$('table tr').length;
    var data="<tr><td><input type='checkbox' class='case'/></td>";
    data +="<td><input type='hidden' id='process_id"+i+"' name='process_name"+i+"'/>P"+i+"</td><td><input type='text' id='burst_id"+i+"' class='text-input-grey' name='burst_name"+i+"'/></td></tr>";
 $('table').append(data);
 i++;
});

function select_all() {
 $('input[class=case]:checkbox').each(function(){ 
  if($('input[class=check_all]:checkbox:checked').length == 0){ 
   $(this).prop("checked", false); 
  } else {
   $(this).prop("checked", true); 
  } 
 });
}


$(".delete").on('click', function() {
 $('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false); 


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action='' class='subscription-table'>

<table width="500" align='center' border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
    <th>Process</th>
    <th>Burst Time</th>
  </tr>
</table>

<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add Process</button>

           <input id="submit" type="submit" name="submit" disabled="disabled"/>
</form>

Use $('form').on('keyup', 'input[type="text"]' instead of $('form > input'), if you select only input then it will select checkboxes as well.

When you add a new row, you need to disable the submit button as well $('#submit').attr('disabled', 'disabled'); added to the click event of .addmore button.

Hope this will help you.

WOW!! Yeah. Yours is correct too. Thank you bro. Sadly I can't upvote any answer here. But thank you Shiladitya. I love you hehe — enrique, Sep 07 '17 at 05:34

Enable button after input text field generated by jquery is filled

4 Answers4