2

これが私がやりたいことです-

  • ユーザーがメインフォームの送信ボタンをクリックしたときに（jqueryの即興を使用して）プロンプトを表示します。プロンプトも、パスワードフィールドと[OK]および[キャンセル]ボタンがあるフォームです。
  • ユーザーが[OK]をクリックすると、メインフォーム（およびメインフォームに追加されたパスワード値）が投稿されます。
  • ユーザーが[キャンセル]をクリックした場合、フォームは送信されません。

詳細
以前に質問しました-impromptuの使用中に通常の送信を妨げた後、コールバック関数内でjqueryフォームsubmit（）が機能しません

そして、javascriptのネイティブプロンプトメソッドを使用して、私が望むものを正常に実装することができました。しかし、jqueryのimpromptuプラグインを使用して同じことをしたいと思います。

ネイティブJavaScriptプロンプトを使用した作業コードは次のとおりです-

$('#frmAddAdnetworkTemplate').submit(function(event){


            promptText = "Password required";

            postedPassword = prompt(promptText);

            if(postedPassword)
            {
                       $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword);
            }
            else
            {
                event.preventDefault();

            }
        });

そして、これが私がこれまでに即興で使用したコードです-

    $('#frmAddAdnetworkTemplate').submit(callBackSubmit);

    function callBackSubmit(event){

                $.prompt(passwordForm,{ buttons: { Ok: true, Cancel: function(){event.preventDefault(); } }, submit: submitPasswordPrompt});    

                //how do I call event.preventDefault(); when user cancel’s. 
    //The form gets submitted anayway, it does not wait for the code inside submitPasswordPrompt() to execute. How do I put some callback and make the submit event listener to wait until the user clicks Ok or Cancel?



            }

            function submitPasswordPrompt(e, value,m,form)
            {
                if(value)
                {

                     $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword);
    //append the password value in the main form 

                }
            }

しかし、フォームはとにかく送信され、即席のプロンプトに応答するまで送信を防ぐために何らかのコールバックを配置する方法がわかりません。javascriptの素朴なプロンプトの場合のように待機しません。

また、最初にevent.preventDefaultを使用し、後の質問でform.submit（）を使用しようとしたことに注意してください。impromptuの使用中に通常の送信を妨げた後、jqueryフォームsubmit（）がコールバック関数内で機能しません。ただし、その場合、フォームは送信されません（javascriptエラーは表示されません）。あなたがそれに答えることができるかどうか見てください。

4

3 に答える 3

4

最初に気付くのは、submit button「送信」という名前を付けたことです。これは に対応しform.submit、 を送信できなくなりますform。

スクリプトが対話するフォーム HTML を定義するときに犯す最も一般的な間違いは、フォーム コントロールのショートカット アクセサーの存在によるものです。コントロールに FORM 要素の既存のプロパティに対応する NAME (または ID) を与えることです。その最も一般的な例は、名前が "submit" の type="submit" の INPUT 要素です。名前付きコントロールは FORM 要素の名前付きプロパティとして使用できるため、この INPUT 要素はプロパティ名 "submit" で使用できます。残念ながら、FORM 要素には既に「submit」という名前のプロパティがあります。これは、スクリプトでフォームを送信するために使用できる submit メソッドです。

ソース: https://stackoverflow.com/a/3553600/896341

プラグインImpromptuを間違って使用しているため、匿名関数をボタン値として渡すべきではありません。また、関数が の関数submit event handlerよりも前に完了することにも注意してください。submit callback$.prompt()

この例は、実行フローと、formが送信されないようにする方法を示しています。

$('#myForm').on('submit', function(event) {

    var promptText = "The form will be submitted, continue?";

    console.log('Blocking attempt to submit form using preventDefault().'); // DEBUG
    event.preventDefault(); // Prevent default submit

    $.prompt(promptText, {
        buttons : { // Specify buttons and their return value
            Ok: true,
            Cancel: false
        },
        submit: function(event, value, message, formVals) {
            //console.log('submit', event, value, message, formVals); // DEBUG
            if (value) {
                console.log('Unbind submit event handler and trigger a submit.'); // DEBUG
                // Notice that you might want to rebind the event later on.
                $('#myForm').off('submit').submit(); // Submit form
            }
        }
    });

    console.log('This is executed before the submit callback of $.prompt().'); // DEBUG
});
于 2012-03-06T09:03:50.113 に答える
0

デフォルトのアクションを早すぎないようにしようとしていると思います。コードを使用してキャンセルをクリックすると、デフォルトのアクションが防止され、submitPasswordPrompt に送信されます。キャンセルのために false を送信してから、次のように送信関数で preventDefault ロジックを実行してみませんか。

$(function(){
                $('#passwordForm').submit(function(){

                    $.prompt('blah blah',{ buttons: { Ok: true, Cancel:false }, submit: submitPasswordPrompt});    

                    console.log('submitted');
                    return false; // Prevent submit
                });
            });

            function submitPasswordPrompt(e, value,m,form)
            {
                if(value)
                {
                     console.log('submittin....');
                } else {
                    console.log('its false');
                    e.preventDefault();
                }
            }
于 2012-03-05T17:22:10.077 に答える
0

プラグインはわかりませんが、ブラウザ プロンプトの html 代替であることは認識しています。

コードを書き直すつもりはありませんが、プロセス ロジックをどこで変更すれば簡単になるかはわかります。

フォーム送信ハンドラーにあるすべてのコードを削除します。

クリックハンドラーをフォーム送信ボタンにバインドし、ボタンの preventDefault をバインドして、後で指示するまでフォームが送信されないようにします。

プラグイン ロジック内で、ユーザーが [OK] をクリックしたときにすべて問題なければ、呼び出します$('#frmAddAdnetworkTemplate').submit()

「OK」でない場合は、プラグイン メソッドを使用して何を行う必要があるかを自分で処理する必要があります。

于 2012-03-05T17:21:06.933 に答える