Dynamic input fields creation is not working. Why?

Question

Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.

So far I have written this code : index.html

<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
    <form name="form1" id="form1">
        <table class="table table-bordered" id="dynamic_field">
            <tr>
                <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
                <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
            </tr>
        </table>
        <input type="button" name="submit" id="submit" value="Submit"/>
    </form>
    <script type="text/javascript" >
    $(document).ready(function () {
        var i = 1;
        $('#add').click(function () {
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
        });
        $('.btn_remove').on('click','.btn_remove',function () {
            var button_id = $(this).attr("id");
            $("#row"+button_id+"").remove();
        });

});
</script>

</body>
</html>

Now when I run this code then the output comes :

Dynamic Add Input Fields [ Input Fields ] [Add Button] [Submit Button]

So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.

But if I click the "Add" button, nothing happens, just URL changes.

I am guessing you do not look at your error console. Points you right to the error `method = "POST",` — epascarello, Sep 19 '17 at 11:55
And the comment above shows you why it does not work. Please get yourself a good linter built into your IDE. It will tell you these issues as your type. ESLInt, JSLint JSHint, etc. — epascarello, Sep 19 '17 at 11:57
Here I am not worried about backend, I just want the frontend to work fine. I will take care of backend at my own. — Mahesh Suthar, Sep 19 '17 at 12:04
LOL, I said nothing about the backend.... Now you changed the question by removing the JavaScript error that was not allowing the script to run. JavaScript error prevented the script to execute so the buttons just submitted the form. — epascarello, Sep 19 '17 at 12:05
Only other issue I see is you have a button without a type so it submits. So you need to add a type to the button like you do for the submit one... — epascarello, Sep 19 '17 at 12:05
Now that you changed the question it should be a dupe of https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms — epascarello, Sep 19 '17 at 12:07
I have changed some things and now the ADD button is working and new line is added. But when I press REMOVE button then nothing happens... — Mahesh Suthar, Sep 19 '17 at 12:20

score 0 · Answer 1 · answered Sep 19 '17 at 13:02

You need add event handler for each new item

$('#dates').append(
    $('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
    .click(function(){
      // handle click
    })
);

jQuery: adding event handler to just created element

Dynamic input fields creation is not working. Why?

1 Answers1