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

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

我想有一种方法是

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

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


当前回答

这不是OP问题的答案, 但如果你不能使用静态形式的DOM,你也可以这样尝试。

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

其他回答

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

$(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)
        {


        }
    });        
});

你可以使用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序列化文档在这里。

避免发送多个formdata:

在表单再次提交之前,不要忘记解绑定submit事件, 用户可以调用sumbit函数不止一次,也许他忘记了一些东西,或者是一个验证错误。

 $("#idForm").unbind().submit( function(e) {
  ....

我得到了以下信息:

formSubmit('#login-form', '/api/user/login', '/members/');

在哪里

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

这假设post到'url'返回一个ajax形式的{success: false, error:'my error to display'}

你可以随意改变。请随意使用该片段。

你可以像下面这样在提交函数上使用这个。

HTML表单

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jQuery功能:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

详情及样品请访问: http://www.spiderscode.com/simple-ajax-contact-form/