Form Submission

irishpeck · December 22, 2010

Hi Guys i have a form on the website http://www.wewilbuyyourcar.ie this is a html form that i need to validate and submit and then show a certain page. I think everything is working except for the js any ideas?

This is my form!!

<div id="contact_form">
					  <form id="contact" action="process.php">
						<fieldset>


<TR><TD><TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="50%">

<FORM ACTION="" METHOD="post" name="sellcarform" onsubmit="" >
<TR><TD CLASS="tableBlueBody" ALIGN="right">* <B>First Name</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT  TYPE="Text" NAME="firstname" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Last Name</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><INPUT TYPE="Text" NAME="lastname"  MAXLENGTH="150"></TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right"><B>Address</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT TYPE="Text" NAME="AddressLine1" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Email</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><INPUT TYPE="Text" NAME="email" MAXLENGTH="150"></TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right"><B>City</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT TYPE="Text" NAME="City" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Phone</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><INPUT TYPE="Text" NAME="phone" MAXLENGTH="150"></TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right"><B>Country</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left">


<select name="CountryID">

	<option value="1"

	>Albania</option>

	<option value="2"

	>Algeria</option>

	<option value="3"

	>American Samoa</option> etc...

</select>


</TD><TD CLASS="tableBlueBody" ALIGN="right"><B>Fax</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><INPUT TYPE="Text" NAME="fax" MAXLENGTH="150"></TD></TR>

<TR><TD COLSPAN="4" CLASS="tableBlueBody"> </TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right" VALIGN="top">


<B>Comments</B>





</TD><TD COLSPAN="3" CLASS="tableBlueBody" ALIGN="left">

<TEXTAREA NAME="comment" ROWS="7" COLS="45" ></TEXTAREA>


</TD></TR>

</TD><TD COLSPAN="5" CLASS="tableBlueBody" ALIGN="left">


<TR><TD CLASS="tableBlueBody" ALIGN="right">* <B>Registration Number</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT  TYPE="Text" NAME="regnumber" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Colour</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><INPUT TYPE="Text" NAME="colour"  MAXLENGTH="150"></TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right">* <B>Car Make</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT TYPE="Text" NAME="carmake" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Has the vehicle been used as a taxi?</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><input type='radio' value="Yes" name='question1' /> Yes <input name='question1' type="radio" value="No" checked /> No</TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right">* <B>Model</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT TYPE="Text" NAME="model" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>Is finance outstanding on the vehicle?</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><input type='radio' value="Yes" name='question2' /> Yes <input name='question2' type="radio" value="No" checked /> No</TD></TR>
<TR><TD CLASS="tableBlueBody" ALIGN="right">* <B>Milage / Kms</B></TD><TD CLASS="tableBlueBody" STYLE="border-right : 1px solid #CCCCCC;" ALIGN="left"><INPUT TYPE="Text" NAME="milage" MAXLENGTH="150"></TD><TD CLASS="tableBlueBody" ALIGN="right">* <B>How did you hear about us?</B></TD><TD CLASS="tableBlueBody" ALIGN="center"><select name="question3"><option value="Other">Other</option><option value="Web">Web</option><option value="Newspaper">Newspaper</option><option value="Radio">Radio</option><option value="Recommended">Recommended</option></select></TD></TR>
<TR><TD COLSPAN="2" CLASS="tableBlueBody" STYLE="border-bottom : 1px solid #CCCCCC; border-right : 1px solid #CCCCCC;"> </TD><TD COLSPAN="2" CLASS="tableBlueBody" STYLE="border-bottom : 1px solid #CCCCCC;"> </TD></TR>



<TR><TD COLSPAN="4" ALIGN="left"><input type="submit" value="Click here to send us your information" class='contactFormSubmit'></TD></TR>
</FORM></TABLE>
</TD></TR></TABLE><BR></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH="8" HEIGHT="1" BORDER="0" ALT=""></TD>
<TD WIDTH="183" VALIGN="top">
</TD></TR></TABLE>

						</fieldset>
					  </form><br />
				</div><!-- end of #contact_form -->

This is my process.php file!!

