進捗バーが100％に達したときにフォームが提出されない

Question

以下、私のPHPの簡略版を添付しました。 複数の入力フィールドからファイルをアップロードするオプションがあります。

フォームが送信されるとアップロードバーが起動し、100％に達したら「成功」アラートと「完了」アラートが表示されます。 （2回） "url：sendEmail.php"ではなく、 "action = sendEmail.php"という形式も起動されていません - 私はどちらかが起動されているかどうかを確認するために両方を追加することを考えました。 メモ、私はajaxFromトリガーを削除すると "sendEmail.php"が実行されます。

どうしたのですか？ 「sendEmail.php」を実行するためには何が変更されるべきですか。 また、&コンプリータアラートが2回成功したのはなぜですか。 Success => complete => success => complete

基本的な形：

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

私は、送信ボタンを両方（別途のコース）試してみました：

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

とシンプルなボタン：

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

の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

あなたのコードは非常に一般的な問題を抱えています。デフォルトでは、送信ボタン（<input type="submit">）が自動的にフォームを送信します。 click()関数をjQueryにバインドしても、フォームの送信が停止されることはありません。したがって、送信ボタンをクリックするたびに、sendEmail.phpがHTMLフォーム送信とJSの2回ずつ呼び出されることがあります。おそらくそれらのうちの1つだけが必要です。

ボタンのタイプをtype="button"に変更するか、機能にevent.preventDefault()を追加することができます。 HTMLの整頓のため

1. 、単一引用符にHTML構造の&二重引用符を混在させないでください：

   はところで、ここにあなたのコードのためのいくつかの推奨事項です。また、未使用のclassおよびid属性を削除してください。

2. は、小文字のファイル名のみを使用します。 URLの大文字はユーザーにとって親切ではありません。