Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pause form from submitting with javascript

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.

like image 480
southpaw93 Avatar asked Dec 20 '12 09:12

southpaw93


People also ask

How does JavaScript prevent a form from being submitted?

Use the return value of the function to stop the execution of a form in JavaScript.

How do I stop submitting a form?

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.

How do you prevent a form from clearing fields on submit in JavaScript?

You can use preventDefault method of the event object.


1 Answers

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; 
}
like image 173
looper Avatar answered Sep 26 '22 05:09

looper