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.

[Mikeplyts]

Huh? What exactly are you trying to use jQuery in the contact form? You don't really need jQuery for a contact form; you need PHP and if you were thinking of using it for real time errors, you need to use AJAX.

Also, I don't even see a script tag in your head tags that even calls jQuery.

CODE

<script type="text/javascript" src="path/to/jquery.js"></script>

path/to/ would be the path (directories, respectively) to where the jQuery file is located. And to get the form working, you need form tags. The input tags and input button won't work unless you have an action to call on to submit. You also have to add name properties to your input fields so a .PHP file can read it and submit it and for properties to your label tags (for valid XHTML, or whatnot).

So, this:

CODE

<div class="contact_form">
<div class="form_row">
<label class="contact">name:</label>

<input type="text" class="contact_input" />
</div>

<div class="form_row">
<label class="contact">email:</label>
<input type="text" class="contact_input" />
</div>

<div class="form_row">
<label class="contact">phone:</label>

<input type="text" class="contact_input" />
</div>


<div class="form_row">
<label class="contact">message:</label>
<textarea class="contact_textarea" rows="" cols="" ></textarea>
</div>


<div class="form_row">
<input type="image" src="images/send.gif" class="send"/>
</div>
</div>

should be:

CODE

<div class="contact_form">
<form method="POST" action="contact.php" enctype="multipart/form-data">
<div class="form_row">
<label class="contact" for="name">name:</label>
<input type="text" class="contact_input" name="name" />
</div>

<div class="form_row">
<label class="contact" for="email">email:</label>
<input type="text" class="contact_input" name="email" />
</div>

<div class="form_row">
<label class="contact" for="phone">phone:</label>

<input type="text" class="contact_input" name="phone" />
</div>


<div class="form_row">
<label class="contact" for="message">message:</label>
<textarea class="contact_textarea" rows="" cols="" name="message" ></textarea>
</div>


<div class="form_row">
<input type="image" src="images/send.gif" class="send"/>
</div>
</form>
</div>

Ok, so let me run this down a bit.

• Red: This is some of the basic, essential things you need in a form. The form tags say that data is to be submitted, the name properties in the input fields specify a unique field so PHP coding can submit each field accordingly, and the for tags are for labeling each unique field with a name property (but this is usually just for proper, valid XHTML coding).
• Blue: This is the .PHP file to be called upon to process the data and submit it. contact.php can actually have any name you want, as long it's a .PHP file and it has the proper PHP coding within it to process the submitted data from the form.
• Green: This are basically fillings for the for and name properties that specify each field respectively.

So, this is bascially what contact.php would look like: (in perspective of the XHTML I shared with you earlier, and I also added some comments to help you out a bit.)

CODE

<?php
// Define variables according to parameters
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message']

// Define a variable to count how many fields were submitted (posted)
$count = count($_POST);

// Now, if the count of the field submitted is greater than zero (or, not empty), submit the form
if ($count > 0) {
// Let's check for some errors. All of this simply checks if all fields are empty or if at least one of them are empty, and if so, redirect to an error page (which you should make).

if ((!$name && !$email && !$phone && !$message) || (!$name || !$email || !$phone || !$message)) {
header ('Location: http://www.hannibalinfo.com/error.html');
}

// Now, if there aren't any errors with null or empty fields, check also if the email address is valid.

else if (!$email == "" && (!strstr($email,"@") || !strstr($email,"."))) {
header ('Location: http://www.hannibalinfo.com/error.html');
}

// Otherwise, submit the data and mail it to an email address.
else {
// Define the neccessary variables needed to email a message.
$to = 'contact@hannibalinfo.com';
$subject = 'New Message';
$message = "A new message has arrived. Refer below to read it.\n\n\"$message\"\n\n";
$from = "From: $name $email\r\n";

// Now, use the mail function to send the message contents and information.
mail ($to, $subject, $message, $from);

// Once finished, redirect to a success page (which you should make as well).
header ('Location: http://www.hannibalinfo.com/success.html');
}
}

// Just in case error checking for empty fields didn't work, redirect to error page.
else {
header ('Location: http://www.hanibbalinfo.com/error.html');
}
?>

As far as jQuery goes, I'm not sure what you really need for that. I mean, you could use AJAX to check for errors in real time (without going to another page or refreshing the page) and probably use jQuery on the side as well to animate the errors. Otherwise, there's not really a need for it.