0

オンクリックとオンサブミットを同時に実行したいのですが、これは可能ですか?または、これが悪い習慣である場合、2つのコードをマージして両方のイベントを実行するにはどうすればよいですか?

フォームタグの必須フィールドをチェックする次のコードがあります。

onsubmit="return formCheck(this);"

次に、同じフォームの送信ボタンに次のコードを配置します。

onClick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"

私が抱えている問題は、送信ボタンをクリックすると、送信時のコードが完全に無視されることです。どうすればそれらをマージできますか?

更新最初に必須フィールドをチェックしてから、すべて問題がない場合はフォームを送信します。

更新:ここにコード全体を貼り付けました。これは前の開発者によって行われたため、本当に苦労しています。誰かが文字通りソリューションをコードに入れることができれば、それは素晴らしいことです。報酬を上げます。

4

11 に答える 11

12

onClickコードをonSumbitコードと同じ関数に配置します。

アップデート

onClickコードの最後でreturn false;、これによりイベントの通常の伝播が停止し、onSubmitイベントの発生が停止します。したがって、送信ボタンでフォームを送信する場合は、そのハンドラーreturn false;から削除します。onClick

送信ボタンをクリックするclickと、ボタンでイベントが発生submitし、ボタンがネストされているフォームでイベントが発生します(のようなものでイベントの伝播を停止しない限りreturn false;)。

したがって、実際submitには、現在の両方のハンドラーの役割を実行するイベントハンドラーのみが必要です。

また、ページにjQuery Coreが含まれているように見えるので、次のようなイベントハンドラーをアタッチできます。

$(function () {
    $('#form-id').on('submit', function () {
        var $this = $(this);//$this refers to the form that is being submitted
        jQuery.facebox({
            ajax : 'wishlist.php?emailme=true&name=' + $this.find('#name').val() + '&country=' + $this.find('#country').val() + '&email=' + $this.find('#email').val() + '&department=' + $this.find('#department').val()
        });

        //now we run your normal onSubmit code and return it's return value of this event handler
        return formCheck(this);
    });
});

フォーム全体をjQuery.facebox関数に送信する場合は、jQueryの.serialize()関数を使用して必要なクエリ文字列を作成できます。

$(function () {
    $('#form-id').on('submit', function () {
        jQuery.facebox({
            ajax : 'wishlist.php?' + $(this).serialize()
        });

        return formCheck(this);
    });
});

これがデモです:http://jsfiddle.net/vAFfj/

ドキュメント.serialize()http ://api.jquery.com/serialize

.on()これはjQuery1.7の新機能であり、この場合は.bind()古いバージョンと同じであることに注意してください。

アップデート

formCheck()プラグインを実行する前に関数からの戻り値を確認したい場合は、次のfaceboxようにすることができます。

$(function () {
    $('#form-id').on('submit', function () {

        //check if the form data is valid
        if (formCheck(this) === true) {

            //if the form data is valid then run the facebox plugin
            jQuery.facebox({
                ajax : 'wishlist.php?' + $(this).serialize()
            });

            //also return true to stop running this function
            return true;
        }

        //if the form data is not valid then return false to stop the submission of the form
        return false;
    });
});
于 2012-01-12T17:05:47.787 に答える
2

onclick 関数でフォームを送信します。

于 2012-01-12T17:08:57.523 に答える
1

onSubmit()との両方を使用するための特定の要件があるかどうかはわかりませんonclick()が、これは役立つ場合があります。

HTMLは次のとおりです。

<form id="my_form">
    Name: <input type="text" id="name" size="20" />
    <br />Country: <input type="text" id="country" size="20" />
    <br />Email: <input type="text" id="email" size="20" />
    <br />Department: <input type="text" id="dept" size="20" />
    <br /><input type="submit" id="submit" value="Login" />
</form>

そしてこれがJSです:

$(document).ready(function() {
    $('#my_form').submit(function() {

        var name = $('#name').val();
        var country = $('#country').val();
        var email = $('#email').val();
        var dept = $('#dept').val();

        /* Validate everything */
        if (name != '' && country != '' && email != '' && dept != '') {

            /* Validation succeeded. Do whatever. */
            jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + name + '&country=' + country + '&email=' + email + '&department=' + dept
            });
        }

        else {

            alert('Validation failed.');
        }

        return false;
    });
});

今、あなたは2つのことをすることができます:

1)AJAXを使用してフォームの処理を行う場合はreturn false;、フォームを送信できなくなるため、最後から2番目の行を保持することをお勧めします。

2)とにかくフォームを投稿したい場合は、を削除してくださいreturn false;。いつでも使用してフォームを投稿することもできます$('#my_form').submit()



これがフィドルです:http: //jsfiddle.net/vAFfj/1/

お役に立てれば。

于 2012-01-16T13:09:43.180 に答える
1

あなたのコードには2つの問題があります。

1 - 任意の入力フィールドで「Enter」を押すと、フォームを送信できます。そのため、onclick イベントはトリガーされません。

2 - ユーザーがボタンをクリックした場合 (いくつかのハックを追加し、onclick イベントと onsubmit イベントの両方がトリガーされたと仮定します)、formcheck が false を返す場合、フォームは送信されませんが、クリック イベントは成功します (リクエストが Wishlist.php に送信されます)

私の提案は以下のようになります、

onsubmit = "readyToSubmit(this); return false"

function readyToSubmit(a){
    if(formCheck(a)){
        jQuery.ajax({
                    url : ...,
                    success : function(data){a.submit()}
        })
    }
}
于 2012-01-22T09:03:34.017 に答える
1

onClick イベントと同じタスクを実行する別の関数を作成することをお勧めします。

まず、onSubmit イベントですべての必須フィールドが入力されているかどうかを確認します。そうでない場合は false を返し、すべての必須フィールドが入力されている場合は、「onClick」イベントの関数と同じジョブを実行する関数を呼び出します。

于 2012-01-17T17:00:40.513 に答える
1

まず、両方のアクションは必要ありません。あなたのシナリオでは、form タグで onSubmit 属性を使用するだけで済みます。

第 2 に、属性に対するアクションにインライン コードではなく関数への参照が含まれていれば、(あまりにも多くの理由で) はるかに優れています。

つまり、次のようにコードを変更します。

//some js file included in the page's header
function formSubmitActions(element) {
     if (formCheck(element)) {
         jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + element.name.value 
                       + '&country=' + element.country.value 
                       + '&email=' + element.email.value
                       + '&department=' + element.dept.value
         });
         return true;
     }
     return false;
}

//the form
<form [...] onsubmit="return formSubmitActions(this)">
[...]

それが役に立てば幸い!

于 2012-01-18T19:22:08.600 に答える
0

今すぐonclickイベントでフォームを送信します(jQuery.facebox({ ajax :)ので、これをon submitイベントハンドラーに移動するだけです(すべての検証が渡された後、formCheck関数の下部にあります))

于 2012-01-18T22:43:29.340 に答える
0

それらをまとめてみませんか?送信は送信時とクリック時に発生するため、実行できます

onsubmit="return formCheck(this);jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"
于 2012-01-23T03:43:05.047 に答える
-1

次のように 2 つを組み合わせてみてください。

onClick="if (formCheck(this)) { jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) });} return false;"
于 2012-01-12T17:12:43.477 に答える