106

ASP.netWebアプリケーションに取り組んでいます。

送信ボタンのあるフォームがあります。送信ボタンのコードは次のようになり<input type='submit' value='submit request' onclick='btnClick();'>ます。

私は次のようなものを書きたいです：

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

どうすればよいですか？

4

14 に答える 14

194

あなたはやったほうがいいです...

<form onsubmit="return isValidForm()" />

isValidForm()が返された場合false、フォームは送信されません。

また、おそらくイベントハンドラーをインラインから移動する必要があります。

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
于 2010-11-19T16:29:03.633 に答える
45

入力を次のように変更します。

<input type='submit' value='submit request' onclick='return btnClick();'>

そして、関数でfalseを返します

function btnClick() {
    if (!validData())
        return false;
}
于 2010-11-19T16:28:08.370 に答える
16

変更する必要があります

onclick='btnClick();'

に

onclick='return btnClick();'

と

cancelFormSubmission();

に

return false;

そうは言っても、優れたイベント処理APIを備えたライブラリ（YUIやjQueryなど）を備えた控えめなJSを優先して、本質的なイベント属性を避け、本当に重要なイベント（つまり、フォームの送信イベント）に結び付けようとしています。ボタンのクリックイベントの）。

于 2010-11-19T16:27:36.300 に答える
6

submitタイプをからに変更する必要がありますbutton：

<input type='button' value='submit request'>

それ以外の

<input type='submit' value='submit request'>

次に、JavaScriptでボタンの名前を取得し、必要なアクションをそれに関連付けます

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

それが役立つことを願って私のために働いた。

于 2012-09-11T14:26:50.250 に答える
6

onsubmitasp.netでは機能しない場合があります。

とても簡単な方法で解決しました。

そのような形があれば

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

これで、フォームのポストバックの前にそのイベントをキャッチしてポストバックから停止し、このjqueryを使用して必要なすべてのajaxを実行できます。

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });
于 2015-10-09T12:39:59.437 に答える
4

あなたがする必要がありますreturn false;：

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}
于 2010-11-19T16:29:23.033 に答える
4

これは非常に古いスレッドですが、注目されることは間違いありません。したがって、提供されるソリューションは最新ではなく、最新のJavascriptの方がはるかに優れていることに注意してください。

<script>
document.getElementById(id of the form).addEventListener(
    "submit",
    function(event)
    {
        if(validData() === false)
        {
            event.preventDefault();
        }
    },
    false
);

フォームは、送信を監視するイベントハンドラーを受け取ります。呼び出された関数validData（ここには表示されていません）がFALSEを返した場合、メソッドPreventDefaultを呼び出します。これにより、フォームの送信が抑制され、ブラウザーが入力に戻ります。それ以外の場合、フォームは通常どおり送信されます。

PSこれは属性onsubmitでも機能します。次に、匿名関数function（event）{...}は、フォームの送信時に属性に含まれている必要があります。これは実際には最新ではなく、送信用に1つのイベントハンドラーでのみ作業できます。ただし、余分なJavaScriptを作成する必要はありません。さらに、フォームの属性としてソースコードで直接指定でき、フォームがDOMに統合されるまで待つ必要はありません。

于 2020-10-26T22:20:05.683 に答える
2

送信ボタンを通常のボタンに変更し、クリックイベントで、検証テストに合格した場合はフォームを送信してみませんか？

例えば

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
}
于 2010-11-19T16:28:20.503 に答える
1

必要onSubmitです。そうでonClickなければ、誰かがEnterキーを押すだけで、検証がバイパスされます。キャンセルも。falseを返す必要があります。コードは次のとおりです。

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

編集onSubmitはformタグに属しています。

于 2010-11-19T16:28:53.697 に答える
1

それは単純で、falseを返すだけです。

以下のコードは、jqueryを使用して送信ボタンのonclick内に入ります。

if(conditionsNotmet)
{
return false;
}
于 2013-03-31T09:30:46.187 に答える
1

JQueryを使用すると、さらに簡単になります。Asp.NetMVCおよびAsp.Coreで機能します。

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
于 2020-03-28T17:24:38.090 に答える
0

使用するonclick='return btnClick();'

と

function btnClick() {
    return validData();
}
于 2010-11-19T16:27:14.820 に答える
0 
function btnClick() {
    return validData();
}
于 2010-11-19T16:27:22.043 に答える
0 
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>
于 2018-08-14T15:31:15.303 に答える