フォーム送信時に確認ダイアログを表示するJQuery

StackOverflow https://stackoverflow.com/questions/1411910

  •  05-07-2019
  •  | 
  •  

質問

画像のクリック時に確認ダイアログを表示する必要があります。 「onclick」のコード;画像のセクションは、jquery確認ダイアログがtrueを返した場合にのみ実行する必要があります。

この時点でユーザーが$（＆quot; .submit_image＆quot;）をクリックすると-ダイアログは表示されますが、フォームは送信されます。

ロジックはjquery.alertsプラグインまたは通常のjavascript確認ダイアログの両方で同じである必要があります。

<form name="myform">
<img class="submit_image" onclick="myform.field1.value='1';myform.field1.value='2'; myform.submit();">
</form>


$(document).ready(function(){
   // catch submit 
   $(".submit_image").click(function(e){
       jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      return r;
       });
   });
});
役に立ちましたか？

解決 3

問題の解決策を見つけましたが、既存のコードにいくつかの変更を加える必要があります。

htmlでは、href =を使用してアンカータグ内に画像を配置しました。これは、画像onclickイベントで使用したものです。

<form name="myform">
<a href="javascript: myform.field1.value='1';myform.field2.value='2'; myform.submit();" class="submit_image_link"><img src="..."></a>
</form>

e.preventDefault（）メソッドを追加して、アンカーのデフォルトイベントを防止します。これは、hrefセクションのリンクまたはjavascriptに続きます。私が理解しているように、＆quot; return = false＆quot;または＆quot; img＆quot;が原因でpreventDefault（）が元のコードでは機能しませんでしたタグにはデフォルトのアクションはありません。

$(document).ready(function(){
   // catch submit 
   $(".submit_image_link").click(function(e){
    e.preventDefault();
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
        if (r) location.href = $(".submit_image_link").attr('href');
    });
   });
});

他のヒント

return jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
  return r;
});

たぶん？ jQueryでは、「false」を返す必要があります。 .click関数からデフォルトのアクションを停止しますが、現時点ではその関数から何も返されません。

*編集*

jConfirmを調べたところ、その動作方法（具体的には何も返さないため、コールバック経由でのみ値を返すことができるため）を希望どおりに使用することはできません。代わりに行う必要があるのは、onclickハンドラーから常に常にfalseを返し、jConfirmコールバックで手動でフォーム送信を呼び出すことだけです。

例：

$(document).ready(function(){
  // catch submit 
  $(".submit_image").click(function(e){
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      // If they confirmed, manually trigger a form submission
      if (r) $(".submit_image").parents("FORM").submit();
    });
    // Always return false here since we don't know what jConfirm is going to do
    return false;
  });
});

イベントを分割する必要があります。フォームのonsubmitを呼び出すための画像のonclickのための1つ。次に、フォームのonsubmitを呼び出します。これは、フォーム送信を停止するための「false」リターンの適切な場所です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top