Jquery/javascript方式发送50个表单，就像发送1个表单一样

Jquery/javascript way send 50 forms as if it was 1 form?

本文关键字：表单 1个 一样 javascript 方式发 50个 Jquery      更新时间：2023-12-06

是否有Jquery方法可以像发送1个表单一样发送50个表单？

<form><input name="1"></form>
<form><input name="2"></form>
<form><input name="3"></form>
<form><input name="4"></form>

就好像是：

<form><input name="1">
<input name="2">
<input name="3">
<input name="4"></form>

像这样发送它，包括所有输入：

document.forms[0]

您可以构建一个包含其他50个表单值的新表单：

var $form = $(document.createElement('form'));
$('form :input').clone().appendTo($form);

现在，$form包含所有的输入。

通过序列化发送表单数据。

<html>
    <head>
        <title>36373219</title>
        <script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
    </head>
    <body>
        <form class="form" id="f1" >
            <input name="f1_inp_1" value="1">
            <input name="f1_inp_2" value="2">
        </form>
        <form class="form" id="f2" >
            <input name="f2_inp_1" value="1">
            <input name="f2_inp_2" value="2">
        </form>
        <form class="form" id="f3" >
            <input name="f3_inp_1" value="1">
            <input name="f3_inp_2" value="2">
        </form>
        <button id="fire">Fire</button>
    </body>
    <script type="text/javascript">
        $('#fire').on('click', preparesend);
        function preparesend(event)
        {
            sendform(event);
        }
        function sendform(event){
            event.stopPropagation(); // Stop stuff happening
            event.preventDefault(); // Totally stop stuff happening
            var data = new FormData();
            $('form').each(function(key,value) {
                data.append( key, $(this).serialize());
            });
            $.ajax({
                url: 'get_response.php',
                type: 'POST',
                data: data,
                cache: false,
                processData: false,
                contentType: false,
                success: function(data, textStatus, jqXHR)
                {
                    alert(data);
                }
            });
        }
    </script>
</html>
相关文章：