Contact Forms in PHP & jQuery -

Contact Forms in PHP & jQuery -

i have 2 forms on website. first general quick contact form 4 fields, validated , mail service via php. sec 4 step process form, each process hidden until finish , validated , processed jquery.

the problem have when activate js script, first (quick contact) form not submit , vice versa.

i know staring me in face, can't seem work.

code first form

<div class="form-wrapper"> <p id="req-field-desc"><span class="required">*</span> indicates required field</p> <?php //init variables $cf = array(); $sr = false; if(isset($_session['cf_returndata'])){ $cf = $_session['cf_returndata']; $sr = true; } ?> <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>"> <li id="info">there problems form submission:</li> <?php if(isset($cf['errors']) && count($cf['errors']) > 0) : foreach($cf['errors'] $error) : ?> <li><?php echo $error ?></li> <?php endforeach; endif; ?> </ul> <p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">your message has been submitted successfully</p> <form id="contact-form" method="post" action="process.php"> <label for="name">name: <span class="required">*</span></label> <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="john doe" autofocus> <label for="email">email address: <span class="required">*</span></label> <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com"> <label for="telephone">telephone: <span class="required">*</span></label> <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>"> <label for="message">message: <span class="required">*</span></label> <textarea id="message" name="message" placeholder="your message must greater 20 charcters" data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea> <span id="loading"></span> <div class="margin-auto"> <button class="button button-primary button-small" type="submit" id="submit" value="">submit form</button> </div> </form> <?php unset($_session['cf_returndata']); ?> </div>

and php validates

<?php if( isset($_post) ){ //form validation vars $formok = true; $errors = array(); //submission info $ipaddress = $_server['remote_addr']; $date = date('d/m/y'); $time = date('h:i:s'); //telephone validation array $telephone = array( '555-555-5555', '5555425555', '555 555 5555', '1(519) 555-4444', '1 (519) 555-4422', '1-555-555-5555', '1-(555)-555-25555', ); //form info $name = $_post['name']; $email = $_post['email']; $telephone = $_post['telephone']; $message = $_post['message']; //validate form info //validate name not empty if(empty($name)){ $formok = false; $errors[] = "you have not entered name"; } elseif(strlen($name) < 2){ $formok = false; $errors[] = "your name must greater 2 characters"; } //validate email address not empty if(empty($email)){ $formok = false; $errors[] = "you have not entered email address"; //validate email address valid }elseif(!filter_var($email, filter_validate_email)){ $formok = false; $errors[] = "you have not entered valid email address"; } //validate telephone number if(empty($telephone)) { $formok = false; $errors[] = "you have not entered telephone number"; }elseif(!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i", $telephone)){ $formok = false; $errors[] = "you have not entered valid telephone number"; } //validate message not empty if(empty($message)){ $formok = false; $errors[] = "you have not entered message"; } //validate message greater 20 characters elseif(strlen($message) < 20){ $formok = false; $errors[] = "your message must greater 20 characters"; } //send email if ok if($formok){ $headers = "from: info@example.com" . "\r\n"; $headers .= 'content-type: text/html; charset=iso-8859-1' . "\r\n"; $emailbody = "<p>you have received new message enquiries form on website.</p> <p><strong>name: </strong> {$name} </p> <p><strong>email address: </strong> {$email} </p> <p><strong>telephone: </strong> {$telephone} </p> <p><strong>message: </strong> {$message} </p> <p>this message sent ip address: {$ipaddress} on {$date} @ {$time}</p>"; mail("admin@example.com", "new enquiry", $emailbody, $headers); } //what need homecoming our form $returndata = array( 'posted_form_data' => array( 'name' => $name, 'email' => $email, 'telephone' => $telephone, 'message' => $message ), 'form_ok' => $formok, 'errors' => $errors ); //if not ajax request if(empty($_server['http_x_requested_with']) && strtolower($_server['http_x_requested_with']) !== 'xmlhttprequest'){ //set session variables session_start(); $_session['cf_returndata'] = $returndata; //redirect form header('location: ' . $_server['http_referer']); }

}

this code sec 4 step process

