Home/ Questions/Q 7659047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:16:52+00:00

this a simple example in how to submit form using the Jquery form plugins

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
          });

        });    
  });
});
    • 0