jquery with a form tutorial
Here is a quick and easy jquery tutorial when using forms. Using this jquery method will send data without sending the user away from the current page. You should have allready included jquery in your html file. here is how to create a jquery form. Firstly, let’s create a form in your page:
<form id=”myform” action=”#”>
<input id=”name” name=”name” type=”text” /><label for=”name”>Name</label><br/><input id=”email” name=”email” type=”text” /><label for=”email”>Email</label><br/>
<input id=”message” name=”message” type=”text” /><label for=”message”>Message</label><br/>
<input type=”button” name=”submit” id=”submit” value=”Submit”/>
</form>
Now, in the <head> tag of this file, add the following:
<script type=”text/javascript”>
$(document).ready(function(){
$(“#submit”).click(function(){
var nameVal = $(“#name”).val();
var emailVal = $(“#email”).val();
var messageVal = $(“#message”).val();
$.post(“send.php”,
{ name: nameVal, message: messageVal, email: emailVal }, function(data){
$(“#myform”).after(‘Success.’);
});
}
);
</script>
Then, create a php file and name it send.php, this should be in name directory as the html file with the form. that jquery will send the form data to.
<?php
$emailTo = “youremail@myemail.co.uk”;
$name = $_POST['name'];
$email = $_POST['email'];
$message= $_POST['message'];
mail($emailTo, testemail, $message.”From: “.$email);
?>
This will email the content of the form to your address, without having to navigate away from the page. This is a very brief example, but gives you a taste of what jquery can do with forms.