У меня есть форма, которая представляет значения для back-end, но я хочу иметь кнопку отмены, которая останавливает отправку формы.
<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
/*
*
parameters
*
*/
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" value="cancel" id="CancelButton">Cancel</button>
</form>
Кто-нибудь может рассказать, как это можно сделать?
Решение, которое может работать:
var cancelObject = '';
$('#UploadForm').on('submit', function(e){
//prevent default submit
e.preventDefault();
//submit via ajax
cancelObject = $.post('upload.php', $( "#UploadForm" ).serialize());
});
$('#cancel_button').click(function(){
//Cancel the request
cancelObject.abort();
});
UNTESTET! - Только идея, которая могла бы работать.
Попробуйте что-нибудь подобное. Вот ваш HTML:
<form action="upload.php" method="post" enctype="multipart/form-data" id="UploadForm">
<button type="submit" value="submit" id="SubmitButton">Submit</button>
<button type="button" id="CancelButton" disabled>Cancel</button>
</form>
Здесь ваш jQuery и JavaScript:
$(function() {
var $form = $('#UploadForm');
var form = $form.get(0);
var $submit = $('#SubmitButton');
var $cancel = $('#CancelButton');
var xhr = null;
function cleanup() {
xhr = null;
$submit.removeAttr('disabled');
$cancel.attr('disabled', true);
}
function doneCallback() {
// your code for completed form submission goes here
// redirect the page or whatever you need to do
cleanup();
}
$cancel.on('click', function() {
if($cancel.attr('disabled')) {
return;
}
if(xhr instanceof XMLHttpRequest) {
xhr.abort();
}
cleanup();
})
$form.on('submit', function(event) {
event.preventDefault();
xhr = new XMLHttpRequest();
xhr.open($form.attr('method'), $form.attr('action'), true);
xhr.addEventListener('load', doneCallback);
$submit.attr('disabled', true);
$cancel.removeAttr('disabled');
xhr.send(new FormData(form));
return false;
});
});
Здесь используется API FormData, поэтому проверьте поддержку браузера для что.
Это не так просто, как просто прервать отправку. Как только эта кнопка нажата, нет никакого практического способа узнать, сколько, если есть, ее данных было отправлено еще.
Веб-браузер и веб-сервер не поддерживают связь между запросами, и поэтому остановка клиентской стороны script не означает, что она останавливает ее на стороне сервера.
Чтобы прервать эту отправку, вам необходимо отправить второй запрос серверу, сообщая об этом, а затем на сервере он может быть уже сохранен, поэтому потребуется удаление, и если это так, вам понадобится уникальный идентификатор оба идентифицируют запрос submit и его прерывания, так как они прибудут на серверную сторону как 2 уникальных запроса.
На сервере установка некоторых правил того, что и сколько данных требуется для фактического сохранения в db, может быть выполнено, тем не менее, что, если один пользователь имеет только 1 изображение, а второй - 3, как узнать, когда это Предполагается, что это "прерванная подача" или нет, основанная на таких правилах?
Задержка времени перед сохранением может быть чем-то другим, когда может быть принято прерывание, но опять же очень сложно сделать отказоустойчивость и в любом случае понадобится уникальный идентификатор для идентификации запросов.
Я думаю, ваш лучший выбор - сохранить его, поскольку я хотел бы верить, что большинство пользователей этого хотят, и если второй запрос приходит в течение определенного периода времени, он позволяет удалить.
Примите и используйте ответ Патрика Робертса, поскольку начало было бы хорошей идеей.
В этих двух похожих сообщениях вы можете найти дополнительную помощь.
Добавить атрибут onsubmit к тегу кнопки:
<button type="submit" value="submit" id="SubmitButton" onsubmit="return cancel()"> SubmitIt </button>
Javascript:
function cancel()
{
var decision=null;
alert("Press Y to submit or N to cancel");
decision=prompt("Do you want to submit?","Y or N");
if( decision.equals("Y"))
{
return true;
alert("Form has been submitted");
}
else if (decision.equals("N"))
{
return false;
alert("Form submission has been cancelled");
}
else
{
alert("wrong input.Re-submit the form.");
return false;
}
}
Форма будет отправлена, если возвращаемое значение true. Функция js запрашивает у пользователя, хочет ли он продолжить и отправить или отменить действие.
Хм, разве это не сработает для вас?
form (...) onsubmit="return false;"
Вместо "return false" вы можете использовать любую функцию JS, которую вы хотите. Обычно для этого используется проверка формы.