CODEWITHSUNDEEP
phpajaxjquery
Tom
Tom

Reputation: 147

Reloading Forms With Ajax

I have PHP code that generates forms. I want to be able to reload a form with Ajax once the user clicks the submit button. This should reload the form the user was just typing on. I have this code:

PHP:

<?php
$html = <<<HTML
<form id="myform" method="post">  
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
    <input type="submit" name="submit" value="Submit"> 
</form>
HTML;

echo $html;
echo rand(1, 10);
?>

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            debug: false,
            rules: {
                name: "required",
            },
            messages: {
                name: "Please fill in answer.",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>
</head>
<body>
<div id="results">
<?php require_once('process.php'); ?>
</div>
</body>
</html>

Unfortunately, the whole page will reload after using it once. The only way I found to fix this is to put <?php require_once('process.php'); ?> outside the <div id="results"> which causes two forms appear. Is there any way to fix this? Also, I use this jquery plugin: http://jqueryvalidation.org/

Upvotes: 0

Views: 104

Answers (2)

mgrueter
mgrueter

Reputation: 1420

The form looses it's EventListener upon replacing it with the new form you're getting from you PHP backend.

So you either have to re-initialize the plugin (by calling $("#myform").validate({}); again after you get the new form from your AJAX post) or set the event listener to a parent DOM element (e.g. wrap you form in a <div id="form-container">..</div>) and replace the content of the container.

Try the following in your JS:

$("#results").on('submit', '#myform', function(e) {

   e.preventDefault();

   $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
        },
        messages: {
            name: "Please fill in answer.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });

    return false;

  });

Edit: Just saw that you're using jQuery 1.4.2. To be able to use on() you would have to include at least jQuery 1.7, or use live():

$("#results").live('#myform', 'submit', function(e) { //the rest of your stuff });

Upvotes: 1

Hamed Khosravi
Hamed Khosravi

Reputation: 545

use jqueryForm plugin. After this you can use ajaxSubmit. Jquery Form Plugin

Upvotes: 0

Related Questions