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.

[marynmissouri]

Thanks for the info. I'm going to work on it today. *smiles*

[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).

[Mikeplyts]

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).

/facepalm

[fixtatik]

Son, your face must be stinging red by now. :P

[marynmissouri]

I'm so confused right now? I do have a jquery doc in my file and I had assumed that all I would have to do is to upload the index.html doc and the images file and jquery file to get it to work. It is an html layout. So what is said is that I have to do all of these changes to get the contact form and newsletter form to work?

[Mikeplyts]

You don't just upload the files, though. You have to execute them, too. So, inserting the proper coding and different methods Elia (fixtatik) and I shared with you above, you should get it to work. Make sure to read thoroughly, and if you still don't understand, it'd be nice if you could tell us exactly what specific part you're having trouble with.

By the way, Elia, it's actually more of a light scarlet.

[marynmissouri]

I'm new at this so please be patient with me...

Mike, I added your php and uploaded a contact.php you can view it here Now as far as the jquery goes I have 2 files of jquery. One in my file folder were the index and other pages and the name for that file is unitpngfix as I'm thinking this is for the top of the page were the main menu is.

The second one is in a file named .js That whole function file is here



As for adding the jquery, I tried adding it in between the

CODE

<!--[if IE 6]>
    <script type="text/javascript" src="unitpngfix.js"></script>

<![endif]-->

The code showed up at the top of my page when I uploaded it so I removed it.

Also where do I upload the jquery files to? Do I upload them to my cgi bin also when I upload them to my regular files or no?

Also don't I have to put an email in somewhere so I receive the information from the contact form?

Sorry for all of the questions but I have gotten use to using worpress plugins for all of this and now I'm having to do it manually.

I also appreciate all of the help.

[Mikeplyts]

Oh, be sure that contact.php is only PHP code, no HTML or CSS. As for the script tag, don't put it in between:

CODE

<!--[if IE 6]>
<![endif]-->

tags because that means that if the browser is Microsoft Internet Explorer 6, it will use that unitpngfix Javascript file to render .PNG type images correctly. The jQuery script tag:

CODE

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

should be outside of those IF tags above because if you put them in there, then jQuery will only be called if the browser is Microsoft Internet Explorer 6 (which by the way, is very uncommon to have).

What jQuery files are you talking about? Please be more specific on that (file names and such).

As for the e-mail address to receive messages, I think I've already done that in the contact.php PHP coding that I gave you. It was defined in the variable $to and then used in the mail() function (which sends the e-mail and message information).

This is the e-mail address to use:

CODE

$to = 'contact@hannibalinfo.com';

Then, that variable is used in the mail() function which processes the information into an e-mail client:

CODE

mail ($to, $subject, $message, $from);

[marynmissouri]

Thanks Mike, I appreciate all of the help. I will work on it some more.

[Mikeplyts]

Yep, no problem.

[manny-the-dino]

Topic Closed, and Moved to Resolved Topics. Please PM a moderator if you would like this reopened.