天道酬勤,学无止境

Submit forms, one after another with jQuery?

How can I set up an automated queue system to run multiple submits, one after another? I don't want them to submit at once, or it may break my backend PHP script.

Here's a simple example, assuming each form can submit independently, and a master submit will run all the forms in series.

<input type="submit" id="submit_all" value="Submit All" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

UPDATE:

The script I'm working on is tool to backup the FTP files and MySQL dump of multiple websites - essentially an automated backup tool for web administrators.

Each form contains the values to connect to the FTP and MySQL of each site, and the PHP function copies and stores the files locally and creates a MySQL dump.

Copying the files can take 20+ minutes per site, so the idea is to create a 'master button' to automate each backup, one after the other.

标签

评论

You can try this jQuery example. I coded it on the fly, so it's not tested - but you get what I'm trying to do.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var state = false;

$(document).ready(function() {
    $('#submit_all').click(function() {
        go();

        // get all forms on the page
        $forms = $('form');
        sent = 0;

        // post the form (non-async)
        $forms.each(function() {
            if(state) {
            $.ajax({
                type: "post",
                async: false,
                url: $(this).attr("action"), 
                data: $(this).serialize(), 
                success: function(data) { 
                    if(++sent == $forms.length) {
                        alert("All forms submitted!");
                    }
                }
            });
            } else { return false; }
        });
        stop();
    });

    $('#cancel').hide().click(stop);

    function go() {
        if(!state) {
            state = true;
            $('#submit_all').hide();
            $('#cancel').show();
            $('input[type=button], input[type=submit]').attr("disabled", "disabled");
    }}

    function stop() {
        if(state) {
            state = false;
            $('#submit_all').show();
            $('#cancel').hide();
            $('input[type=button], input[type=submit]').removeAttr("disabled");
    }}
});
</script>

<input type="button" id="submit_all" value="Submit All" />
<input type="button" id="cancel" value="Cancel" />

<form id="form-1" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-2" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

<form id="form-3" method="post" action="function.php">
<input type="text" name="foo" value="Foo" />
<input type="submit" value="Submit" />
</form>

$("#submit_all").click(function(){
    $("#form-1").submit();
    $("#form-2").submit();
    $("#form-3").submit();
})

Maybe better for you to redesign your application (front/back)?

<form method="post" action="./function.php">
    <input type="text" name="foo[]" value="Foo" />
    <input type="text" name="foo[]" value="Foo" />
    <input type="text" name="foo[]" value="Foo" />
    <input type="submit" id="submit_all" value="Submit All" />
</form>

To do this you would set up some simple javascript which would simply be a series of submits. It would be something like:

function submitAll() {
   document.forms["form-1"].submit();
   document.forms["form-2"].submit();
   document.forms["form-3"].submit();
}

Obviously you may need to ajaxify the process as submitting a form will halt javascript execution.

I agree with other answers that this appears to be a logic error on your behalf and you should look at integrating the forms instead of plastering over the problem.

If one form relies on two other forms, it sounds like they're really part of the same form, and the backend should just figure out which parts of that one mega-form (with different sets of data, but for one form) that are needed. On a similar note, it's best not to rely on javascript alone anyway, so doing it this way provides you with an automatically more robust solution.

Update If you have multiple forms that are just sharing data (like they can change data on form1 and form2 that form3 needs), it would be more stable, especially in light of validation, to put those shared things in hidden elements and leave the forms separate. Having users enter data that will be submitted and used and then hiding it from view isn't optimal, since they can more easily make entry mistakes (they can't review as easily and they may not understand it will all be submitted). Using < input type="hidden" />s for shared info alleviates this because they won't be able to accidentally change it. (Or store it in the session or whatever you'd like. Point is, prevent them from changing info that you're going to rely upon and they can't easily spot mistakes in.)

Form element returns a value (true/false) when you submit it.

