AJAX append results from JSON

[LinusIT]

Hi everyone

I've got a small form (4 inputs) that inserts data into a MySQL database via AJAX, this works fine. What I'd like to achieve is instead of refreshing the page to show the result, have the result appended to the page. I've tried everything I know (limited) and now asking for help.

Form:

<form action="till.php" method="post" name="insert-form" autocomplete="off">
<div class="row-sidebar">
<label>Reference</label>
<input type="text" id="ref" name="ref" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label id="label_in">In</label>
<input type="text" id="in" name="in" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label id="label_out">Out</label>
<input type="text" id="out" name="out" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label>Details</label>
<input type="text" id="detail" name="detail" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<input name="insert" type="submit" class="submit-btn till_insert" id="insert" value="Submit" />
<div class="cl">&nbsp;</div>
</div>
</form>

Javascript:

<script>$(function() {
$(".till_insert").click(function() {
var ref = $("input#ref").val();
var inn = $("input#in").val();
var out = $("input#out").val();
var detail = $("input#detail").val();
var till_insert = ("true");
var dataString = 'ref='+ ref + '&inn=' + inn + '&out=' + out + '&detail=' + detail + '&till_insert=' + till_insert;

$.ajax({
type: "POST",
url: "includes/insert.php",
data: dataString,
success: function() {
//alert("Success"); //Alert Shows Success
//alert (JSON.stringify(html)); //No Alert
$( "#till tbody" ).append( "<tr>" +
"<td>" + html(ref) + "</td>" +
"<td>" + html(inn) + "</td>" +
"<td>" + html(out) + "</td>" +
"<td>" + html(detail) + "</td>" +
"</tr>" );
}
});
//Refresh page when true, does nothing when false! Commented out for now
//return false;
});
});
</script>

insert.php

if(isset($_POST['till_start'])){
$sql = "INSERT INTO till_log (tl_ref, tl_date, tl_time, tl_in, tl_out, tl_detail) VALUES ('Start Balance', NOW(), CURTIME(), '$_POST[till_start]', '', '')";
$result = mysql_query($sql) or die(mysql_error()); }

I know I haven't escaped any of the values yet, I'll do that once it's working.

What happens at the moment is the data is inserted into the database and the page refreshes. If I change the append code to static then it puts that on the page but I can't get it working using the data from the form.

Thanks in advance

[Fotiman]

It looks like your callback function is calling an "html" function, which doesn't seem to be defined in your code.

[daveVk]

Put onsubmit handler on form to do the ajax stuff, this will ensure normal submit is disabled and all routes to submit, such as pressing enter are covered.

[Fotiman]

I second what daveVk said.

[LinusIT]

I've looked into the onsubmit handler but can't get my head around what I need to change. The strange thing is it works by either pressing "enter" or clicking the button.

The html bit was copied from another section within the page. I was just trying different things before asking for help.

Any ideas on how to put the info on the page without refreshing?

[daveVk]

There are problems in your success function, try something simpler until to you get rest working.

success: function(reply) { alert(reply); }

the 'return false;' is important leave it in.

to convert from click to submit

$(".till_insert").click(function() {

becomes

$("form").submit(function() {

[LinusIT]

Thanks daveVk

I have changed the PHP to echo the variables:

$arr = array("ref" => $ref, "inn" => $in, "out" => $out, "detail" => $detail, "success" => "True");
echo json_encode($arr);

Then using alert (JSON.stringify(response)); in the success function I get the following result (which looks correct)

{"ref":"Test","inn":"","out":"1.00","detail":"#*$!","success":"True"}

I can see the php side of it working now. I have changed the rest of the success function to the following but it still doesn't work

$( "#till tbody" ).append( "<tr>" +
"<td>" + response(ref) + "</td>" +
"<td>" + response(inn) + "</td>" +
"<td>" + response(out) + "</td>" +
"<td>" + response(detail) + "</td>" +
"</tr>" );

Thanks

[daveVk]

Try

$( "#till tbody" ).append( "<tr>" +
"<td>" + response.ref + "</td>" +
"<td>" + response.inn + "</td>" +
"<td>" + response.out + "</td>" +
"<td>" + response.detail + "</td>" +
"</tr>" );