CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user3186034
user3186034

Reputation: 43

After ajax form submission, the page reloads when it's not supposed to

I want voting form (in index.php) to submit without the page reload and get results from external page in index.php

HTML

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.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>

Ajax

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

Looking at this coding, for me it seems everything is correct. However the page opens the action page of the form. Please provide help.

Upvotes: 0

Views: 804

Answers (2)

Jo&#227;o Pinho
Jo&#227;o Pinho

Reputation: 3775

First of all your code does not compile, because you are not doing an ajax call, you are passing a form submit to an object literal which will cause an error after the execution of form submit, that why your form is reloading.

<script> 
   $(document).ready(function() { 
      $.ajax({  //this is object literal notation and you are returning a function value to it... doesn't make any sense.

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

      });
   });
</script>

Also an ajax call should look like this:

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

See this link it's all here.

Also if you are trying to perform a load of data based on the jquery.load you shouldn't perform a submit, but you can send data within your load request:

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});

Here you are passing parameter limit, but you can be passing name, address, age, etc.

See load documentation here, there is no need for you to perform a submit.

Regards.

Upvotes: 1

kgd
kgd

Reputation: 1665

Just remove the ajax call and try if it works

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

Upvotes: 0

Related Questions