CODEWITHSUNDEEP
phpajaxjquery
Marco
Marco

Reputation: 867

submit form using Jquery Ajax Form Plugin and php?

this a simple example in how to submit form using the Jquery form plugins and retrieving data using html format html Code

<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> 
 // prepare the form when the DOM is ready 
    $(document).ready(function() { 
        // bind form using ajaxForm 
        $('#htmlForm').ajaxForm({ 
            // target identifies the element(s) to update with the server response 
            target: '#htmlExampleTarget', 

            // success identifies the function to invoke when the server response 
            // has been received; here we apply a fade-in effect to the new content 
            success: function() { 
                $('#htmlExampleTarget').fadeIn('slow'); 
            } 
        }); 
    });
    </script> 
</head> 
<body>
<form id="htmlForm" action="post.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>

PHP Code

<?php 
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>'; 
?>

this just work fine what i need to know if what if i need to Serialize the form fields so how to pass this option through the JS function also i want show a loading message while form processed how should i do that too thank you

Upvotes: 0

Views: 4110

Answers (3)

pocesar
pocesar

Reputation: 7050

Phery library does this behind the scenes for you, just create the form with and it will submit your inputs in form automatically. http://phery-php-ajax.net/

<?php 
  Phery::instance()->set(array(
    'remote-function' => function($data){
       return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow');
    }
  ))->process();
?>
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function">
  Message: <input type="text" name="message" value="Hello HTML" /> 
  <input type="submit" value="Echo as HTML" /> 
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>

Upvotes: 0

Priyank Kapasi
Priyank Kapasi

Reputation: 1783

The answer posted by Shyju should work just fine. I think the 'dat' should be given in quotes.

$.post("post.php", { 'dat': serializedData},function(data) {

...

}

OR simply,

$.post("post.php", serializedData, function(data) {

 ...

}

and access the data using $_POST in PHP.

NOTE: Sorry, I have not tested the code, but it should work.

Upvotes: 0

Shyju
Shyju

Reputation: 218732

To serailize and post that to a php page, you need only jQuery in your page. no other plugin needed

  $("#htmlForm").submit(function(){

     var serializedData= $("#htmlForm").serialize();
     $.post("post.php", { dat: serializedData},      function(data) {
        //do whatever with the response here
     });

  });

If you want to show a loading message, you can do that before you start the post call. Assuming you have div with id "divProgress" present in your page

HTML

<div id="divProgress" style="display:none;"></div>

Script

$(function(){
  $("#htmlForm").submit(function(){

     $("#divProgress").html("Please wait...").fadeIn(400,function(){  

        var serializedData= $("#htmlForm").serialize();
         $.post("post.php", { dat: serializedData},function(data) {
           //do whatever with the response here
          });

        });    
  });
});

Upvotes: 2

Related Questions