Question

我遇到的情况是我要使用Bootstrap 3，Ajax结果和dataTables创建HTML表单。根据Ajax调用的结果，表单包含许多数据行。每行都有一个选择列表下拉列表，允许用户在保存之前为每个记录选择顺序。

仅显示表单一部分的“选择列表”下拉列表的代码为：

<form  name="Form12" id="orderSave" enctype="multipart/form-data" role="form" >
<input name="MM_insert" type="hidden" value="Form12">
<input type="hidden" name="GroupID" id="OrderGroupID">
"<td align='center' style='color:#333;font-size:0.8em;'> \
<select name='ViewOrder[]' id='ViewOrder'  style='color:#333;font-size:0.8em;'required > \
<option value='0' selected>0</option> \
<option value='1'>1</option> \
<option value='2'>2</option> \
<option value='3'>3</option> \
<option value='4'>4</option> \
<option value='5'>5</option> \
<option value='6'>6</option> \
<option value='7'>7</option> \
<option value='8'>8</option> \
<option value='9'>9</option> \
<option value='10'>10</option> \
</select> \
</td>" +
<button class="btn btn-success btn-xs submit-button" type="submit" >Save</button>
</form>

提交表单时，“ name ='ViewOrder []”中选择的所有选项都不会传递给数据提交脚本。

数据提交脚本：

$("#orderSave").submit(function(event){
  var group_id = document.getElementById("OrderGroupID").value;
  console.log("GroupID: " , group_id);
  event.preventDefault(); 
  var form = $('form')[12];
  var formData = new FormData(form);
  formData.append("GroupID", group_id);
  console.log("Form Data: " , formData);
  $.ajax({
    url:"update_order.php",
    data: formData,
    method:"POST",
    cache: false,
    contentType: false,
    processData: false,
  }).done(function(response){ 
    $('#view_order_Modal').modal("hide");
  });
});

服务器端脚本：

if (!isset($_SESSION)) {
  session_start();
}
require_once('../../../../../Connections/conn.php');
print_r($_POST['ViewOrder ']);

if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$groupid = trim($_POST['GroupID']);
$OrderArray = array();
$OrderArray = $_POST['ViewOrder'];
$updateSQL = sprintf("UPDATE Signage_timeline SET DisplayOrder=%s WHERE CarouselGroupID ='".$groupid ."'",
GetSQLValueString($_POST['DisplayOrder'] = $Order, "text"));
mysql_select_db($database_vex, $conn);
$Result1 = mysql_query($updateSQL, $conn) or die(mysql_error());

在控制台（Chrome）中，除了显示预期的“ GroupID”外，没有显示其他任何内容。在处理数据的脚本中，我有“ print_r（$ _POST）”，仅显示“ GroupID”。

谁能指出我哪里出了问题。

在此先感谢您的帮助和时间。

Answer 1

  $("#orderSave").submit(function(e) {

        //prevent Default functionality
        e.preventDefault();


        //do your own request an handle the results
        $.ajax({
                url: 'update_order.php',
                type: 'post',
                data: $("#orderSave").serialize(),
                 cache: false,
                 contentType: false,
                 processData: false,
                success: function(data) {
                    $('#view_order_Modal').modal("hide");
                }
        });

    });

推荐Submit a form using jQuery

Answer 2

这就是我的工作方式：

$(document).on('click','#orderSave', function(event){ 
$("#OrderSave").serialize(); 
event.preventDefault(); 
$.ajax({ 
type: "POST", 
url: 'update_order.php', 
data: $("#OrderSave").serialize(), 
}).done(function(response){ 
$('#view_order_Modal').modal("hide"); 
}); 
}); 

Then in the process script I have:


if (!isset($_SESSION)) { 
session_start(); 
} 
require_once('../../../../../Connections/vex.php'); 
$RecordArray = array(); 
$RecordArray = $_POST['id']; 
$OrderArray = array();  
$OrderArray = $_POST['ViewOrder']; 

$id_array = $_POST['id']; 
$name_array = $_POST['name']; 
$age_array = $_POST['age']; 
for ($i = 0; $i < count($RecordArray); $i++) { 
$id = mysql_real_escape_string($RecordArray[$i]); 
$order = mysql_real_escape_string($OrderArray[$i]); 

$updateSQL = "UPDATE Signage_timeline SET DisplayOrder= '".$order."' WHERE RecordID ='".$id ."'"; 
mysql_select_db($database_navex, $vex); 
$Result1 = mysql_query($updateSQL, $vex) or die(mysql_error()); 
}

Answer 3

只需序列化表单，然后通过ajax发布

明智

 data: $("form").serialize()

类似这样

$("#orderSave").submit(function(event){

  event.preventDefault(); 

  alert($("#orderSave").serialize());

});

过帐表单数据，其中包含许多“选择列表”输入，不张贴任何内容

3 个答案: