javascript — форма не отправляется через AjaxForm / JQuery
Есть таблица, которая отображает элементы и имеет кнопку «Удалить» в каждой строке. Кнопка удаления находится внутри формы.
Я использую метод AjaxForm для отправки формы. При нажатии на кнопку удаления предполагается удалить данные без перенаправления на какую-либо страницу или без обновления текущей страницы.
Но происходит то, что форма отправляется регулярно, как определено в теге action.
Я отображаю результаты в таблице следующим образом:
while($row = $result->fetch_assoc())
{
?><tr>
<td><?php echo ++$x; ?></td>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["title"]; ?></td>
<td><?php echo $row["author"]; ?></td>
<td>
<form method="POST" id='deleteform' class="forms" action="deletebook.php">
<input type="hidden" name="deletebook" value='<?php echo $row["id"]; ?>' >
<button type="submit" class="btn btn-danger btn-xs">Delete</button>
</form>
</td>
</tr><?php
}
}
else
{
echo "No Books Found!";
}
Это отображает таблицу в следующем путь
Чтобы отправить форму через AjaxForm, это было сделано следующим образом: (Я не показывал <table> теги здесь. простите.)
<script>
$(document).ready(function() {
$('#deleteform').ajaxForm(function() {
alert("success");
});
event.preventDefault();
});
</script>
Проблема в том, что форма отправляется обычным способом action="deletebook.php"
Поверьте мне, на других страницах форма отправляется через AjaxForm. Но на этой странице проблема возникает.
Может ли это произойти, потому что каждая кнопка «удалить» — это форма, отображаемая в соответствии с содержимым таблицы.
Пожалуйста, помогите мне.
РЕДАКТИРОВАТЬ: Проблема не в том, что невозможно удалить данные. Ранее данные удалялись и сейчас удаляются. Данные удаляются, отправляя меня на deletebook.php стр. Я хочу, чтобы данные были удалены без отправки на любую другую страницу.
Решение
Попробуйте так:
while($row = $result->fetch_assoc())
{
?><tr>
<td><?php echo ++$x; ?></td>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["title"]; ?></td>
<td><?php echo $row["author"]; ?></td>
<td>
<input type="hidden" class="hiddenId" value="<?php echo $row["id"]; ?>" />
<button type="button" class="btn btn-danger btn-xs">Delete</button>
</td>
</tr><?php
}
}
else
{
echo "No Books Found!";
}
?>
<script>
var id;
$(document).ready(function(){
$(".btn-danger").click(function(){
id = $(this).prev().val();
$.ajax({
url: "deletebook.php",
type: 'post',
data: {
"deletebook": id
}
}).done(function(response){
$(".hiddenId[value='" + id + "']").parent().parent().remove();
});
});
});
</script>
Добавлять:
$('#addbook').ajaxForm(
{
success: function(responseText, statusText, xhr, $form){
$('#booksuccess').modal('show');
$("#reset").click();
$("tr").last().append(responseText);
}
});
И в вашем методе php add верните строку, подобную этой:
"<tr><td></td><td>1</td><td>$Title</td><td>$Author</td><td><input type=\"hidden\" class=\"hiddenId\" value=\"$Id\" /><button type=\"button\" class=\"btn btn-danger btn-xs\">Delete</button></td></tr>";
Другие решения
Я полагаю, вы используете плагин ajaxForm здесь http://malsup.com/jquery/form/#ajaxForm
$(document).ready(function() {
$('#deleteform').ajaxForm(
{
beforeSubmit: function(formData, jqForm, options){
//show loader
},
success:function(responseText, statusText, xhr, $form) {
alert(responseText);
//hide loader
}
}
);
});