8

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.

3
  • Put console.log(form) before submitting the form, what does it show?
    – Barmar
    Dec 20, 2012 at 10:11
  • 1
    Make sure you assign the variable form after the DOM is completely loaded.
    – Barmar
    Dec 20, 2012 at 10:15
  • That's wrong. If form weren't assigned correctly, the timer wouldn't be running in the first place (I assume that part is working, right?). So it seems like something is reassigning form after you start the timer. You should capture it in a closure variable.
    – Barmar
    Dec 20, 2012 at 10:18

2 Answers 2

4

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; 
}
13
  • 1
    "When a form has a submit-button, form.submit() doesn't work anymore" - can you explain why do you think that? Dec 20, 2012 at 9:56
  • I tried your method but now when I click the button nothing happens... I am confused..
    – southpaw93
    Dec 20, 2012 at 9:57
  • 2
    @tborychowski It's because form.submit no longer points to the submit( ) function of the form object, it points to the element with name "submit".
    – n00dle
    Dec 20, 2012 at 10:03
  • @CioroianuDenis: damnit, I'm slow today :D you also need to change the ID - try again (and mind the ID-change).
    – looper
    Dec 20, 2012 at 10:08
  • 1
    @CioroianuDenis: I think submit-button will only be included in the form submission if the form was submitted by clicking that button. (This allows you to have multiple submit buttons in a form and determine on the server which one was clicked to submit it.) Thus when you submit the form via JavaScript, submit-button won't be in your $_POST array. You could try doing document.getElementById('submit-button').click() instead of form.submit(). Dec 20, 2012 at 10:38
1

I'd simplify the 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();
}

And - of course - remove (or change) id and name from the submit button, e.g:

<input type="submit" value="Upload" />

e.g.: http://jsbin.com/equyit/1/edit

2
  • another question, I saw that if I return false one time the values from the inputs will get lost, how can I avoid that?
    – southpaw93
    Dec 20, 2012 at 12:25
  • 1
    @CioroianuDenis It must be something else. Inputs are "read" when the form is submitted, so - in the example above - the values should be sent correctly. The "return false" would not matter. Dec 20, 2012 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.