Submit form data without refreshing the page with $ajax

Question

I am trying to submit form without refreshing the page. My php code looks like this:

<form>
    <label for="roundcheck" style="color: red; font-size: 16pt;font-family: roboto;">Round: </label>
    <input type="text" name="roundcheck" class="textbox" style="" id="roundcheck" value="<?php $game = fetchinfo("value","info","name","current_game"); echo $game-1; ?>" placeholder="Round number">
    <input type="submit" id="checkbtn" class="button2" value="Check">
</form>
<div id="checkinfo">
</div>

I am trying to retrieve array from "checkfair.php" and display it in "checkinfo" using $ajax like this:

$(document).ready(function(){
    $('#checkbtn').click(function() {
        $("#checkinfo").show("fast");
        $.ajax({
            type: "GET",
            url: "checkfair.php",
        }).done(function (msg) {
            msg = $.trim(msg);
            if (msg != '[]') {
                var obj = jQuery.parseJSON(msg);
                $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
            }
        });
    });
});

"checkfair.php" file looks like this:

<?php
@include_once ("set.php");

$round = $_GET["roundcheck"];
echo json_encode([
    "round" => $round,
    "value" => round(fetchinfo("cost", "games", "id", $round), 2),
    "winner" => fetchinfo("winner", "games", "id", $round),
    "hash" => fetchinfo("hash", "games", "id", $round),
    "salt" => fetchinfo("salt", "games", "id", $round),
    "ticket" => round(fetchinfo("winticket", "games", "id", $round) * 100, 7)
]);
?>

I want everything to be displayed in <div id="checkinfo"> when I press "checkbtn" without refreshing the form.

Possible duplicate of [jQuery AJAX submit form](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Adam Azad, Feb 15 '16 at 16:07

score 1 · Answer 1 · answered Feb 15 '16 at 16:10

Try this

<script>
$(document).ready(function(){
$('#checkbtn').click(function() {
    $("#checkinfo").show("fast");
  $.ajax({
    type: "GET",
    data:"roundcheck="+$("#roundcheck").val(),
    url: "checkfair.php",
}).done(function (msg) {
    msg = $.trim(msg);
    if (msg != '[]') {
        var obj = jQuery.parseJSON(msg);
        $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
    }
});
});
});
</script>

you forget send data

data:"roundcheck="+$("#roundcheck").val(),

score 1 · Accepted Answer · answered Feb 16 '16 at 04:13

It doesn't work because your form is a) not being submitted at all, and b) does not pass any data to the backend. Instead of binding your AJAX function to the "click" event of the submit button, you should bind it to the "submit" event of the whole form.

Try modifying your AJAX function as follows:

$(document).ready(function(){
    $('#checkbtn').parents('form').submit(function(e) {
        e.preventDefault();
        $("#checkinfo").show("fast");
        $.ajax({
            type: "GET",
            url: "checkfair.php",
            data: $(this).serialize()
        }).done(function (msg) {
            msg = $.trim(msg);
            if (msg != '[]') {
                var obj = jQuery.parseJSON(msg);
                $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
            }
        });
    });
});

Or, to make the code a bit cleaner, add a specific selector to the form and bind the submit event handler straight to it (instead of using the .parents() method):

$('form#some-id').submit(function(e) {

score 0 · Answer 3 · answered Feb 15 '16 at 16:18

0

try this;

<form id="myForm">

and add javascript;

$("#myForm").submit(function(e) {
     e.preventDefault();
});

and you ready to go. Hope this help.

answered Feb 15 '16 at 16:18

weirdo

334
1
10

score 0 · Answer 4 · answered Feb 15 '16 at 17:40

Just add this to your form and ad fields will be posted:

Example: http://www.codesheet.org/codesheet/VzXPlp3Z

Example2: http://www.codesheet.org/codesheet/ycOMf3pi

Ajax: http://www.simonerodriguez.com/wp-content/plugins/downloads-manager/upload/ajaxsbmt.js

<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

Response div:

<div id="MyResult"></div>

Submit form data without refreshing the page with $ajax

4 Answers4