Question

这是我到目前为止编写的代码：请帮我详细说明如何一次性提交Twitter和谷歌数据

<html>
<head>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
</head>
<script>
function addtwitterdetails(){
    $('#formarea').empty();
    var twitterdetails="<input type='date' id='twitterdate' name='twitterdate' oninput='gettwitterdate()' required><br /><input type='number' name='twitternumber' oninput='gettwitternumber()' required id='twitternumber'><img src='images/save.png' onclick='savedata(twitterdate,twitternumber)'>";
    $('#formarea').append(twitterdetails);
}
function addgoogledetails(){
    $('#formarea').empty();
    var googledetails="<input type='date' name='googledate' required><br /><input type='number' required name='googlenumber'>";
    $('#formarea').append(googledetails);
}
</script>
<body>
Simple Test<br />
<img src="images/twitter.png" height=80px width=80px onclick="addtwitterdetails()">

一些文字

Answer 1

我可以通过以下几种方式来实现这一目标：

一个巨大的形式。

你所有的＆＃34;迷你形式＆＃34;可以是巨型形式的自己的容器，并根据需要使用CSS来设置它。然后，当您发布或提交表单时，其所有数据都会一次性发送。仅仅因为页面的一部分看起来像一个表单并不意味着它。如果需要，您可以设置任何样式并将放在更大的表单中。

的javascript

您可以在手动从每个表单的输入中收集数据后进行Ajax调用。例如，在jQuery中：

var data = {
    field1: $('#form1 input.field1').val(),
    field2: $('#form1 input.field2').val(),
    field3: $('#form2 input.field1').val(),
    field4: $('#form2 input.field2').val()
};
$.POST('/form.php', data).success(...);

如果您只需要发布已填写的表单，或者您需要单独发布每个表单，那么您可以将一些逻辑放在一起：

$('.myIcons').click(iconClick);

function iconClick(){
    $.each('form', function(){
        if ( isValid($(this)) ) { // validation logic here
            $(this).submit(); // sending logic here
        }
    });
}

function isValid($form){
    if (!$form.find('input.date').val()) return false;
    if (!$form.find('input.price').val()) return false;
    return true;
}

听起来你有一些逻辑问题，你提交哪些表格而不是，所以JavaScript可能是更灵活/可扩展的方法。

Answer 2

<input type="button" value="Submit" onclick="submitForms()" />

function submitForms(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

页面上的多个表单，想要一次性提交所有数据

2 个答案: