进度条达到100％时未提交的表单

Question

I attached, below, the simplified version of my php. I have a from with multiple input field + upload file option.

When the form is submitted the upload bar fires up and when it reaches 100% I see the “success” alert and then the “complete” alert. (twice???) However neither the form “action=sendEmail.php” is triggered not the “url: sendEmail.php” – I thought of adding both to see if any is triggered. A note, when I remove the ajaxFrom triggers “sendEmail.php” is carried out.

So what am I doing wrong? What should change to make the “sendEmail.php” carried out. Also why do I see the success & completer alert twice? Success => complete => success => complete

The basic form:

 <form id="formmail" class="form-horizontal" name="formmail" method="POST" action="sendEmail.php" enctype="multipart/form-data">
.
.
.

I tried (separately of course) both with a submit button:

<input class="btn btn-sm" name='submit' type='submit' id='submit' tabindex='100' value="Submit"/>

And a simple button:

<button class="btn btn-sm" name='submit' id='submit'>Submit</button>

The javascript:

var progress
$(document).ready(function(){   
    $("#submit").click(function(){
        var form_data = $("#formmail").serialize();
        $("#formmail").ajaxForm({
            type: "POST",
            url: "sendEmail.php",
            data: form_data,
            beforeSend: function() {
                $("#progressBar").removeClass("hidden");
                progress = "0%";
                $('.progress-bar').css("width", progress);
                $('.progress-bar').html(progress);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                progress = percentComplete + "%";
                $('.progress-bar').css("width", progress);
                $('.progress-bar').html(progress);  
            },
            success: function (data){
                alert("success");
            },
            complete: function(xhr){
                if(xhr.responseText) {
                    alert("complete");
                }
            },
        })
        .submit();
    });
});

Answer 1

Your code has a very common problem. By default, Submit button (<input type="submit">) will submit the form automatically. Binding a click() function with jQuery won't stop the form from submitting. Therefore, for every click on submit button, sendEmail.php might be called twice, one by HTML form submit and one by JS. You probably want one of them only.

You can either change the type of the button to type="button", or add event.preventDefault() in your click() function.

By the way, here are some recommendations for your codes:

1. for HTML tidiness, do not mix single quotes & double quotes in HTML structure. Also, remove unused class and id attributes.
2. use lowercase filenames only. uppercase in URL is not friendly for users.