tbody - Javascript add delete row envía formulario en lugar de agregar fila
javascript table delete all (4)
¿Alguien puede ayudarme con este guion? ¿Por qué se envía este formulario, en lugar de agregar una nueva fila en la mesa? Si elimino las etiquetas de formulario y el botón de enviar, funciona bien para agregar y eliminar filas.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
document).ready(function() {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function() {
id++;
var master = $(this).parents("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.dynatable input.remove").live("click", function() {
$(this).parents("tr").remove();
});
});
</script>
<style>
.dynatable {
border: solid 1px #000;
border-collapse: collapse;
}
.dynatable th,
.dynatable td {
border: solid 0px #000;
padding: 2px 10px;
width: 170px;
text-align: center;
}
.dynatable .prototype {
display:none;
}
</style>
</head>
<body>
<FORM name="save_event_personal" method="post" action="fetchrequest.php">
<table class="dynatable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Start</th>
<th>Ende</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td><input type="text" name="id[]" value="0" class="id" /></td>
<td><input type="text" name="name[]" value="" /></td>
<td><SELECT name="start[]">
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
<OPTION value="13:00">13:00</OPTION>
<OPTION value="14:00">14:00</OPTION>
</SELECT></td>
<td><SELECT name="end[]">
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
<OPTION value="13:00">13:00</OPTION>
<OPTION value="14:00">14:00</OPTION>
</SELECT</td>
<td><input type="image" class="remove" src="delete.png" alt="hi"/>
</tr>
</table>
<BR /><INPUT type="submit" value="Sumbit this form to fetchrequest.php" />
</FORM></body>
</html>
De forma predeterminada en Internet Explorer, un botón es un "botón de envío". Debes modificar tu botón así:
<th><button type="button" class="add">Add</button></th>
También puede devolver false en su devolución de llamada por click .
El elemento en realidad envía el formulario actual al hacer clic por defecto.
Puede agregar type="button" para evitar esto:
<button type="button" class="add">Add</button>
Intente evitar la acción predeterminada del botón, que sería enviar el formulario:
$("table.dynatable button.add").click(function(e) {
...
e.preventDefault();
});
<input type="image">
envía el formulario de manera predeterminada, por lo que debe evitar el comportamiento predeterminado al hacer clic:
$("table.dynatable input.remove").live("click", function( e ) {
e.preventDefault();
$(this).parents("tr").remove();
});
y tienes un error en la parte superior de tu script:
document).ready(function() {
...
debiera ser
$(document).ready(function() {
...
Lo mismo para agregar funcionalidad de fila:
$("table.dynatable button.add").click(function( e ) {
e.preventDefault();
...