Posting form data which contains a number of Select List inputs not posting anything

Question

I have a situation where I am creating a HTML form using Bootstrap 3, Ajax result and dataTables. Depending on the result of the Ajax call the form contains a number of rows of data. Each row has a select list drop-down which allows the user to select the order for each record prior to saving.

The code that produces the "select list drop-downs" only showing part of the form is:

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

When the form is submitted non of the options selected in the "name='ViewOrder[]' are passed to the data submit script.

Data submit script:

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

Server side script:

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

In the console (Chrome) apart from displaying the expected "GroupID" nothing else is displayed. In the script that processes the data I have "print_r ($_POST)", which display only the "GroupID".

Where have I gone wrong?

mysql_query has been deprecated .Please avoid this usage refer https://www.php.net/manual/en/function.mysql-query.php — Deepak A, Mar 27 '19 at 11:51

Deepak A · Answer 1 · 2019-03-27T11:13:11.593

0

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

    });

refer Submit a form using jQuery

edited Mar 27 '19 at 11:13

answered Mar 27 '19 at 10:39

Deepak A

1,624
1
7
16

Many thanks for your reply. In the console when the form is submitted I see "MM_insert=Form12&GroupID=506592&ViewOrder%5B%5D=1&ViewOrder%5B%5D=2". But, in the Script that processes the submitted data the "print_r ($_POST) array is empty. any ideas? – DCJones Mar 27 '19 at 10:52
I did change the data: $("#orderSave").serialize(), prior to testing. "print_r ($_POST) array is empty. – DCJones Mar 27 '19 at 10:57
in update_order.php try this ,if the solution satisfies you expectation please approve it,thanks – Deepak A Mar 27 '19 at 11:14
I inserted "echo "Hello world";" in the script that prsesses the posted data and the result is: Hello worldarray(0) {}. So I know the ajax post is pointing to the correct file. I think there is something simple here but what I don;t know. I don't normally have this issue. – DCJones Mar 27 '19 at 11:23
have you tried this '' instead of echo "Hello World" – Deepak A Mar 27 '19 at 11:35
I take it extract($_POST); echo $GroupID; goes in the script that is processes the data i.e. update_order.php? I have tried that and it display nothing. – DCJones Mar 27 '19 at 11:38
since ViewOrder is an array try print_r($_POST['ViewOrder ']) – Deepak A Mar 27 '19 at 11:39
sorry i am not able to figure out the server side script.please post it so that i can find the issue,since the ajax request has been passed,there is no problem in js – Deepak A Mar 27 '19 at 11:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190766/discussion-between-deepak-and-dcjones). – Deepak A Mar 27 '19 at 11:45
Hi, I found a solution and have posted it in the chat we were having. – DCJones Mar 29 '19 at 12:01

score 0 · Accepted Answer · answered Mar 29 '19 at 12:04

This is how I make this work:

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

Surendra · Answer 3 · 2019-03-27T11:42:48.287

-1

Simply serialize the form then post through ajax

like wise

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

Something like this

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

  event.preventDefault(); 

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

});

edited Mar 27 '19 at 11:42

answered Mar 27 '19 at 11:31

Surendra

1
2

I am using serilize as per DeePak answer but the processing script is not displaying any data if I do a print_r ($_POST).I have also tried extract($_POST); echo $GroupID; with the same result. – DCJones Mar 27 '19 at 11:37
you are not understanding his problem.the problem is in server side code – Deepak A Mar 27 '19 at 11:43

Posting form data which contains a number of Select List inputs not posting anything

3 Answers3