我有一个名为orderproductForm的表单和未定义数量的输入。

我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面,并发送orderproductForm表单的所有输入。

我想有一种方法是

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

然而,我不知道确切地所有表单输入。是否有一个特性,功能或一些东西,只是发送所有的表单输入?


当前回答

考虑使用最接近的

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

其他回答

你也可以使用FormData(但在IE中不可用):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

这就是如何使用FormData。

你可以使用Ajax Form Plugin或jQuery serialize函数中的ajaxForm/ajaxSubmit函数。

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

当按下提交按钮时,ajaxForm将发送。ajaxSubmit立即发送。

序列化:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX序列化文档在这里。

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

这段代码甚至可以使用文件输入

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

有几件事你需要记住。

1. 有几种提交表单的方法

使用提交按钮 按enter键 通过在JavaScript中触发提交事件 可能更多取决于设备或未来的设备。

因此,我们应该绑定到表单提交事件,而不是按钮单击事件。这将确保我们的代码在现在和未来的所有设备和辅助技术上都能工作。

2. Hijax

用户可能没有启用JavaScript。hijax模式在这里很好,我们使用JavaScript温和地控制表单,但如果JavaScript失败,则保持表单可提交。

我们应该从表单中提取URL和方法,因此如果HTML发生了变化,我们不需要更新JavaScript。

3.低调的JavaScript

使用event. preventdefault()而不是return false是很好的实践,因为它允许事件冒泡。这使得其他脚本可以绑定到事件中,例如可以监视用户交互的分析脚本。

速度

理想情况下,我们应该使用外部脚本,而不是内联插入脚本。我们可以使用脚本标记在页面的头部部分链接到它,或者在页面的底部链接到它,以提高速度。脚本应该悄悄地增强用户体验,而不是妨碍用户体验。

Code

假设你同意上面的所有建议,并且你想要捕获提交事件,并通过AJAX (hijax模式)处理它,你可以这样做:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

你可以手动触发表单提交,只要你喜欢通过JavaScript使用类似的东西:

$(function() {
  $('form.my_form').trigger('submit');
});

编辑:

我最近不得不这样做,最后写了一个插件。

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

添加一个data-autosubmit属性到你的表单标签,然后你可以这样做:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});