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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.