Question

I found this code and am trying to adjust it to the way I need. I really have no knowledge of javascript/jquery so I would like some assistance.

Code:

$(document).ready(function() {

    //if submit button is clicked
    $('#submit').click(function () {        

        //Get the data from all the fields
        var name = $('input[name=name]');
        var email = $('input[name=email]');
        var website = $('input[name=website]');
        var comment = $('textarea[name=comment]');

        //Simple validation to make sure user entered something
        //If error found, add hightlight class to the text field
        if (name.val()=='') {
            name.addClass('hightlight');
            return false;
        } else name.removeClass('hightlight');

        if (email.val()=='') {
            email.addClass('hightlight');
            return false;
        } else email.removeClass('hightlight');

        if (comment.val()=='') {
            comment.addClass('hightlight');
            return false;
        } else comment.removeClass('hightlight');

        //organize the data properly
        var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' + 
        website.val() + '&comment='  + encodeURIComponent(comment.val());

        //show the loading sign
        $('.loading').show();
        //start the ajax
        $.ajax({
            //this is the php file that processes the data
            url: "process.php", 

            //GET method is used
            type: "POST",

            //pass the data         
            data: data,     

            //Do not cache the page
            cache: false,

            //success
            success: function (html) {              
                            $('.loading').hide();
                //DISPLAY RECEIVED CONTENT FROM "process.php" IN DIV NAMED "done"       

            }       
        });

        //cancel the submit button default behaviours
        return false;
    }); 
});

This is the previous code that I removed from the success part:

success: function (html) {              
                //if process.php returned 1/true (send mail success)
                if (html==1) {                  
                    //hide the form
                    $('.form').fadeOut('slow');                 

                    //show the success message
                    $('.done').fadeIn('slow');

                //if process.php returned 0/false (send mail failed)
                } else alert('Sorry, unexpected error. Please try again later.');               
            }

Upon getting the info, process.php would respond “1” and the form would fade out and the text in div “done” would fade in.

process.php is basically: (just sending back the data it received for testing purposes)

$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];

echo "$name<br>$email";

Like I said I know nothing of javascript, jquery, so any help would be appreciated.

Thanks.

Answer 1

if you are receiving html you can do

success: function (html) {  
 $('.loading').hide(); 
$(".done").html(html).fadeIn('slow');
}

i think you need to echo something like

echo $name."<br/>".$email;

to reset the form assuming myform is the id of your form

$(':input','#myform')
 .not(':button, :submit, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

ref: Resetting a multi-stage form with jQuery