CODEWITHSUNDEEP
javascripthtml
abuzer kadayıf
abuzer kadayıf

Reputation: 37

Element disappearing immediately after clicking add button

What I want to do is very simple once the user click on the add button then new <tr> and <td> elements are supposed to be added.The problem is newly added elements are disapper instantly. I have checked here.But its irrelevant

I think code snippets are self-explanatory 

$(document).ready(function() {
    var i = 1;
    $('#submit').click(function() {
        i++
        $('#data').append('<tr id="row' + i + '"><td><input type="text" name="name[]" id="name"></td><td><input type="submit" name="remove" id="' + i + '"  class="btn btn-danger btn-xs btnRemove" value="x"></td></tr>');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="addName" method="post" name="addName">
    <table id="data">
        <tr>
            <td><input id="name" name="name[]" type="text">
            </td>

            <td><input class="btn btn-success btn-xs btnAdd" id="submit" type="submit" value="+">
            </td>
        </tr>
    </table>
    <input class="btn btn-info btn-xs" id="submit" name="submit" type="button" value="Submit">
</form>

Upvotes: 0

Views: 957

Answers (1)

Seva Kalashnikov
Seva Kalashnikov

Reputation: 4392

You need to use .preventDefault();:

$('#submit').click(function(e){
    e.preventDefault();
    i++
    $('#data').append('<tr id="row'+i+'"><td><input type="text" name="name[]" id="name"></td><td><input type="submit" name="remove" id="'+i+'"  class="btn btn-danger btn-xs btnRemove" value="x"></td></tr>');

});

otherwise your type=submit button actually submits the form when clicked

Upvotes: 1

Related Questions