web-dev-qa-db-ja.com

JavaScriptフォーム送信 - 送信の確認またはキャンセルダイアログボックス

フィールドに正しく入力されているかどうかを確認するアラートを含む単純なフォームの場合、これを行う関数が必要です。

  • ボタンが2つのオプションでクリックされたときに警告ボックスを表示します。

    • 「OK」をクリックするとフォームが送信されます
    • キャンセルをクリックすると、警告ボックスが閉じてフォームを調整して再送信できます。

JavaScriptの確認はうまくいくと思いますが、その方法を理解することはできないようです。

私が今持っているコードは次のとおりです。

function show_alert() {
  alert("xxxxxx");
}
<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="Paypal - The safer, easier way to pay online!" value="Submit">
</form>
javascripthtmlformssubmitconfirm
154
matt

単純なインラインJavaScript確認で十分です。

<form onsubmit="return confirm('Do you really want to submit the form?');">

検証をしているのでなければ、外部関数は必要ありません。

<script>
function validate(form) {

    // validation code here ...


    if(!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}
</script>
<form onsubmit="return validate(this);">
342
Samuel Liew
function show_alert() {
  if(confirm("Do you really want to do this?"))
    document.forms[0].submit();
  else
    return false;
}
24
Majid Fouladpour

あなたはJSの確認機能を使用することができます。

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/

19
Jason Gennaro

さて、コードを以下のように変更してください。

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="Paypal - The safer, easier way to pay online!" value="Submit">
</form>

これは実行中のコードでもあります。動作を確認しやすくするために、以下のコードを実行して結果を確認してください。

function submitForm() {
  return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>
1
Alireza

フォーム送信に何らかの条件を適用する場合は、このメソッドを使用できます

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

メソッドおよびアクション属性書き込み後のonsubmit属性

javaScriptコード

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
0
Sumit Kumar Gupta