提交表单数据，而不用$ 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.

Answer 1

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

Answer 2

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

Answer 3

try this;

<form id="myForm">

and add javascript;

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

and you ready to go. Hope this help.

Answer 4

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>