Question

这是我的代码：

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

以下是：insert.js

$('#myform').submit(function(){
    return false;
});

$('#insert').click(function(){
    $.post(     
        $('#myform').attr('action'),
        $('#myform :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );
});

问题：

只有第一个<form></form>标记内的代码有效。如果我点击其他submit标记的<form></form>按钮，则会重定向到insert.php文件。

有什么问题？如果它与相同的id相关，那么我不想添加不同的id。对于每个新表格

Answer 1

ID's Must Be Unique，特别是因为当您尝试与这些元素进行交互时，它会在JavaScript和CSS中导致问题。

假设您将insert.js加载到页面中一次：

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

完成后，您可以使用单个jQuery函数来处理所有表单：

$(function() {
    $('.insert').click(function(e){
        e.preventDefault();
        $.post(     
            $(this).closest('.myform').attr('action'),
            $(this).closest('.myform :input').serializeArray(),
            function(result){
                $(this).closest('.myform').find('.result').html(result);
            }
        );
    });
});

您必须执行一些DOM遍历才能获取与插入按钮相关的表单元素。

$(this).closest('.myform')找到插入按钮的父级
$(this)closest(.myform').find('.result')找到具有＆＃39;结果＆＃39;类的子元素。将结果添加到。

Answer 2

您不需要insert.js

的多个实例

对所有表单和元素使用通用类，而不是重复ID。

我们也可以使用submit事件发布数据

HTML

<form action='insert.php' method='post' class='myform'>
  <input type='hidden' name='tmdb_id' />
  <button class='insert'>Insert</button>
  <p class='result'></p>

</form>

<form action='insert.php' method='post' class='myform'>
  <input type='hidden' name='tmdb_id' />
  <button class='insert'>Insert</button>
  <p class='result'></p>

</form>
<!-- load once per page -->
<script src='insert.js'></script>

JS

$('.myform').submit(function(){
    // `this` is the instance of myForm class the event occurred on
    var $form = $(this),
        url = $form.attr('action'),
        data = $form.serializeArray(); // or use serialize() which is more common

    $.post( url, data, function(result){
         // look inside this form instance for element to populate
         $form.find('.result').html(result);
     });

    return false;
});

Answer 3

使用jQuery Ajax尝试类似下面的内容：

$(".submit-button-class").click(function() {
  var formData = $(this).closest('form').serialize();
  $.ajax({
    type: "POST",
    url: "YOUR URL",
    data: formData,
    dataType: 'json',
    beforeSend: function() {
      //show loading image while processing
    },
    success: function(resp) {
      // do something here
    },
    error: function(e) {
      alert('error: ' + JSON.stringify(e));
    }
  });
});

注意：您应该使用类选择器而不是id选择器来提交按钮

在不重新加载页面的情况下将数据插入数据库（PHP + Jquery）

3 个答案: