Forms failed to submit - php

Question

I have a form which I want to show the response in div via AJAX. Here is the form image from funds_transfer.php.
I test it with manual method=post and submit with the form and it works nicely. Here is the partial PHP code from funds_transfer_backend.php:
$index_num = $_POST['index_num'];
$to_account_num = $_POST['recipient'];
$amount = $_POST['amount'];
if ($amount == '' || $to_account_num == '' || $index_num == -1){
echo "Please complete the form!";
$response = -1;
}
else {
// other code goes here..
$display = array('response' => $response); // for ajax response later
echo json_encode($display);
PHP gave me this output:
Please complete the form!{"response":-1}
Now I want to implement it with AJAX and it's currently not working. Here is my current no working html + jQuery code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function update() {
var two = $('#index_num').val();
var three = $('#recipient_box').val();
var five = $('#amount_box').val();
$.post("funds_transfer_backend.php", {
index_num : two,
recipient : three,
amount : five
},function(data){
if (data.response==-1) {
$('#stage').show().html("Please complete the form!");
}
$('#stage').delay(2000).fadeOut();
},"json");
}
</script>
//other code goes here..
<p>Transfer your funds to other account
<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
<?php
$sql="SELECT * FROM `account` WHERE client_id='$id'";
$result=mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo "myData.push('".$row['funds']."');";
$result_array[] = $row['id'];
}
?>
</script>
<form id="example" name="example">
Select your account<select id="selector" name="index_num" style="margin-left: 10px;">
<option value="-1">Account Number</option>
<?php //echo $result_array[0];
$num = count($result_array) - 1;
$i=0;
while($i<=$num)
{
echo "<option value=\"$i\">$result_array[$i]</option>";
$i++;
}
?>
</select>
<br />
Funds : RM <input type="text" id="populateme" name="funds" disabled/><br>
Recipient Account Number <input type="text" id="recipient_box" name="recipient" /> <br>
Amount : RM <input type="text" id="amount_box" name="amount"/><br>
<input type="button" value="Submit" onclick="update();">
<input type="reset" value="Reset">
</form>
<div id="stage" style="background-color:#FF6666; padding-left:20px; color: white;"></div>
<script type="text/javascript">
document.example.selector.onchange = updateText;
function updateText() {
var obj_sel = document.example.selector;
document.example.populateme.value = myData[obj_sel.value];
}
</script>
</p>
The SQL query above will fetch data from db and populated it in the select box and disabled text box. No problem with that it's currently works nicely.
The problem is there's no response in div id="stage after submit and validation data.response==-1 . I'm not sure what's the problem here probably the form didn't submit at all. Please help and thanks in advance.

Answer 1

Add id
<select id="index_num" name="index_num" style="margin-left: 10px;">
because you index_num value is not sending and you get a notice as response with your
json. Also remove from funds_transfer_backend.php this line -> echo "Please complete the form!"

Answer 2

Remove the comma on this line:
amount : five,

Answer 3

I think you should use $('form[name=YourFormName]').serialize();
....
var posted = $('form[name=YourFormName]').serialize();
$.post("funds_transfer_backend.php", posted ,function(data){
if (data.response==-1) {
$('#stage').show().html("Please complete the form!");
}
$('#stage').delay(2000).fadeOut();
},"json");
...

Answer 4

if you're using chrome, launch the Developer Tools (ctrl+shift+I), go to the Network tab, then submit your form. if the form is in fact being submitted, you'll be able to inspect both the request and response to see exactly what is being submitted to and returned from the server. if your form is not being submitted, due to a JavaScript error for example, the error will appear in the Console tab.
similar debugging tools exist for FireFox as well.
a couple other things to note:
1) your JavaScript is populating the "two" variable incorrectly. it references an element with id "index_num", however the id on that element is "selector". that being said, you should in fact just use the serialize() approach that Vu mentioned.
2) your PHP code is echoing a raw error message before later on echoing the actual JSON response. this results in invalid JSON. you should store the error into a variable and push that error onto the associative array with a proper key (e.g. "message"). then you can display that on your page like so:
$('#stage').show().html(data.message);

Answer 5

First you are echoing the error in the PHP and you are expecting a JSON in the response in the AJAX success. So first remove the following line in the server/PHP script, or say don't echo anything other than the JSON.
echo "Please complete the form!";
And ensure that your PHP output is as follows on the correct scenario.
{"response":-1}
Now your data variable in the AJAX success will contain json format only. Do a parseJSON before checking if (data.response==-1) as follows.
function(data){
data = $.parseJSON(data);
if (data.response==-1) {
$('#stage').show().html("Please complete the form!");
}
$('#stage').delay(2000).fadeOut();
}