-2

I'm not sure what has gone wrong, but for some reason the success function in Ajax isn't calling the function. I'm asking it to call after the PHP is completed.

For the PHP I have $test = 'Hi'; echo json_encode($test);

Here is my code for the main page:

<?php
    session_start();
    if(!isset($_SESSION["b2_in"])){
        header("Location: b2.php");
    }
?>

<script>

$(document).ready(function(){   
    $("form input:submit").click(function() {
        $.ajax({
            type: "POST",
            url: 'b2_send.php',
            data: $('form').serialize(),
            dataType: 'json',
            //beforeSend: function(){ $("#send").val('Sending...');},
            success: function(data) {
                TestFunction();
            },
            statusCode: {
                403: function(e) {
                    $("say").highlight();
                    $("#message").html(e.responseText);
                }
            }
        });
    return false;
    });
});

function TestFunction(){
    $("#message").val("");
}

</script>

<say>
    <form> 
        <input type="text" name="message" class="Message" id="message"/>
        <input type="submit" name="send" value='Say' id="send"/>
        <span id="message" style="font-weight:bold;color:red;"></span>
    </form>
</say>
slaphappy
  • 6,894
  • 3
  • 34
  • 59
user3867184
  • 33
  • 6
  • 2
    `$("#message").val("");` will literally do nothing visible. So how do you know your function is not executing? – Jivings Nov 05 '14 at 15:05
  • for `span`, you should use `$("#message").html("Your text");` – Frederick Zhang Nov 05 '14 at 15:07
  • @Jivings When a user puts data into the #message field, I want their data to disappear after the input is sent into the database, the input is being sent into the database, but the field is not being reset. – user3867184 Nov 05 '14 at 15:08
  • does the page refresh after you click your submit-button? this could interrupt the execution of the javascript – empiric Nov 05 '14 at 15:11
  • @empiric The page does not refresh, I am trying to do as much as possible without a page refresh. – user3867184 Nov 05 '14 at 15:12
  • If the success isn't happening, the error is. Why don't you have an error handler? That should be step 1. – Kevin B Nov 05 '14 at 15:13
  • http://stackoverflow.com/questions/1491743/how-to-set-a-value-for-a-span-using-jquery consider .text() or .html() – branchgabriel Nov 05 '14 at 15:14
  • You can try and put a "console.log" before, after and in the success function and check the output e.g. with firebug and tell us whats going on (if everthing is executed) – empiric Nov 05 '14 at 15:14
  • 1
    Just realize the textbox and the span have the same id. Try changing one of them? – Chen Sturmweizen Nov 05 '14 at 15:15

1 Answers1

0

Try this

span is a block element of DOM and hence to set data to it, you need to use $(id).html(data); and not val()

Also you should have different id for each elemnt in the dom, it always pick the first id that it gets in the dom, and in your case it is

<input type="text" name="message" class="Message" id="message"/> so it will change the value of this element 

<script>

$(document).ready(function(){   
    $("form input:submit").click(function() {
        $.ajax({
            type: "POST",
            url: 'b2_send.php',
            data: $('form').serialize(),
            dataType: 'json',
            //beforeSend: function(){ $("#send").val('Sending...');},
            success: function(data) {
                TestFunction();
            },
            statusCode: {
                403: function(e) {
                    $("say").highlight();
                    $("#message").html(e.responseText);
                }
            }
        });
    return false;
    });
});

function TestFunction(){
    $("#message").html("");
}

</script>
Ekansh Rastogi
  • 2,418
  • 2
  • 14
  • 23