提交表格工作不正常

Question

我正在开发一个网页，该网页通过一些javascript / jquery代码动态地创建带有多个选择标签的表单。 提交表单时，php文件（form_submit.php）必须处理提交的表单字段。 此外，我将Netbeans 7.4用于php调试。

我的问题：当我在表单中选择一些值并提交表单时，调试器会在form_submit.php中显示空的提交值（例如，默认值“ NOSELECTION”表示未选择），而不是所选值。 下面代码中的Submit函数中的控制台确实显示了所选的提交值（因此也确认了带有select标签的内置html表单正确）。

我不认为这是Netbeans中的错误，那么我在哪里出错呢？ 我怀疑下面的jquery提交功能中有错误，但是我看不到...

JavaScript代码：

//main function document ready    
$(document).ready(function(){

//only part of code here to build the form with a number of <select>'s
ecorp_eproductoptions = '<select  id="selected_eproductid'+ff+'" class="eprodtype" name="selected_eproductid'+ff+'">';
ff++;
ecorp_eproductoptions += '<option selected="selected" value="NOSELECTION" > Koppel uw product </option>';

for(var k=0; k< Staticvars.ecorp_nrofeproducts;k++){
  ecorp_eproductoptions += '<option value="'+ Staticvars.suppliername[i] +'_'+Staticvars.agreementid[i] +'_'+ supplier_eproductid +'_'+ Staticvars.ecorp_eproductid[k] +'"> '+ Staticvars.ecorp_eproductname[k] +' </option>';
  }//for var k
  ecorp_eproductoptions += '</select>';
  form += '<td> '+ ecorp_eproductoptions +' </td></tr>';
//etc...

//FUNCTION Submit()
$("#myForm").submit(function(){

    console.log('SUBMITTED FORM: '+ $( this ).serialize() ); //shows values for select tags!

    $.ajax({
        type: "POST",
        url: "form_submit.php",
        data: $("#myForm").serialize(),
        dataType: "json",

        success: function(msg){
        if(msg.statusgeneral == 'success'){

        }
        else
        {

        }//else
        }, //succes: function   
        error: function(){

    $("#errorbox").html("There was an error submitting the form. Please try again.");
        }
    });//.ajax

//make sure the form doesn't post
return false;


});//$("#myForm").submit()

}); //$(document).ready

HTML代码：

<form id="myForm" name="myForm" action="" method="post">    
    <div id="wrapper"></div> <!--anchor point for adding set of product form fields -->   
    <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
    <input type="submit" name="submitForm" value="Bevestig">
</form>

Answer 1

我也是jQuery的新手，但是我认为问题是您的$.ajax调用异步运行，这允许提交事件处理程序继续运行并在表单发送值之前返回false ...只是一个新手猜测。 :)

您是否尝试过在$.ajax调用中添加async: false ？

Answer 2

我不知道为什么会这样，但是请尝试一下

$("#myForm").submit(function(){
var dataAjax = $( this ).serialize();
console.log('SUBMITTED FORM: '+ dataAjax  ); //shows values for select tags!

$.ajax({
    type: "POST",
    url: "form_submit.php",
    data: dataAjax,
    dataType: "json",

    success: function(msg){
    if(msg.statusgeneral == 'success'){

    }
    else
    {

    }//else
    }, //succes: function   
    error: function(){

$("#errorbox").html("There was an error submitting the form. Please try again.");
    }
});//.ajax
//make sure the form doesn't post
return false;
});//$("#myForm").submit()