Help with jquery Options

[marynmissouri]

I have a website I'm uploading and it has a contact form and a jquery file but I cant seem to get the contact form to work? Should I upload it into a different folder then the website folder. Here is the contact form link.

[fixtatik]

Hrm, well...a bit on Mike's post.

- You don't really need to use the "multipart/form-data" enctype value unless you're uploading images.
- The "for" value on input fields isn't necessary, unless you want to click on the label and have the cursor focus on the input field. In which case, the id of the input needs to be the same as the for of the label:

CODE

<label for="form-name">Name</label> <input id="form-name" />

As for using jQuery to help process a form, start by including the jQuery file in your document, as Mike said. You'll also need to write a bit of extra JavaScript to trigger AJAX events, specifically, the "click()" and "ajax()" functions. As a quick example:

CODE

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { // This initiates functions when the document finishes loading
$('#submit') // This tells jQuery to listen for actions on the element with the "submit" ID
.click(function() { // jQuery listens for when the "submit" button is clicked

// For each of the variables, you're telling jQuery to get the value
// of the input field with a certain name
var name = $('input[name=name]').val();
var email = $('input[name=email]').val();
var phone = $('input[name=phone]').val();
var message = $('textarea[name=message]').val();

// This is where you'll send the data to the server
$.ajax({

// This is the URL that processes the form data
url : 'send.php',

// This is the submit method you'll use
type : 'POST',

// This sends the data, which is a compilation
// of the variables you defined earlier
data : 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message,

// This is the function to run if the submission was successful
// If it was successful, "html" will have a value of 1
success: function(html) {
// If it was successful, hide the form and show the success message
if(html == 1) {
$('#form, #error').hide('slow');
$('#done').html('Type your success message here.').show('slow');
}
// If it was unsuccessful, show the error message
else $('#error').html('Type your error message here.').show('slow');
}

});

});
});
</script>

You can tweak it to your liking, but the *very* basic setup of the form could look like this:

CODE

<p id="error" style="display:none;"></p>
<p id="done" style="display:none;"></p>
<form id="form">
<p><label>Name:</label> <input name="name" /></p>
<p><label>Email:</label> <input name="email" /></p>
<p><label>Phone:</label> <input name="phone" /></p>
<p><label>Message:</label> <textarea name="message"></textarea></p>
<p><input id="submit" type="submit" /></p>
</form>

You don't need an action or method for the form, because you're submitting the data with jQuery. It won't validate, though, and it also won't work for people without JavaScript enabled, so you may want to cover all your bases.

The "error" and "done" elements are hidden to start. When a user clicks on the submit button (with an id of "submit"), the JavaScript functions are run. If the AJAX results in an error (i.e., something wrong happened in your "send.php" file), the "error" element is shown. If the "send.php" file returns successfully, the form and error elements are hidden, and the "done" element is shown.

As for the contents of the send.php file, basically what Mike gave you, sans the redirects (you just want it to return false, not go through extra actions).