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

时间：2014-02-11 00:40:39

标签： javascript php jquery html ajax

基本上我有这个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-->

8 个答案:

答案 0 :(得分：4)

您应该在发布时获取数据，获取上传功能中的所有数据

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

}

答案 1 :(得分：3)

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

答案 2 :(得分：1)

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

- 以正常的ajax提交数据表单并返回mysqlID - 使用它在第一个

的回调中提交第二个表单

相信我：它会为你节省很多头痛

答案 3 :(得分：1)

您的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以及遍历表单字段的说明和示例。

答案 4 :(得分：0)

为什么要这么复杂？

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

答案 5 :(得分：0)

简单只需添加一个闭包！

$(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);

}

});

答案 6 :(得分：0)

将数据保存在Cookie中：

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

答案 7 :(得分：0)

您可以在两个并发线程上进行两次AJAX调用，以同时提交每个表单。您将不得不实现Concurrent.Thread JavaScript库，这是免费的开放源代码。

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

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

相关问题
最新问题