Jquery在表单提交上显示确认对话框

Question

我需要在图像点击时显示确认对话框。代码在“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;
       });
   });
});

Answer 1

我找到了解决问题的方法，但仍需要对现有代码进行一些更改。

在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。据我了解，“return = false”或者，在我的原始代码中，preventDefault（）对我不起作用，因为“img”标签没有任何默认操作。

$(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');
    });
   });
});

Answer 2

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;
  });
});

Answer 3

你需要分解你的活动。一个用于图像的onclick调用表单的onsubmit，然后表单的onsubmit，这是'false'返回停止表单提交的适当位置。