在一个活动中提交两份表格

Question

基本上我有这个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数据和上传的文件.问题是我似乎无法访问new_shout_formphp脚本中的字段,我可以访问并获取文件确定如此$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-->

Answer 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);

}