<?php 
    $emailTo = 'sakura-designs@hotmail.com';
    $subject = 'We Will Buy Your Car.ie Form Submission';
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];
    $email=$_POST['email'];
    $AddressLine1=$_POST['AddressLine1'];
    $City=$_POST['City'];
    $phone=$_POST['phone'];
    $CountryID=$_POST['CountryID'];
    $fax=$_POST['fax'];
    $comment=$_POST['comment'];
    $regnumber=$_POST['regnumber'];
    $colour=$_POST['colour'];
    $carmake=$_POST['carmake'];
    $question1=$_POST['question1'];
    $model=$_POST['model'];
    $question2=$_POST['question2'];
    $milage=$_POST['milage'];
    $question3=$_POST['question3'];
    
    $body = "First Name: $firstname \n\nLast Name: $lastname \n\nEmail: $email \n\nAddress: $AddressLine1 \n\nCity: $city \n\nPhone: $phone \n\nCountry: $CountryID \n\nFax: $fax \n\nComment: $comment \n\nReg Number: $regnumber \n\nColour: $colour \n\nCar Make: $carmake \n\nQuestion1: $question1 \n\nModel: $model \n\nQuestion2: $question2 \n\nMilage: $milage \n\nQuestion3: $question3";
    $headers = 'From: '.$name.' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
    
    mail($emailTo, $subject, $body);
    header( "Location: http://www.wewillbuyyourcar.ie/thankyou.html" );
?>

And this is my contact1.js file!!

$(document).ready( function() {
$('.error').hide();
$('.but').click( function() {

	var fname = document.getElementById('firstname');
	var lname = document.getElementById('lastname');
	var email = document.getElementById('email');
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	var AddressLine1 = document.getElementById('AddressLin1');
	var city = document.getElementById('city');
	var phone = document.getElementById('phone');
	var CountryID = document.getElementById('CountryID');
	var fax = document.getElementById('fax');
	var comment = document.getElementById('comment');
	var regnumber = document.getElementById('regnumber');
	var colour = document.getElementById('colour');
	var carmake = document.getElementById('carmake');
	var question1 = document.getElementById('question1');
	var model = document.getElementById('model');
	var question2 = document.getElementById('question2');
	var milage = document.getElementById('milage');
	var question3 = document.getElementById('question3');

	if(fname.val() != '' && lname.val() != '') {
		if(email.val() != '' && emailReg.match.exp) {
			if(comment != '') {
				$('#comment_error').show();
				comment.focus();
				return false;
			} else {

				var dataString = 'name='+ fname + lname +'&email=' + email + '&comment=' + comment;
				//alert (dataString);return false;

  				$ajax({
     					 type: "POST",
     					 url: "process.php",
     					 data: dataString,
     					 success: function() {
     					   $('#contact_form').html("<div id='message'></div>");
     					   $('#message').html("<strong>Contact Form Submitted!</strong>")
     					   .append("<p>We will be in touch soon.</p>")
     					   .hide()
     					   .fadeIn(1500, function() {
     					     jQuery('#message');
     					   });
     					}
    				});

			}
		} else {
			$('#email_error').show();
			email.focus();
			return false;
		}
	} else {
		$('#name_error').show();
		fname.focus();
		return false;
	}

});

});

Thanks for all your help in advance and Merry Christmas

trq · December 22, 2010

.val() is a jQuery method yet fname etc etc are not jQuery objects.

Instead of....

var fname = document.getElementById('firstname');

Use....

var fname = $('#firstname');

This will ensure that fname etc etc are jQuery objects.

Your code is a pretty good mismatch of vanilla js and jQuery.

irishpeck · December 22, 2010

Hey thanks ive done that and its still not submitting any ideas on how to just get the form to submit to my designated email address for the time being. Il worry about the validation later i just need to get it submitting now. And thanks so much in advance i appreciate all the people on this helping us "Noobs"

trq · December 22, 2010

It should just be submitting anyway, (after looking a little closer) there is nothing in your code that will trigger the js.

irishpeck · December 22, 2010

Its submitting now but its not passing any of the values to my email its just showing blanks beside first name, last name etc.??

Sign In

Form Submission

Recommended Posts

irishpeck

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

irishpeck

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

irishpeck

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information