CODEWITHSUNDEEP
javascriptjquery
Altimus Prime
Altimus Prime

Reputation: 2337

ajax post refreshes the page when it shouldn't

I have a uses jquery post answers to a grader.php script, which works perfectly. Depending on the results, it brings a form so they can send message with contact info. When I try to post to the second script to process the mailer, the whole page refreshes without posting the data or returning the appropriate message. It turns out the call is not being made at all. If you want to see the staging site you're welcome to look. It's kind of a cheesy way for me to get my feet wet with jquery. However, I believe the suspect script is here.

I added an alert to the click event to see if it even triggers the click on the score button. No alert triggers and all I get is a page refresh.

Alternatively, is there any way log posts and console data to see exactly what's happening?

HTML:

<div id="result">
    <form id="info" method="post" action="">
    <input name="phone_number" placeholder="phone number" type="text" size="20" value="">
    <input name="email_address" placeholder="email address" type="text" size="30" value="">
    <textarea cols="50" rows="10" placeholder="Questions? Comments?" name="comments"></textarea>
    <input type="submit" id="score" name="score" value="Send">
    </form>';
</div>

Jquery:

$("#score").click(function(event){
    alert("clicked");
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var info = $("#info").serialize();
    $('#result').fadeOut().html("");
    $.post('paider.php', info, function(data , status){
        $('#result').fadeIn().html(data);
        alert(status);
    });
});

Upvotes: 0

Views: 106

Answers (1)

Pepto
Pepto

Reputation: 1444

I think there are 2 problems here.

Problem 1: As the form resides inside #result, setting #result's html to "" effectively empties the form before serialization? Have you tried?

$("#score").click(function(event){
    var info = $("#info").serialize();
    $('#result').fadeOut().html("");
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    $.post('paider.php', info, function(data , status){
        $('#result').fadeIn().html(data);
    });
});

Problem 2: Okay so I took a look at your staging site and think I've found the issue. You begin by having a form similar to the one in the question on this topic, but you then "replace" that form with a new form containing now a "#score" element (input type='submit').

You are applying your jquery event handler on document load but at that time the #score element does not yet exist in the DOM because you have not loaded it yet.

You believe you are running the script inside $("#score").click but in fact the page is simply using default behavior of a form with no action and a submit button.

To correct this issue you need to apply the event handler at either a higher level in the DOM tree OR you can do some easier way just to test if this is the problem

Please try this in your first #submitbuttonclick handler

$("#submitButton").click(function(event){
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var formdata = $('form').serialize();
    $.post('grader.php', formdata, function(data , status){
        $('ul').css('display', 'none');
        $('#result').fadeIn().html(data);
        //Here add the handler for #score click
        $("#score").off("click").on("click", function(event){
            //Insert code snippet shared above here
        });
    });
});

What this will do is bind the click event on the #score submit button after it has been written into the DOM. In case the script executes more than once we do not want the handler to fire multiple times, which is why we first call "off".

Hope this helps.

Upvotes: 2

Related Questions