CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Daniel
Daniel

Reputation: 57

Submit form data without refreshing the page with $ajax

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.

Upvotes: 0

Views: 204

Answers (4)

Sergey Vidusov
Sergey Vidusov

Reputation: 1342

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

Upvotes: 1

studio-klik
studio-klik

Reputation: 196

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>

Upvotes: 0

weirdo
weirdo

Reputation: 334

try this;

<form id="myForm">

and add javascript;

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

and you ready to go. Hope this help.

Upvotes: 0

paranoid
paranoid

Reputation: 7105

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

Upvotes: 1

Related Questions