I am trying to do a submit form with photos. After the user loads the photos he presses the submit button, I want the form to pause for 10 seconds, animate a progress bar for those 10 seconds and then submit the form, can you guys say what I did wrong, it doesn't seem to submit the form after 10 seconds. Here is the code:
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;
}
?>
I can tell that the form won't submit anything by the fact that the php variables won't show anything, and then page doesn't load.
Use the return value of the function to stop the execution of a form in JavaScript.
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form. Clicking on a link, prevent the link from following the URL.
You can use preventDefault method of the event object.
When a form has a button with the name and/or id "submit", it won't work anymore (my old post was wrong).
So what you need to do is to change the name/id of the button:
<input type="submit" name="submit-button" id="submit-button" value="Upload" />
Remember: You need to change your PHP, too:
if ($_POST['submit'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
to
if ($_POST['submit-button'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With