我的网站上有两个表单。第一个是包含4个字段的通用快速联系表单，经过验证并通过PHP发送邮件。第二个是一个四步流程表单，每个流程都隐藏起来，直到完成并使用jQuery验证和处理。
我的问题是，当我激活我的js脚本，第一个(快速联系)表单将不提交，反之亦然。
我知道它可能会盯着我的脸，但我似乎就是不能让它工作。
第一表格代码
<div class="form-wrapper">
<p id="req-field-desc"><span class="required">*</span> indicates a 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 were some problems with your form submission:</li>
<?php
if(isset($cf['errors']) && count($cf['errors']) > 0) :
foreach($cf['errors'] as $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 be greater than 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>
和验证
的PHP<?php
if( isset($_POST) ){
//form validation vars
$formok = true;
$errors = array();
//submission data
$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 data
$name = $_POST['name'];
$email = $_POST['email'];
$telephone = $_POST['telephone'];
$message = $_POST['message'];
//validate form data
//validate name is not empty
if(empty($name)){
$formok = false;
$errors[] = "You have not entered a name";
}
elseif(strlen($name) < 2){
$formok = false;
$errors[] = "Your name must be greater than 2 characters";
}
//validate email address is not empty
if(empty($email)){
$formok = false;
$errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$formok = false;
$errors[] = "You have not entered a valid email address";
}
//validate telephone number
if(empty($telephone)) {
$formok = false;
$errors[] = "You have not entered a 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 a valid telephone number";
}
//validate message is not empty
if(empty($message)){
$formok = false;
$errors[] = "You have not entered a message";
}
//validate message is greater than 20 characters
elseif(strlen($message) < 20){
$formok = false;
$errors[] = "Your message must be greater than 20 characters";
}
//send email if all is 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 a new message from the enquiries form on your 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 was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
mail("admin@example.com", "New Enquiry", $emailbody, $headers);
}
//what we need to return back to our form
$returndata = array(
'posted_form_data' => array(
'name' => $name,
'email' => $email,
'telephone' => $telephone,
'message' => $message
),
'form_ok' => $formok,
'errors' => $errors
);
//if this is not an 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 back to form
header('location: ' . $_SERVER['HTTP_REFERER']);
}
}
这是第二个4步过程的代码<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 Last 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 important administration notices to this 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 - About Your Shares</p>
<div class="form">
<div>
<label for="company_name">Company name in which you hold Shares <span>*</span><br><em>Exactly as on the 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. would be 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 you wish to 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 amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 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 eu feugiat nulla facilisis at 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 option 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 to be 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 to 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 A FREE QUOTE</button>
</div>
</div>
</form>
这里是控制表单
的js$(function(){
//original field values
var field_values = {
//id : value
'firstname' : 'Enter your First Name',
'lastname' : 'Enter your Last Name',
'email' : 'Enter your valid email',
'cemail' : 'Confirm email',
'phone' : 'Enter your contact number',
'company_name' : 'Company Name of shares',
'ticker' : 'Ticker Number',
'shares_held' : 'Amount of shares held',
'shares_sell' : 'Amount of shares to 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(){ return 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);
});
return false;
} else {
//update progress bar
$('#progress_text').html('33% Complete');
$('#progress').css('width','33%');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
}
} else return 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 return false;
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','100%');
//prepare the fourth 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(){
});
});
我已经添加了注释块来解释
Thanks in advance
尝试更改控制表单的JS。
不是//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(e){
e.preventDefault();
});