Javascript 页面上有多个表单，希望一次提交所有数据_Javascript_Html_Forms

Javascript 页面上有多个表单，希望一次提交所有数据

javascript html forms

Javascript 页面上有多个表单，希望一次提交所有数据,javascript,html,forms,Javascript,Html,Forms,以下是我迄今为止编写的代码：请帮助我如何一次性提交twitter和google数据 <html> <head> <script type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> </head> <scri

以下是我迄今为止编写的代码：请帮助我如何一次性提交twitter和google数据

<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()">


函数addtwitterdetails（）{
$（'#formarea'）.empty（）；
var twitterdetails=“
”；
$（'#formrea'）。追加（twitterdetails）；
}
函数addgoogledetails（）{
$（'#formarea'）.empty（）；
var googledetails=“
”；
$（#formrea'）。追加（谷歌详细信息）；
}
简单测试

一些文本

我可以想出几种方法来做到这一点：

一个巨大的形状您的所有“迷你表单”都可以是巨型表单中自己的容器，并根据需要使用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可能是更灵活/可伸缩的方法。


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

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

函数submitForms（）{
document.getElementById（“form1”）.submit（）；
document.getElementById（“form2”）.submit（）；
}

这是我的代码。现在你能帮我一次性提交twitter和google的数据吗