在一个活动中提交两种表格答案

【问题标题】：Submit two forms in one event在一个活动中提交两种表格
【发布时间】：2014-03-08 14:09:13
【问题描述】：

基本上我有这个onclick 事件，它序列化一些表单数据并将其保存到一个变量中，当用户运行另一个函数时，我希望能够通过函数中的 ajax 发送之前创建的变量。

这里是onclick 事件（第一种形式）：

$('#new_shout_next').on('click', function () {
    var new_shout_slide_1_form = $("#new_shout_form").serialize();
});

这是在onclick 事件之后执行的函数，所以希望你能明白我的意思（第二种形式）：

function uploadFile(){

    var file = _("new_shout_upload_pic").files[0];


    var formdata = new FormData();
    formdata.append("new_shout_upload_pic", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "scripts/dashboard/dash_new_shout_upload.php");

    var new_shout_slide_1_form = $("#new_shout_form").serialize(); //This is the edit i have made and removed this line of code from the on click event above
    ajax.send(formdata, new_shout_slide_1_form);

}

如果您需要，这里是dash_new_shout_upload.php：

     $fileName = $_FILES["new_shout_upload_pic"]["name"]; 
     $fileTmpLoc = $_FILES["new_shout_upload_pic"]["tmp_name"];
     $fileType = $_FILES["new_shout_upload_pic"]["type"];
     $fileSize = $_FILES["new_shout_upload_pic"]["size"]; 
     $fileErrorMsg = $_FILES["new_shout_upload_pic"]["error"];

     $new_shout_text = $_POST['hiddenNewShoutText']; //This is one of the fields in the serialized form first created in the onclick event.

这是我在控制台中遇到的错误：

Uncaught ReferenceError: new_shout_slide_1_form is not defined

对不起，如果这有点混乱，基本上简短的故事是我希望能够在一个事件中提交两个表单，所以我的想法是保存第一个表单并与第二个一起提交。

谢谢，如果您需要其他任何东西，请告诉我。

编辑

好吧，基本上 musa 在下面给了我这段代码

 function uploadFile(){
    var file = _("new_shout_upload_pic").files[0]; 
    var formdata = new FormData($("#new_shout_form")[0]);// add new_shout_form fields to the formdata object
    formdata.append("new_shout_upload_pic", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "scripts/dashboard/dash_new_shout_upload.php");

    ajax.send(formdata);

}

这显然会更好，因为它将new_shout_form 数据与上传的文件一起发送。问题是我似乎无法访问 php 脚本中的 new_shout_form 字段，我可以访问并获取文件，例如 $fileName = $_FILES["new_shout_upload_pic"]["name"]; 但是，我不确定如何获取 new_shout_form 中的字段成变量。我试过$new_shout_text = $_FILES["dash_new_shout_location"]; 和$new_shout_text = $_POST["dash_new_shout_location"]; 但是我得到错误Undefined index: dash_new_shout_location 有什么想法吗？

编辑 2

这是对 Musa 最近评论的编辑，这里有两种形式，第一种是用户使用文本输入提交的第一种，第二种是文件。

第一个表单，提交时将textarea div内容设置为隐藏输入，然后显示第二个表单供用户选择文件/图像

        <form id="new_shout_form">      

                        <div class="dash_new_shout_content">
                                <div id="dash_new_shout_textarea" name="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..."></div>
                                <input id="hiddenNewShoutText" name="hiddenNewShoutText" type="hidden"></input>
                        </div><!--end dash_new_shout_content-->

                        <div class="dash_new_shout_options">
                            <input name="new_shout_next" type="button" id="new_shout_next" class="new_shout_finish" value="Next" alt="Next" />
                            <div class="dash_new_shout_cancel" id="new_shout_cancel">Cancel</div><!--end dash_new_shout_cancel-->   
                        </div><!--end dash_new_shout_options-->

            </form>

带有文件上传的表格 2，当提交此文件时，我希望它发送表格 1 的输入。

<form id="new_shout_2_form" enctype="multipart/form-data" method="post">


                <div class="dash_new_shout_content">

                    <div id="dash_new_shout_new_pic">
                        <img id="new_shout_img" src="#" class="new_shout_img" width="100%" />           
                    </div><!--end dash_new_shout_new_pic-->

                    <div class="dash_new_shout_content_option_pic"> 
                        <div class="dash_new_shout_pic_file_upload_wrapper">
                            <input name="dash_new_shout_pic_name" id="new_shout_upload_pic" type="file"  /><span id="dash_new_shout_pic_file_upload_span">Upload from Computer</span>
                        </div><!--end dash_new_shout_pic_file_upload_wrapper-->     
                    </div><!--end dash_new_shout_content_option-->

                </div><!--end dash_new_shout_content-->
                <br style="clear: both">

                <progress id="new_shout_image_progress_bar" value="0" max="100" style="width:80%;"></progress>
                <div id="progress_status">0%</div> 
                <div id="new_shout_image_status"></div> 
                <div class="dash_new_shout_options">

                    <input name="new_shout_finish" type="button" id="new_shout_finish" onclick="uploadFile()" class="new_shout_finish" value="Finish" alt="Finish" />
                    <div class="dash_new_shout_cancel" id="new_shout_back">Back</div><!--end dash_new_shout_cancel-->

                </div><!--end dash_new_shout_options-->
            </form><!--end new_shout_2_form-->

【问题讨论】：

