Приостановить отправку формы с помощью javascript
Я пытаюсь заполнить форму отправки с фотографиями. После того, как пользователь загрузит фотографии, он нажимает кнопку "Отправить", я хочу, чтобы форма приостановилась на 10 секунд, анимировала индикатор выполнения в течение этих 10 секунд, а затем отправила форму, можете ли вы, ребята, сказать, что я сделал неправильно, кажется, что форма не отправляется через 10 секунд. Вот код:
HTML:
<form action="uploadpic.php" method="post" id="upload_form">
<input type="text" name="title" id="title">
<p id="title_p">Title</p>
<hr />
<input type="text" name="theme" id="picture_theme" size="40"/>
<p id="theme">Picture Theme<img src="../simages/info.gif" id="info" width="12" height="12" style="margin-left:10px;"></p>
<hr />
<div class="custom-upload">
<input type="file" name="picture" id="true_pic" />
<div class="fake-file">
<input disabled="disabled" >
</div>
</div>
<p id="upload_pic">Upload picture</p>
<input type="submit" name="submit" id="submit" value="Upload" />
</form>
JAVASCRIPT:
form = document.getElementById("upload_form");
size=1;
form.onsubmit = function()
{
if (size < 10)
{
setTimeout(delayedSubmit,1000);
}
return false;
}
function delayedSubmit() {
size++;
if (size<5)
{
setTimeout(delayedSubmit,1000);
alert("Counting "+size);
}
else
{
alert("Form submitted");
form.submit();
}
}
PHP:
<?php
if ($_POST['submit'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
?>
Я могу сказать, что форма ничего не отправит по тому факту, что переменные php ничего не показывают, и тогда страница не загружается.
2 answers
Когда в форме есть кнопка с именем и/или идентификатором "отправить", она больше не будет работать (мой старый пост был неправильным).
Итак, что вам нужно сделать, это изменить имя/идентификатор кнопки:
<input type="submit" name="submit-button" id="submit-button" value="Upload" />
Запомнить: Вам тоже нужно изменить свой PHP:
if ($_POST['submit'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
До
if ($_POST['submit-button'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
Я бы упростил javascript:
form = document.getElementById("upload_form");
size=0;
form.onsubmit = delayedSubmit;
function delayedSubmit () {
if (++size < 5) {
alert("Counting "+size);
setTimeout(delayedSubmit,1000);
return false;
}
alert("Form submitted");
form.submit();
}
И, конечно же, удалите (или измените) идентификатор и имя с кнопки отправки, например:
<input type="submit" value="Upload" />
Например: http://jsbin.com/equyit/1/edit