• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 667
  • Last Modified:

jquery or json form stay on page when submitted

I have a form that uses Jquery to show a message for

*field required error message

I am trying to get it to show a success message if the form is submitted on the same page.
I know json can be used, but do not know where to start with json.

The form submits as long as the req fields are filled in.

Does anyone know how I can modify this code to show the "success" div if all the "req" fields are filled out just like the ".req" shows if the fields are empty.

** notes
in the php, I currently redirect to thanks.php for valid and spam.php for honeypot filled in

My brain is fried today.


$(function() {
       function validateform() {
          var valid = true;
          $(".req").css("border","1px solid #ccc");
          $(".req").each(function() {
             if ( $(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0 ) {
                $(this).css("border","1px solided");$(".required").css("display","block");
                valid = false;
          return valid;
       $("#submit").click( function() {
          $('#myform').submit( validateform );

Open in new window

    // Clean up the input values
    foreach ( $_POST as $key => $value ) {
      if ( ini_get('magic_quotes_gpc') )
        $_POST[$key] = stripslashes( $_POST[$key] );

      $_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));

    // Honeypot don't send
    if ( !empty($_POST["confirm_email"] ) ) {

    // Assign the input values to variables for easy reference
    $name = $_POST["name"];
    $email = $_POST["email"];
    $confirm = $_POST["confirm_email"];
    $phone = $_POST["phone"];
    $message = $_POST["message"];
    $mls = $_POST["mls"];

    // Send the email *****************************
    $to = "email@mywebsite.com"; 
    $subject = "Website message: $name";
    $message = "MLS Listing:\n$mls\n\nFrom:\n$name\n\nEmail:\n$email\n\nPhone:\n$phone\n\nMessage:\n$message";
    $headers = "From: $email";

    mail($to, $subject, $message, $headers);
echo("<script>location.href = 'thanks.php';</script>");


Open in new window

<form class="myform" id="myform" name="myform" action="process.php" method="post">

<div class="required">Red Highlights are required</div>

<div class="success">This is where the Succcess message is!</div>

<label>Name</label><input id="name" name="name" class="req" type="text"/>

<label>Email</label><input id="email" name="email" class="req" type="email" />

<label class="confirm_email">Confirm Email</label><input id="confirm_email" name="confirm_email" class="confirm_email" type="email" class="req2"/>

<label>Phone</label><input id="phone" name="phone" type="tel" />

<label>Message</label><textarea id="message" name="message" type="text" class="req"></textarea>

<input id="mls" name="mls" class="mls" value="MLS1234567" />

<input type="submit" id="submit" value="Submit Message" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="form.js"></script>

Open in new window

1 Solution
Alexandre SimõesManager / Technology SpecialistCommented:
So the basic idea is that you don't actually submit the form.
You should serialize the form (to json) and perform an Ajax POST with the information, handling the success or error callbacks and behave as you wish. In your case showing a success message and probably redirecting out of there after right?

So the code for the save button (normal button, not a submit) click should be something like:

var form = $("#myform");
var url = form.attr("action");
var formData = form.serialize();

	type: 'POST',
	data: formData,
	url: url,
    error: function(xhr, textStatus, err) {
        // something wrong happen
    success: function(data) {
        // show your success message
        // and get out of here to prevent the user to submit again

Open in new window

Chris StanyonCommented:
Your validateform function is already returning true or false, so use that to see if all the values are filled in. If they are, then post your form through ajax and deal with the response. Bear in mind though that if your response is creating a redirect, then the success message won't be displayed (you'll have redirected!). Normally I would suggest you drop the redirect and just inject a 'Thanks for your form' kind of message:

$("#myform").submit(function(e) {

	//prevent the submit from firing - we'll do this with ajax!
	if (validateform()) {
		//the form is valid, so let's send it.
		myForm  = $(this);
		url = myForm.attr('action');
		data = myForm.serialize();

		//send the form data as an AJAX request
			url : url,
			data : data,
			type: 'post'
		.done(function() {
			//all done
			$('<div>').html('Thanks for sending your form!').appendTo(myForm);

Open in new window

mewebsAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now