jQuery ajax modal在加载时提交表单答案

【问题标题】：jQuery ajax modal submits form on loadingjQuery ajax modal在加载时提交表单
【发布时间】：2014-06-20 22:15:33
【问题描述】：

我的 Ajax 中包含的外部 PHP 文件中有一个模式。问题是当我点击加载模式时，它已经提交了表单，它不应该提交（只有当我在模式本身上按下提交时）。

我试过了：e.preventDefault();, return false; $("#editForm").unbind('submit');

还注意到 jQuery 中的一个问题：当我点击获取 id 时，我得到了正确的按钮 ID（所以如果我 edit_3、edit_5、edit_7，它会正确提示 3、5、7；但是 ajax表单只获取我点击的第一个按钮 id。所以如果我点击 edit_3，alert 3，我会得到 3 的详细信息；但是如果我之后点击 edit_5，我会得到 alert 5，我现在得到 3 的详细信息。）

jQuery/Ajax：

$(function() {
 $( ".edit" ).click(function(e){
    var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault(); ajax also only sends ID of first edit I click, 
      // not the current one.
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });

    //return false; 
 });
});

触发的链接：

<a href="#modalEditType" class="edit" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

还有 PHP 表单/模态：

<form class="international" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="form-join">
   <div class="row col-lg-12">
    <div class="form-group">
    <label class="control-label col-lg-3">Type Name</label>
    <input type="text" id="title" name="title" placeholder="Type Name" class="form-control" value="<?php echo $type['title']; ?>" required />
 </div>
 <div class="col-sm-12">
   <button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
   <button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>
  </div>
    <input type="hidden" value="0" name="submitme"/>
   </form>

【问题讨论】：

我没有明白你的问题是什么？ :(
当我点击编辑按钮加载模态时，模态已经提交了表单——我没有按下任何提交按钮。
这是你说的按钮吗<button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
是的，这是被触发的按钮。
你有 type=submit 你不想提交表格？当你点击它？

标签： javascript php jquery ajax

【解决方案1】：

您可以在标签中定义 onclick 函数，然后在您创建的该函数中调用该函数。

     <a href="#modalEditType" class="edit" onclick="sub_form()" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

function sub_form()
{
 var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });
}

【讨论】：

不起作用，像以前一样在加载时提交表单。

【解决方案2】：

嗯，你可以原生阻止表单提交，就像这样，

$("form.international").submit(function(event){
    event.preventDefault();
});

这将阻止触发提交表单的任何内容

【讨论】：

试过了，还是触发表单提交。 :(
好的，然后尝试删除类似 $("form").submit(...) 的类 .international - 这将阻止提交文档中所有表单的表单
不，没有用，但是用我发现可能相关的另一个问题更新问题。

【解决方案3】：

我决定重写代码（PHP）方面。除了现在没有正确发送 id（另一个问题再问），代码在加载时不再提交。重写后我最好的猜测是两个按钮：

  <button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
   <button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>

无论出于何种原因（如果我找到了，我会重新编辑），即使取消也不是隐藏模式，而是提交表单。我将其转换为链接：

   <a href="" class="btn btn-info" onclick="$('#modalEditType').modal('hide');">Cancel</a>

这似乎有所帮助。接受这个答案和 djay 的答案都是正确的。

【讨论】：