Ajax Jquery php form

i am trying to get the message inside the (ack div) without refreshing the page I have following code

index.php index page is the page which contain form and css file

contact form body{ background:#eee;} .errors{color:red; margin:4px; font-style:italic; } label{ display:block; }

#container{
margin:auto;
width:800px;
padding:15px;
background:white;
border-radius:5px;

contact form body{ background:#eee;} .errors{color:red; margin:4px; font-style:italic; } label{ display:block; }

#container{
margin:auto;
width:800px;
padding:15px;
background:white;
border-radius:5px;
}

input[type=text], input[type=email]{
width:200px;
padding:5px;
margin-right:4px;
}

<?PHP if(isset($errors)){} ?>
NAME:
EMAIL:
MESSAGE:

<?php if($_POST) { $errors = array(); $name = $_POST['name']; $email = $_POST['email']; $comment = $_POST['comment']; $emailReg = '/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ '; if(!($name) || !($email) || !($comment)){ if(!$name){ $errors[]="Missing Name"; } if(!$email){ $errors[]="Missing Email"; } if(!$comment){ $errors[]="Missing Comment"; } }elseif(!preg_match($emailReg,$email)){ $errors[] = "Not a valid email address"; } if(count($errors) == 0){ $errors = "No errors found"; } else{ $output = ""; foreach($errors as $error){ $output .= "

$error

"; } } } ?>

*********************************************************************************8

Confused on your code.

You set up a form that never gets posted.
You call an external PHP page that uses $_POST, but, they never are created.
At the end of your JQuery code you post the form, but, the form is set up to not go anywhere,
so that never happens…

Not sure on what you want this to do. But, let’s talk about posting forms. (Sorry if I am to simple here…)
First, a form is HTML. JQuery can use the current values inside the current page. Any data inside the form
can be used or sent out to an external file. But, if you want to send data inserted into form fields, you must
send them to the file somehow. Either enter the field’s in the posting command or pass them as $_GET
arguments. The easiest way is just to add them when you POST the external file. You almost have that
set up now.

So, your post code is currently like this:
[php]
$.ajax({
type: ‘POST’,
url: ‘test.php’,
data: input_data,
dataType: ‘json’,
success: function( msg ) {
$("#ack").html(msg);
},
error: function() {
$("#ack").html(‘ERROR!’);
}
});
$(’#contactform’).submit();
[/php]
The last line is not needed as far as I can see.
Now, note the line
data: input_data,
What this means is that you are posting the “input_data” to your test.php file.
So, that is the only thing that you can send to it.
If you replace this with:

[php]
data:
{
name:“Ernie”,
email:“[email protected]”,
comment:“This is valid data to send in the POST format”
},
[/php]
This sample will send out three $_POST[] variables with data inside it. Test it and you should post the data I entered.
Now, to finish this up, you would would have to replace my data with the live field values on the page.
Something like this:
[php]
data:
{
name:"$(’[name=name]’).val",
email:"$(’[name=email]’).val",
comment:"$(’[name=comment]’).val"
},
[/php]
As you see, this sends the data from the form fields to the test.php file.
(Not tested live as I just do not have time now. Try it and post any errors and I will help further tomorrow!)
Good luck…

One more comment on your code. Since you are using JQuery to validate your form, why don’t you just use an “ALERT” to tell the user he forgot his name or whatever. Just an idea…

Sponsor our Newsletter | Privacy Policy | Terms of Service