JSのform.submit()がフォームを送信できない理由

この記事では、JS の form.submit() がフォームを送信できないエラーの理由を主に紹介します。この記事の最終的な結論は、必要な友達が参照できるボタンの ID と名前に submit を使用しないことです。

コードに直接移動します:

<p id="register">
     <h4>会员注册</h4>
     <p class="formp">
         <form method="post" action="register.php?action=register" name="register" id="registerForm">
             <dl>
                 <dt>请认真填写以下内容</dt>
                 <dd class="hasspan">
                     用户名：<input type="text" name="username">
                 </dd>
                 <dd class="hasspan">
                     密码：<input type="password" name="pwd">
                 </dd>
                 <dd class="hasspan">
                     确认密码：<input type="password" name="pwdagain">
                 </dd>
                 <dd id="tximg">
                     <img src="img/face/m01.gif" alt="选择头像" id="faceimg">
                     <input type="hidden" name="touxiang" value="">
                     <label id="imgsrclabel">m01.gif</label>
                 </dd>
                 <dd style="margin-right:120px;">
                     验证码：<input type="text" name="code">
                     <span>
                         <img src="code.php" alt="code" id="code" name="code">
                         <a href="#code" id="change">换一张</a>
                     </span>
                 </dd>
                 <dd class="btns">
                     <input type="button" name="submit" id="submit" value="注册">
                     <input type="button" name="quit" id="quit" value="退出">
                 </dd>
             </dl>
         </form>
     </p>
 </p>

このページにフォーム データを送信します。以下は JS 処理です

/*注册表单提交*/
 function formDeal()
 {
     var btnSubmit = document.getElementById('submit');
     var formId = document.getElementById('registerForm');
     btnSubmit.onclick = function()
     {
         //表单的submit()方法不能提交表单
         formId.submit();
     }
 }

フォームが送信された場合、このページにプロンプ​​ト メッセージが表示されます

if(!empty($_GET['action']) && $_GET['action'] == 'register')
 {
     echo '你提交了数据';
     exit();
 }

結果は、コードまたはメソッドが間違っているためだと思いましたが、長い間テストした後もプロンプト メッセージが表示されませんでした。間違って書かれていたので、公式の結果文書を注意深く確認し、間違いがないことを確認しました。

formId.submit() が送信できないので、とりあえず btnSubmit の型を変更して送信する必要がありました

 this.type="submit"

ネットで情報を調べたところ、理由が分かりました2 点:

1. フォームにタグ name="submit"

を含めることはできません。2. フォームに "enctype="multipart/form-data""

を含めることはできません。

テスト後、これら 2 つの点はばかげており、問題は解決しませんでした (問題の環境が異なる可能性があります)

その後、フォーラムの友人が登録ボタンの ID を次のように変更することを提案したと思いました。送信せずに別の名前を使用します。修正後、フォームは正常に送信され、プロンプト メッセージが表示されます。

最終要約: 送信するボタンの ID を設定しないでください。設定しないと、混乱が生じ、フォームの submit() メソッドがフォームの送信に失敗する可能性があります。 ID に名前を付けるときは、不要な煩わしさを避けるために、既存の API と名前を重複させないことをお勧めします。