CODEWITHSUNDEEP
phpjqueryhtmlrefresh
James Young
James Young

Reputation: 55

Form submit supposed to refresh only Div, but instead refreshes Page

I have a PHP page included called 'leaguestatus.php'. This page allows the user to post a message/status update and the intent is to have only this part of the div refreshed; however, on submit, the entire page is reloaded.

In the current implementation I'm simply printing all the $_POST variables to the div so I can see what's coming through. The MsgText textarea DOES get posted, however, it's only after the whole page loads. I'm trying to get just the div and that included file to reload.

div id="statusupdates"><? include 'leaguestatus.php'; ?></div>

leaguestatus.php

<form id="statusform" method="POST">
<textarea name=MsgText rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>

<BR>
<BR>

<div id='formbox'>
<? print "<pre>POST Variables:<BR>";
    print_r ($_POST);
    print "</pre>";
    $MsgText = $_POST["MsgText"];
?>
</div>

The jQuery I'm running in the header is: 

$(document).ready(function() {
    $("#statusform").submit(function(e) {
        e.preventDefault();
        var formData=$(this).serialize();
        var pUrl="leaguestatus.php";

        submitFormSave(formData, pUrl);
    });

    function submitFormSave(formData, pUrl) {
        $.ajax({
            url: pUrl,
            type: 'POST',
            data:formData,
            success: function(response) {
                $("#formbox").html(response);
            }
        }).success(function(){

        });
    }
});

Here are my includes:

html header

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

Edit: updated code to reflect use of @sazedul's response. Only issue now is on first click page acts as expected (no page refresh). On second click the entire page reloads. On third click we're back to normal.

Upvotes: 0

Views: 4348

Answers (4)

sazedul
sazedul

Reputation: 46

Made the following changes in your leaguestatus.php
remembar to put double quote in the name="MsgText" in text area.

<form id="statusform" method="POST">
<textarea name="MsgText" rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>

<BR>
<BR>

<div id='formbox'>

</div>

<?php 

if(isset($_POST['MsgText'])){

$message=$_POST['MsgText'];

echo $message;

}

?>

Upvotes: 1

sazedul
sazedul

Reputation: 46

Use this following code for ajax submit hope it will work. 

$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";

 submitFormSave(formData, pUrl);

    });

     function submitFormSave(formData, pUrl)
     {

        $.ajax({
            url: pUrl,
            type: 'POST',
            data:formData,
            success: function(response)
            {

                $("#formbox").html(response);

            }

        });
    }

Upvotes: 1

sazedul
sazedul

Reputation: 46

You have to preventDefault of submit then other thing

so,you have to use e.preventDefault() to prevent submit.then do what ever you want

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

......

Upvotes: 0

AlexJaa
AlexJaa

Reputation: 389

check for .load() like the code below....

$(document).ready(function() {
    $("#statusform").submit(function() {
        $("div").load();
    });
});

Upvotes: 0

Related Questions