<form action="<?php echo $_server['php_self']; ?>" method="post"> <div id="first_step"> <p>step 1 of 4 - shareholder details</p> <div class="form"> <div> <label for="firstname">shareholder first name <span>*</span></label><br> <input type="text" name="firstname" id="firstname" value="" autofocus> </div> <br> <div> <label for="lastname">shareholder lastly name <span>*</span></label><br> <input type="text" name="lastname" id="lastname" value=""> </div> <br> <div> <label for="email">shareholder valid email <span>*</span><br><em>we send of import administration notices address.</em></label><br> <input type="text" name="email" id="email" value=""> </div> <br> <div> <label for="cemail">confirm email <span>*</span></label><br> <input type="text" name="cemail" id="cemail" value=""> </div> <br> <div> <label for="phone">shareholder valid contact number <span>*</span></label><br> <input type="text" name="phone" id="phone" value=""> </div> </div> <div class="clear"></div> <div class="margin-auto"> <button class="button button-primary button-small" type="submit" name="submit_first" id="submit_first" value="">next step</button> </div> </div> <div class="clear"></div> <div id="second_step"> <p>step 2 of 4 - shares</p> <div class="form"> <div> <label for="company_name">company name in hold shares <span>*</span><br><em>exactly on share certificate</em></label><br> <input type="text" name="company_name" id="company_name" value="" autofocus> </div> <br> <div> <label for="ticker">company ticker/symbol number <span>*</span><br><em>example: google inc. goog</em></label><br> <input class="uppercase" type="text" name="ticker" id="ticker" value=""> </div> <br> <div> <label for="shares_held">amount of shares held <span>*</span></label><br> <input type="text" name="shares_held" id="shares_held" value=""> </div> <br> <div> <label for="shares_sell">amount of shares wish sell <span>*</span></label><br> <input type="text" name="shares_sell" id="shares_sell" value=""> </div> </div> <div class="clear"></div> <div class="margin-auto"> <button class="button button-primary button-small" type="submit" name="submit_second" id="submit_second" value="">next step</button> </div> </div> <div class="clear"></div> <div id="third_step"> <p>step 3 of 4 - terms & conditions</p> <div class="form"> <div> <textarea readonly>lorem ipsum dolor sit down amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim advertisement minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore european union feugiat nulla facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend alternative congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum</textarea> </div> </div> <div class="clear"></div> <div class="margin-auto"> <button class="button button-primary button-small" type="submit" name="submit_third" id="submit_third" value="">next step</button> </div> </div> <div class="clear"></div> <div id="fourth_step"> <p>step 4 of 4 - review summary</p> <div class="form"> <h2>summary of shareholder details quoted</h2> <table> <tr><td>shareholder name</td><td></td></tr> <tr><td>shareholder email address</td><td></td></tr> <tr><td>shareholder contact number</td><td></td></tr> <tr><td>company name of shares held</td><td></td></tr> <tr><td>company ticker/symbol number</td><td></td></tr> <tr><td>amount of shares held</td><td></td></tr> <tr><td>amount of shares sell</td><td></td></tr> </table> <br> </div> <div class="clear"></div> <div class="margin-auto"> <button class="button button-primary" type="submit" name="submit_fourth" id="submit_fourth" value="" onclick="submit()">get free quote</button> </div> </div> </form>

and here js controls form

$(function(){ //original field values var field_values = { //id : value 'firstname' : 'enter first name', 'lastname' : 'enter lastly name', 'email' : 'enter valid email', 'cemail' : 'confirm email', 'phone' : 'enter contact number', 'company_name' : 'company name of shares', 'ticker' : 'ticker number', 'shares_held' : 'amount of shares held', 'shares_sell' : 'amount of shares sell', }; //inputfocus $('input#firstname').inputfocus({ value: field_values['firstname'] }); $('input#lastname').inputfocus({ value: field_values['lastname'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('input#cemail').inputfocus({ value: field_values['cemail'] }); $('input#phone').inputfocus({ value: field_values['phone'] }); $('input#company_name').inputfocus({ value: field_values['company_name'] }); $('input#ticker').inputfocus({ value: field_values['ticker'] }); $('input#shares_held').inputfocus({ value: field_values['shares_held'] }); $('input#shares_sell').inputfocus({ value: field_values['shares_sell'] }); //reset progress bar $('#progress').css('width','0%'); $('#progress_text').html('0% complete'); //first_step $('form').submit(function(){ homecoming false; }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeclass('error').removeclass('valid'); //ckeck if inputs aren't empty var emailpattern = /^[a-za-z0-9._-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/; var fields = $('#first_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<3 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailpattern.test(value) ) ) { $(this).addclass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addclass('valid'); } }); if(!error) { if( $('#email').val() != $('#cemail').val() ) { $('#first_step input[type=text]').each(function(){ $(this).removeclass('valid').addclass('error'); $(this).effect("shake", { times:3 }, 50); }); homecoming false; } else { //update progress bar $('#progress_text').html('33% complete'); $('#progress').css('width','33%'); //slide steps $('#first_step').slideup(); $('#second_step').slidedown(); } } else homecoming false; }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeclass('error').removeclass('valid'); var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] ) { $(this).addclass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addclass('valid'); } }); if(!error) { //update progress bar $('#progress_text').html('66% complete'); $('#progress').css('width','66%'); //slide steps $('#second_step').slideup(); $('#third_step').slidedown(); } else homecoming false; }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('100% complete'); $('#progress').css('width','100%'); //prepare 4th step var fields = new array( $('#firstname').val() + ' ' + $('#lastname').val(), $('#email').val(), $('#phone').val(), $('#company_name').val(), $('#ticker').val(), $('#shares_held').val(), $('#shares_sell').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ $(this).children('td:nth-child(2)').html(fields[$(this).index()]); }); //slide steps $('#third_step').slideup(); $('#fourth_step').slidedown(); }); $('#submit_fourth').click(function(){ }); });

i have added comment blocks explain.

thanks in advance

try changing js controlling form.

instead of

//first_step $('form').submit(function(){ homecoming false; });

use

$('#submit_first').click(function(e){ e.preventdefault(); });

php jquery html5