from here

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 验证动态添加的输入字段(Validate Dynamically Added Input fields)
    问题 我已经将此jQuery验证插件用于以下形式。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> <script> $(document).ready(function(){ $("#commentForm").validate(); }); function addInput() { var obj = document.getElementById("list").cloneNode(true); document.getElementById('parent').appendChild(obj); } </script> <form id="commentForm" method="get" action=""> <p id="parent"> <input id="list" class="required" /> </p> <input class="submit" type="submit" value="Submit"/> <input type="button"
  • jQuery-防止默认,然后继续默认(jQuery - prevent default, then continue default)
    问题 我有一个表单,提交后,我需要做一些额外的处理,然后才能提交表单。 我可以阻止默认的表单提交行为,然后进行其他处理(基本上是在调用Google Maps API并在表单中添加一些隐藏字段)-然后我需要提交表单。 有没有一种方法可以“防止默认设置”,然后再有一些“继续默认设置”呢? 回答1 使用jQuery.one() 将处理程序附加到元素的事件。 该处理程序每​​个事件类型的每个元素最多执行一次 $('form').one('submit', function(e) { e.preventDefault(); // do your things ... // and when you done: $(this).submit(); }); 使用one prevent还会导致无限循环,因为此自定义submit事件是在第一次提交后释放的。 回答2 当您将.submit()事件绑定到表单,并且在返回(true)之前执行了您想做的事情时,这些事情会在实际提交之前发生。 例如: $('form').submit(function(){ alert('I do something before the actual submission'); return true; }); 简单的例子 jquery.com上的另一个示例:http://api.jquery.com/submit/
  • How to split a form data and assign to another values with jQuery?
    I want to create a stripe.js form, first the data should be validated client-side then submitted to stripe.js to get token. Here is my full source code: <!DOCTYPE html><html> <head> <?php print_r($_POST); ?> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <script type="text/javascript" src="jquery.payment.js"></script>
  • 如何防止表单从客户端多次提交?(How to prevent form from submitting multiple times from client side?)
    问题 有时,当响应缓慢时,可能会多次单击提交按钮。 如何防止这种情况发生? 回答1 使用不显眼的 javascript 在表单提交后禁用提交事件。 这是一个使用 jQuery 的示例。 编辑:修复了在不单击提交按钮的情况下提交表单的问题。 谢谢,一番。 $("body").on("submit", "form", function() { $(this).submit(function() { return false; }); return true; }); 回答2 我尝试了 vanstee 的解决方案以及 asp mvc 3 unobtrusive 验证,如果客户端验证失败,代码仍在运行,并且表单提交被永久禁用。 更正字段后,我无法重新提交。 (见bjan的评论) 所以我像这样修改了 vanstee 的脚本: $("form").submit(function () { if ($(this).valid()) { $(this).submit(function () { return false; }); return true; } else { return false; } }); 回答3 通过让 onsubmit 处理程序隐藏提交按钮并将其替换为加载动画,可以非常优雅地实现客户端表单提交控制。 这样用户就可以在他的动作(点击)发生的同一地点获得即时的视觉反馈。 同时
  • 如何使用jQuery拆分表单数据并分配给另一个值?(How to split a form data and assign to another values with jQuery?)
    问题 我想创建一个 stripe.js 表单,首先应该在客户端验证数据,然后提交给 stripe.js 以获取令牌。 这是我的完整源代码: <!DOCTYPE html><html> <head> <?php print_r($_POST); ?> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <script type="text/javascript" src="jquery.payment.js"></script> <style type="text/css" media="screen"> .has-error input { border-width: 2px; }
  • 使用jQuery绑定动态添加的表单以提交事件(Bind dynamically added form to submit event with jQuery)
    问题 当您在 jQuery 中使用相同的表单 id 动态创建多个表单时,处理提交事件的最佳方法是什么? 到目前为止,这一行使得 jQuery 只处理第一种形式。 $("form#noteform").submit(function(){ // do stuff }); 有点令人困惑,因为我真的需要捕获特定表单的提交以获得正确的帖子值,因此表单的选择器必须是唯一的。 如何让它监听所有提交,然后确定是否是启动提交的正确表单 ID? 回答1 使用 ID 没有最好的方法来做到这一点,因为具有相同 ID 的多个元素是无效的 HTML。 我建议您的表单具有唯一的 ID,但共享一个类名。 如果您需要获得第一个,您可以直接使用 ID 或类和 jquery :first 选择器。 $('form.className:first').submit(function(){ stuff(); }); -edit- 试图真正解决确定提交了哪个表单的问题。 同样,此解决方案依赖于唯一表单 ID $('form.className').submit(function(){ switch( $(this).attr('id') ){ case 'form1id': submitForm1(); break; case 'form2id': submitForm2(); break; default: stuff(
  • jQuery-在Ajax调用后继续提交表单(jQuery - Resume form submit after ajax call)
    问题 是否可以停止表单的提交,然后在ajax调用成功后重新提交相同的表单? 目前,它到达了成功的位置,但是它没有重新提交应该提交用户并将其重定向到http://example.com网站的表格。 非常感谢您的任何提前帮助 如果无法通过这种方式进行操作,是否还有另一种方式可以使其正常工作? $(document).ready(function() { $('form').submit(function(e) { e.preventDefault(); $.ajax({ url: $('form').attr('action'), type: 'post', data: $('form').serialize(), success: function(data) { if (data == 'true') { $('form').attr('action', 'http://example.com'); $('form').unbind('submit').submit(); // mistake: changed $(this) to $('form') - Problem still persists though it does not resubmit and redirect to http://example.com } else { alert('Your
  • jQuery - submit multiple forms through single request, without Ajax
    I have a page with several forms. I am trying to submit one of the forms (say form A) (NOT through Ajax, since I need to load the result page after the submit is processed), BUT I need another form's contents (say form B) to be submitted TOGETHER with form A, i.e. the contents of forms A + B should be submitted TOGETHER to the SAME URL, as one request, and as I said before, NOT as an Ajax request. The submit should be by a POST request. Also, the forms contain ONLY fields that are not file upload (i.e. input, select, textarea fields). I have seen suggestions here such as Posting/submitting
  • 提交Ajax表单后如何将用户重定向到另一个页面?(How to redirect user to another page after Ajax form submission?)
    问题 成功完成表单后,我无法将用户重定向到“谢谢”页面。 发生的情况是,在提交表单后,它会转到空白页(https://cunet.sparkroom.com/Sparkroom/postLead)...我需要将其重定向到“谢谢”页面,同时将表单详细信息提交给“表单操作”中的网址。 HTML代码: <form action="https://cunet.sparkroom.com/Sparkroom/postLead/" method="post" name="theForm" id="theForm" onSubmit="return MM_validateForm();" > ... </form> Ajax代码: <script src="http://malsup.github.com/jquery.form.js"></script> <script> $('#theForm').ajaxForm(function() { window.location.href = "I want the user to be redirected to this page"; }); </script> JavaScript: function MM_validateForm() { if ( !jQuery('#theForm #FirstName').val() ) { alert
  • jQuery的表单提交在IE中不起作用(jquery's form submit not working in IE)
    问题 我们在这里试图做的是拥有一个ID为upgrade_form的表单。 我们也有一个名为“ paypal_submit”的表格。 此表格为空白。 “ upgrade_form”具有帐单明细字段(地址,名称,有效期等) 然后,我们只有一个提交按钮,其逻辑是,如果选中了信用卡单选按钮,它将提交表单,但是当您选择贝宝时,它将显示一个nyromodal(http://nyromodal.nyrodev.com)灯箱。单选按钮,然后单击提交。 编辑 * 好的,我们彻底改造了整个过程。 我们首先添加了2个未包含在表单中的隐藏字段。 这2个字段包含信用卡和Paypal的网址。 选择信用卡单选按钮时,您将获得信用卡网址。 选择贝宝单选按钮时,您将获得贝宝URL。 当您单击单选按钮时,我们以此更改表单的操作: $('#upgrade_form').attr('action', $('#credit-card-target-url').val()) (credit-card-url为隐藏字段) 因此,当我们点击nyromodal灯箱中的链接时,我们只需调用 $('#upgrade_form').submit(); 但! 在任何IE中仍然无法使用。 有什么帮助吗? 我们正在安装建议的IE脚本调试器,但我很悲观,我们什么也看不到。 编辑 刚刚重试了这个。 我们取出了灯箱和其他代码。
  • 如何确保表单字段被禁用时是否提交?(How to ensure a <select> form field is submitted when it is disabled?)
    问题 我有一个select表单字段,我想将其标记为“只读”,因为用户无法修改该值,但是该值仍与表单一起提交。 使用disabled属性可防止用户更改值,但不使用表单提交值。 readonly属性仅可用于input字段和textarea字段,但这基本上就是我想要的。 有什么办法可以使它正常工作吗? 我正在考虑的两种可能性包括: 而不是禁用select ,而是禁用所有option并使用CSS来使select变灰,使其看起来像被禁用。 将单击事件处理程序添加到“提交”按钮,以便在提交表单之前启用所有禁用的下拉菜单。 回答1 <select disabled="disabled"> .... </select> <input type="hidden" name="select_name" value="selected value" /> 其中select_name是您通常会赋予<select> 。 另外一个选项。 <select name="myselect" disabled="disabled"> <option value="myselectedvalue" selected="selected">My Value</option> .... </select> <input type="hidden" name="myselect" value="myselectedvalue
  • 插入元素后,如何让 jquery 将行为附加到元素(How can I have jquery attach behavior to an element after inserting it)
    问题 我有一个通过 ajax 提交的表单,并返回一个更新的 html 块,其中包含一个我想通过 jquery 提交的更新表单。 我遇到的问题是,我第一次单击提交时,事件被 jquery 捕获并且效果很好。 当我在不刷新的情况下对表单进行另一次更改时,jquery 不会捕获该事件,而是发出标准的 post 请求。 插入元素后,如何让 jquery 将行为附加到元素。 这是我的 jquery 代码。 $('.edit_clothing_product').submit(function(){ var productDiv = $(this).parent(); var action = $(this).attr('action'); var formData = $(this).serialize(); $.post(action, formData, function(data){ productDiv.replaceWith(data); }); return false; }); 这是我返回的(删减的)HTML。 <div class="product"> <form action="..." class="edit_clothing_product"> <div class="color_combos"> ...{form fields} </div> <a href="
  • jquery - x-editable - reset 'new record' after submit
    I have been trying to figure this out for hours to no avail. I have the following http://vitalets.github.com/x-editable/docs.html#newrecord the new record module/code. Its functionality is, once all the rows have their data, and it is submitted, it retains its value so that it can stay editable. I have tried adding input, select clearing code in the success of the ajax request and tried putting the .editable function inside an ajaxComplete function to see if it would reload the element on submit but it didnt. look at the demo. enter data, and submit. it then makes the data "permanent" so that
  • 表单内的表单的 jQuery 验证问题(jQuery Validation Issue with a form inside a form)
    问题 这是一个奇怪的。 我的设置是这样的.. <form id="main"> <input name="title" class="required"> <form id="searchIngredient"> <input name="search"> <input type="submit" name="submit" value="Search"> <form> <input type="submit" name="submit" value="Add New Recipe"> </form> 现在我正在尝试使用 class="required" 仅验证 #main 表单中的输入,但是对于表单中的第二个 #serachIngredient 表单,验证根本不起作用。 如果您想知道:#searchIngredient 表单使用 ajax 返回结果,并且由于设计原因,它需要在 #main 表单中。 我知道 jQuery 验证在没有 #searchIngredient 表单的情况下有效,但是一旦我将其添加回来,它就会停止工作,没有错误。 任何建议的解决方法或提示? 回答1 那是不可能的。 HTML 不支持嵌套表单。 内部表单的开始标签将被忽略,而内部表单的结束标签将结束外部表单,将提交按钮留在表单之外。 您可以在页面中拥有任意数量的表单,但不能相互嵌套。 回答2 我有同样的问题
  • 带有两个提交按钮的jQuery Validation插件?(jQuery Validation plugin with two submit buttons?)
    问题 我有一个表单,包含大约50个字段和两个提交按钮,即“保存”和“保存并提交”。 如果用户单击“保存”,则仅验证某些值,例如。 field1,field2。 当用户单击“保存并提交”按钮时,它应验证所有50个字段并提交。 <form id="myform"> <input type="text" name="field1" /> <br/> <input type="text" name="field2" /> <br/> <input type="text" name="field3" /> <br/> <input type="text" name="field4" /> <br/> <input type="submit" id="button1" value="Save" /> <input type="submit" id="button2" value="Submit" /> </form> $(document).ready(function () { $('#button1').click(function(){ $("#myform").validate({ rules: { field1: { required: true }, field2: { required: true } }, submitHandler: function (form) { //
  • jQuery AJAX表单提交两次(jQuery AJAX form submits twice)
    问题 我有一个要通过jQuery捕获并通过AJAX发送的表单。 我的问题是,每次刷新页面时,表单都会提交多次。 我尝试取消绑定“提交”按钮,但通常在第一次提交后将表单发布。 任何帮助,将不胜感激 $('#exportForm').submit(function() { $.ajax({ type: "POST", url: $(this).attr('action'), data: $(this).serialize(), success: function(response) { $('#exportForm').unbind('submit'); console.log(response); } }); return false; }); 回答1 您最有可能正在使用button或submit来触发ajax事件。 尝试这个: $('#exportForm').submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: $(this).attr( 'action' ), data: $(this).serialize(), success: function( response ) { console.log( response ); } }); return false; }); 回答2
  • 使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件(Uploading a file with AngularJS and bluimp on success callback of another form)
    问题 我按照以下教程将臭名昭著的 bluimp jQuery 文件上传器集成到我的 AngularJS 项目中。 经过一番研究,我发现在选项数组中,在 jquery.fileuploader.js 文件中,有一个名为 autoUpload 的选项,当设置为 true 时会自动上传文件。 我试图禁用它(假,未定义),但很快我就知道这会导致上传根本不起作用,甚至在表单提交上也不起作用。 我需要手动触发上传,比如在另一个回调中,或者通过点击事件。 可以做到吗?。 代码: app.directive("fileupload", function() { return { restrict: "A", scope: { done: "&", progress: "&", fail: "&", uploadurl: "=", customdata: "&" }, link: function(scope, elem, attrs) { var uploadOptions; uploadOptions = { url: scope.uploadurl, dataType: "json" }; if (scope.done) { uploadOptions.done = function(e, data) { return scope.$apply(function() { return
  • 如何使用Jquery AJAX调用MVC Action,然后在MVC中提交表单?(How to call MVC Action using Jquery AJAX and then submit form in MVC?)
    问题 在我的MVC视图中,我有一个按钮: <input id="btnSave" type="submit" name="Save" value="Save" /> 当我单击此按钮时,我需要调用一个动作,在其中执行一些操作,然后提交我的表单。 我有这个jQuery的: $('#btnSave').click(function () { $.ajax({ url: "/Home/SaveDetailedInfo", type: "POST", data: JSON.stringify({ 'Options': someData}), dataType: "json", traditional: true, contentType: "application/json; charset=utf-8", success: function (data) { if (data.status == "Success") { alert("Done"); } else { alert("Error occurs on the Database level!"); } }, error: function () { alert("An error has occured!!!"); } }); }); 然后,我想提交我的表格。 在控制器中,我有2个动作: public ActionResult
  • ajax分页后jquery提交不起作用(Jquery submit does not work after ajax pagination)
    问题 我正在使用一个工作正常的 ajax 分页脚本 - https://github.com/gbirke/jquery_pagination 在第一页上一切正常,每个页面上都有提交按钮(多个表单),它们通过 jquery POST 将数据发送到数据库。 但是,jquery 帖子仅适用于加载的第一页上的表单/按钮。 如果您在分页上切换到另一个页面,则 jquery 发布/提交按钮不起作用。 任何建议将不胜感激,似乎无法弄清楚。 代码片段: 分页脚本 <script> $(document).ready(function() { $("#Pagination").trigger('setPage', [<?php echo $member_Program_Week_calc; ?>]); }); </script> <script type="text/javascript"> function pageselectCallback(page_index, jq){ var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone(); $('#Searchresult').empty().append(new_content); return false; } function
  • 在PHP中提交后如何显示或预览上传的图像而不保存到数据库?(How to display or preview a uploaded image after submitted in PHP without save to database?)
    问题 我的项目实际上涉及2个页面。第一个页面是基于action="2page.php"将上传的图像提交到第二个页面的action="2page.php" ,并将显示和预览图像。它应该在客户端 - 服务器上运行这意味着不涉及将图像文件保存到其中并将特定图像检索回我想要执行的页面的数据库。实际上我一直在编写这样的PHP脚本: <?php echo $_GET[image]; ?> <?php echo $_GET[image]; ?>在第二页显示上传的图片,但没有用。 回答1 如果您的目标是上传图像并将其存储在服务器上的目录中,那么此代码示例可能会帮助您入门(尽管我不会发誓它没有错误或安全)。 这是一个用于上传、保存和显示图像的单页表单。 <?php // prevent timezone warnings date_default_timezone_set('America/New_York'); // set the upload location $UPLOADDIR = "images/"; // if the form has been submitted then save and display the image(s) if(isset($_POST['Submit'])){ // loop through the uploaded files foreach ($