为什么不直接将第二种形式的变量附加到第一种形式而不是创建一个新形式？
我该怎么做，我不知道你可以追加两次
你检查文件是否真的在上传吗？阅读此stackoverflow.com/questions/21271060/… 还将您的 enctype 指定为 multipart/form-data
是的，文件上传正常，问题是我似乎无法以其他形式获取文本输入中的数据
您在new_shout_form 中没有名为dash_new_shout_location 的字段，只有hiddenNewShoutText 您是要改用它吗？

标签： javascript php jquery html ajax

【解决方案1】：

你应该只是在你要发布的时候获取数据，在上传函数中获取所有数据

function uploadFile(){
    var file = _("new_shout_upload_pic").files[0]; 
    var formdata = new FormData($("#new_shout_form")[0]);// add new_shout_form fields to the formdata object
    formdata.append("new_shout_upload_pic", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "scripts/dashboard/dash_new_shout_upload.php");

    ajax.send(formdata);

}

【讨论】：

嗨，我已经添加了您所说的行，并从 .send 中删除了 new_shout_slide_1_form，因为它给出了错误，但我现在收到此错误 Uncaught SyntaxError: Unexpected token < 任何想法？
我发现它是 php 文件 $new_shout_text = $_FILES["dash_new_shout_location"]; 中的这一行，它是您在上面添加到表单数据的 new_shout_form 表单的变量之一的行，我不知道t 认为我得到了正确的变量
我需要在 php 脚本中做什么才能访问 new_shout_form 变量？
好的，我设法使用您上面的代码让它工作，基本上我必须对表单的设置进行一些改造，我从下面的其他人那里得到了一些想法并提交了第一个表单所有帖子数据，然后获取帖子的ID并将其设置为文件上传表单中的隐藏输入，如果用户想要添加图像，他们可以单独发送，所以我使用上面的代码发送两个文本输入和文件在同一个 http 请求中，感谢大家提出这个非常冗长的问题

【解决方案2】：

我认为您需要在 on 事件之外定义 var new_shout_slide_1_form = '';，然后在 on 事件内部定义 new_shout_slide_1_form = $("#new_shout_form").serialize();。这将消除错误。

【讨论】：

【解决方案3】：

我已经遇到过这个问题。你能做的最好的事情是：

-- 以普通ajax形式提交数据并返回mysqlID -- 使用它在第一个回调中提交第二个表单

相信我：它会为您省去很多麻烦

【讨论】：

问题是用户首先输入文本数据，如姓名等。首先然后去选择图像，所以如果他们断开或决定取消这两种形式会发生什么，我会只留下一个提交的表格
简单：将配置文件注册为不完整，让他们回到图像上传阶段。并非所有用户都上传照片，有些用户从不上传，有些用户则不太在意。将其设为可选将对您有所帮助
我用你的答案来改造我的表单设置，所以连同其他人的答案我设法让它工作，谢谢

【解决方案4】：

您的 FormData 对象似乎无法正常工作。

 var formdata = new FormData($("#new_shout_form")[0]);// add new_shout_form fields to the formdata object
formdata.append("new_shout_upload_pic", file);

“new_shoud_upload_pic”之所以起作用，是因为它是明确定义的。

检验这一理论的一种方法是在 $_POST 变量上使用 var_dump 并查看正在发布的数据。

<?php
   //show $_POST index values
   var_dump($_POST);...
?>

如果帖子值不存在，那么您知道问题出在 HTML 中，但可能是表单中的名称字段之一拼写错误。

如果 $_POST 全局变量确实不包含您的表单字段名称和值，则 FormData 对象中存在问题。

您可以尝试使用 document.getElementById 替换 jQuery 方法。另一种可能的解决方案是手动遍历表单中的字段并将它们附加到 FormData 对象。

Mozilla Developer Site 提供了一些关于如何使用 FormData 并使用 XMLHttpRequest 传递以及遍历表单字段的说明和示例。

【讨论】：

【解决方案5】：

为什么要这么复杂？

function checkForm(button) {

      formOk = false;

      if (button = 'first') {
        //check form
        if (formOk) myform.submit();
      }

      if (button = 'second') {
        //check form using other logic
        if (formOk) myform.submit();
      }

    }


    <input type="button" onClick="checkForm('first');" value = "button 1">
    <input type="button" onClick="checkForm('second');" value = "button 2">

【讨论】：

无论如何不要分开做，我试图用2个表格做的动作基本上就像一个帖子，一个表格是帖子中的图像，另一个表格是所有帖子文本等...所以如果可能的话，我宁愿将它们一起提交

【解决方案6】：

简单的只需添加一个闭包！

$(function(){
var new_shout_slide_1_form  = "";

$('#new_shout_next').on('click', function () {
    new_shout_slide_1_form = $("#new_shout_form").serialize();
});

function uploadFile(){

    var file = _("new_shout_upload_pic").files[0];


    var formdata = new FormData();
    formdata.append("new_shout_upload_pic", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "scripts/dashboard/dash_new_shout_upload.php");


    ajax.send(formdata, new_shout_slide_1_form);

}

});

【讨论】：

【解决方案7】：

在 cookie 中保存数据：

document.cookie = "key1=value1;key2=value2;expires=date";

【讨论】：

【解决方案8】：

您可以在两个并发线程上启动两个 AJAX 调用以同时提交每个表单。为此，您必须实现 Concurrent.Thread JavaScript 库，该库是免费且开源的。

您可以从这里下载它： http://sourceforge.net/apps/mediawiki/jsthread/index.php?title=Main_Page

可以在此处找到解释该库使用的教程： http://www.infoq.com/articles/js_multithread

【讨论】：