web-dev-qa-db-ja.com

フォーム送信を停止するためのJavaScriptコード

フォーム送信を停止する1つの方法は、JavaScript関数からfalseを返すことです。

送信ボタンがクリックされると、検証機能が呼び出されます。私はフォームバリデーションのケースがあります。その条件が満たされるならば、私はreturnToPreviousPage（）という名前の関数を呼びます;

function returnToPreviousPage() {
    window.history.back();
}

私はJavaScriptと Dojo Toolkit を使っています。

前のページに戻るのではなく、フォームを送信します。この投稿を中止して前のページに戻るにはどうすればよいですか？

javascripthtmlforms
170
Muhammad Imran Tariq

フォームの送信を防ぐために関数の戻り値を使うことができます。

<form name="myForm" onsubmit="return validateMyForm();">

そして機能的

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Chrome 27.0.1453.116 mの場合、上記のコードが機能しない場合は、 イベントハンドラのパラメータのreturnValue フィールドをfalseに設定して機能させてください。

情報を共有してくれてありがとうSam。

編集：

ValidateMyForm（）がfalseを返す場合の回避策についてVikramに感謝します。

 <form onsubmit="event.preventDefault(); validateMyForm();">

validateMyForm（）は検証が失敗した場合にfalseを返す関数です。重要な点は、名前イベントを使用することです。例えばには使えませんe.preventDefault（）

240
Hemant Metalia

デフォルトを使用しない

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Vanilla JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
105
Greg Guida

以下は現時点で動作します（ChromeおよびFirefoxでテスト済み）。

<form onsubmit="event.preventDefault(); validateMyForm();">

ValidateMyForm（）は検証に失敗した場合にfalseを返す関数です。重要な点は、名前eventを使用することです。例えばには使えませんe.preventDefault()。

40
Vikram Pudi

送信ボタンの代わりに単純なbuttonを使うだけです。そしてフォーム送信を処理するためにJavaScript関数を呼び出します。

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

scriptタグ内の関数

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

window.history.forward(-1);も試すことができます

12
dku.rajkumar

すべてのあなたの答えは一緒に働くために何かを与えました。

最後に、これは私のために働いた：（あなたが少なくとも一つのチェックボックスの項目を選択しない場合は、それは警告し、同じページに留まります）

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
5
Gdba

簡単なことをするためのたくさんの難しい方法：

<form name="foo" onsubmit="return false">
3
Danial

onsubmitを使わずにスクリプトにイベントを添付することをお勧めします。

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

それからpreventDefault()（あるいは古いブラウザの場合はreturnValue = false）を使ってください。

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
2
Isaac Abramowitz

HemantとVikramの答えはChromeではまったくうまくいきませんでした。 event.preventDefault（）;スクリプトは、検証に合格したか失敗したかにかかわらず、ページが送信されないようにしました。代わりに、event.preventDefault（）を移動しなければなりませんでした。次のようにif文に追加します。

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

私を正しい方向に導いてくれたHemantとVikramに感謝します。

1
Jesperai

例えば、フォームに送信ボタンがある場合、その伝播を止めるには単純にevent.preventDefault（）を書きます。送信ボタンまたは入力ボタンをクリックしたときに呼び出される関数内。

0
Dheeraj Nalawade

これに似たフォームがあるとしましょう。

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

これはconfirmAction関数のJavaScriptです。

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

これはFirefox、Chrome、Internet Explorer（Edge）、Safariなどで動作します。

そうでない場合は私に知らせて

0
Mauricio Gracia Gutierrez

単にそれをしなさい....

<form>
<!-- Your Input Elements -->
</form>

そしてここにあなたのJQueryが行きます

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
});
0
Matee Gojra