0

ユーザーが送信しようとしたときに値の 1 つを確認するフォームがあり、jQuery UI モーダル ダイアログで確認を行いたいと考えています。

コードは次のようになります。

valuesCheck = function(event) {
    $j("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $j('form#proposal');
                    $form.addClass('values-confirmed');
                    $j(this).dialog("destroy");
                    $form.submit();
                },
                "Continue editing": function () {
                    $j(this).dialog("destroy");
                }
            }
        })
        .html('<p>Please confirm the selected values.</p>');
    event.preventDefault();
}

$j("form#proposal").submit(function(event) {
    var val1 = $j("#val1 option:selected").text();
    var val2 = $j("#val2").val();
    if (val1 && val2 && !$j(this).hasClass('values-confirmed')) {
        valuesCheck(event);
    } else {
        return true; // processing stops here after the first click.
    }
});

Firebug にブレークポイントを設定すると、「値を確認して提案を送信する」をクリックした後、送信関数で「true を返す」行を渡しても何も起こらないことを除いて、すべてが期待どおりに機能することがわかります。送信イベントをもう一度発生させると、フォームは実際に送信されます。

問題は「event.preventDefault()」に関連していると思いますが、それがないと、モーダル ダイアログが消え、確認が行われる前にフォームが送信されます。

また、ハンドラー$form.submit()内からメソッドを再度呼び出してみましたが、役に立ちませんでした。valuesCheck

モーダルダイアログの「値を確認して提案を送信する」ボタンをクリックすると、実際にフォームが送信されるようにするにはどうすればよいですか?

4

2 に答える 2

2

このjsfiddleをチェックしてください。機能を必要不可欠なものまで絞り込んだので、実際のコードに戻す必要がありますが、機能します。

後世のために、ここにコードがあります：

# HTML

<form id="proposal" action="http://google.com" method="get" target="_blank">
    <input name="q">
    <button type="submit">Search</button>
</form>
<div id="proposal-form-errors"></div>​

# jQuery

valuesCheck = function(event) {
    $("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $('form#proposal');
                    $form.addClass('values-confirmed');
                    $(this).dialog("destroy");
                    $form.submit();
                },
                "Continue editing": function () {
                    $(this).dialog("destroy");
                }
            }
        })
        .html('<p>Please confirm the selected values.</p>');
}

$("form#proposal").submit(function(event) {
    if (!$(this).hasClass('values-confirmed')) {
        event.preventDefault();
        valuesCheck();
    }
});​
于 2012-06-01T19:16:44.057 に答える
0 
if (val1 && val2 && !$j(this).hasClass('values-confirmed')) {
        valuesCheck(event);
    } else {
        return true; // processing stops here after the first click.
    }

val1このブロックは、またはが空の場合にフォームを送信しますがval2、これは予期されていません。

これはあなたのコードのわずかに変更されたバージョンであり、それは機能しているようです

$j = jQuery;
var valuesCheck = function(event) {
    $j("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $j('form#proposal');
                    $form.addClass('values-confirmed');
                    $j(this).dialog("destroy");
                    $form.trigger('submit',['pass']);
                },
                "Continue editing": function () {
                    $j(this).dialog("destroy");
                }
            }
        }).html('<p>Please confirm the selected values.</p>');
    event.preventDefault();
}

$j("form#proposal").submit(function(event,pass) {
    if(pass)
       return true;
    var val1 = $j("#val1 option:selected").text();
    var val2 = $j("#val2").val();

    if (val1 && val2) {
        valuesCheck(event);
    } else{
      alert('Please fill all values');
      event.preventDefault();  
    }
});​

フィドルをチェックインします。そのボタンをクリックすると、フォームが送信され、ページが更新されます。

ワーキングフィドル

トリガー時に$.triggerを使用してカスタムデータを渡しますsubmit。

于 2012-06-01T19:15:33.890 に答える