CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
user3186034
user3186034

Reputation: 43

Ajax form submission reloads the page

Page reloads after form submission, and i want it not to reload. Update: With answers below i came up With the code below. What happens is form submits correctly, but the page reloads. Before, this line of code worked fine: 

$(document).ready(function() { 
    $('#poll').ajaxForm(function() { 
        $("#polling_id").load("poll_results.php");
    }); 
});

Today i have added .htaccess to remove .php extensions. Could that have affected this someway?

HTML

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></SCRIPT>
</head>
<div class="polling" id="polling_id">
    <br><br>    

    <form id="poll_form" method="POST" action="process-vote.php" />
    <div class="poll_objects">
        <input type="hidden" name="o1" value="<?php echo $option1; ?>" />
        <input type="hidden" name="o2" value="<?php echo $option2; ?>" />
        <input type="hidden" name="o3" value="<?php echo $option3; ?>" />
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
        <div class="float_buttons">
            <input type="submit" name="submit_vote" value="Vote!" class="button" />
            <input type="submit" name="results" value="Poll Results" class="button"/>
        </div>
    </div>
</div>
</form>

jQuery:

<script> 
    $(document).ready(function() {         
        $.ajax({    
            $('#poll_form').submit(function(e) {
                e.preventDefault();
                // note where the e comes from.
                var a = $(this).serialize();
                $("#polling_id").load("poll-results.php");
            });
        });    
    });
</script>

Upvotes: 0

Views: 157

Answers (2)

Taz
Taz

Reputation: 78

You can also put :

<script>
   function validate()
   {
     ...
        blablabla
     ...
     return false; // This cause the submit function to be stopped.
   }
</script>
<form onClick="validate()">

Upvotes: 0

Ryan
Ryan

Reputation: 14649

It doesn't look like you are capturing an event.

$('#poll_form').submit(function(e) {
   e.preventDefault();
   // note where the e comes from.
   var a = $(this).serialize();
   // now do your ajax stuff here.
});

Upvotes: 3

Related Questions