我是这个网站的新手，也是网页设计的新手。最近，我花了几天或几周的时间努力设计一个网页，结果却卡在了"联系表单"上。
我用Bootstrap编写了一个从模态窗口弹出的表单。另外，我还链接了一个远程联系表单，这样我就可以将它链接到不同的页面。
然而，我没有太多的php和jquery的知识来验证和提交我的表单在那个模态页面上飞行而不刷新页面。我一星期有好几天跟她在一起。这是我的代码，请帮助。
我像这样从主页链接远程联系表单:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Subscribe! <b class=".glyphicon-triangle-bottom:before">▼</b></a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="form/contactForm.php" data-target="#contactmodal" role="button"><i id="ddicons" class="fa fa-envelope-square"></i> Newsletter</a></li>
链接的contactform。php是这样的
UPDATED CHECK BELOW
和mailform.php是这样的:
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "myemail@email.com";
$email_subject = "Newsletter Subscription";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['country']) ||
!isset($_POST['gender']) ||
!isset($_POST['terms'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['name']; // required
$inputEmail = $_POST['email']; // required
$country = $_POST['country']; // required
$gender = $_POST['gender']; // not required
$terms = $_POST['terms']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+'.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
if(strlen($inputCountry) < 1) {
$error_message .= 'Please select your country.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
if(strlen($inputGender) < 1) {
$error_message .= 'Please select your gender.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.'n'n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."'n";
$email_message .= "Email: ".clean_string($inputEmail)."'n";
$email_message .= "Country: ".clean_string($inputCountry)."'n";
$email_message .= "Gender: ".clean_string($inputGender)."'n";
// create email headers
$headers = 'From: '.$email_from."'r'n".
'Reply-To: '.$email_from."'r'n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
问题:
我不知道现在发生了什么。主页模式确实加载了远程表单，但提交按钮不起作用，当它完成时，它会刷新。我真希望表单中的所有输入都是必需的。
到目前为止，我有这个作为我的联系形式。国家:性别:同意:和提交:工作不顺利…:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax Contact Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_btn").click(function() {
var proceed = true;
//simple validation at client's end
//loop through each field and we simply change border color to red for invalid fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
if(proceed) //everything looks good! proceed...
{
//get input field values data to be sent to server
post_data = {
'user_name' : $('input[name=name]').val(),
'user_email' : $('input[name=email]').val(),
};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").val('');
$("#contact_form #contact_body").slideUp(); //hide form after success
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- MAIL MODAL -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Join Nexeu Mailing List!</h4>
</div>
<div class="modal-body">
<!--- Form --->
<form action="mailform.php" class="form-horizontal" id="contact_form" method="post" name="modalform" role="form"/>
<fieldset>
<div class="form-style" id="contact_form">
<div class="form-style-heading">Please Contact Us</div>
<div id="contact_results"></div>
<div id="contact_body">
<!-- Name input-->
<div class="form-group">
<label class="control-label col-md-4" for="name"><span>Name <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input id="name" name="name" type="text" maxlength="180" required="true" placeholder="Your Name" required>
</div>
</div>
<!-- e-mail input-->
<div class="form-group">
<label class="control-label col-md-4" for="email"><span>Email <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input type="email" class="form-control" id="inputEmail" required="true" placeholder="Email" required>
</div>
</div>
<!-- Country Select -->
<div id="choosecountry" class="form-group">
<label class="control-label col-md-4" for="subject"><span>Country <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<select id="country" name="subject" class="form-control" title="Select Country..." required>
<option value="">Select Country...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo, Republic of the">Congo, Republic of the</option>
<option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar (Burma)">Myanmar (Burma)</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St. Kitts and Nevis">St. Kitts and Nevis</option>
<option value="St. Lucia">St. Lucia</option>
<option value="St. Vincent and The Grenadines">St. Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="UK (United Kingdom)">UK (United Kingdom)</option>
<option value="USA (United States of America)">USA (United States of America)</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City (Holy See)">Vatican City (Holy See)</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<!-- Gender Select -->
<div class="form-group">
<label class="col-xs-4 control-label" for="gender">Gender </label>
<div class="col-xs-6">
<div class="btn-group" id="genderbtn" name="gender" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" required>Male</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female"required>Female</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other"required>Other</label>
</div>
</div>
</div>
<!--- Agreement Button --->
<div class="form-group">
<div class="col-xs-6 col-xs-offset-4">
<div class="checkbox">
<label>
<input id="terms" type="checkbox" for="agree" name="agree" value="agree" data-error="Before you wreck yourself" required>
Agree with the terms and conditions </label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-xs-4 control-label" for="submit"></label>
<div class="col-md-6">
<button id="submit_btn" type="submit" value="Submit" class="submit btn btn-custom">Submit!</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<!--- /Form --->
</div><!-- end modal-body -->
<div class="modal-footer"></div>
<!-- end modal-footer -->
<!-- end mailmodal -->
<!-- /MAIL MODAL -->
</body>
</html>
您需要使用ajax，这里有一个示例:http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form
您可以使用下面的代码提交表单而不刷新。
$(document).ready(function(){
$("#login-form-submit").click(function(){
var username = $("#login-form-username").val();
var password = $("#login-form-password").val();
if(username == ""){
alert("Please Enter Email.");
$("#login-form-username").focus();
return false;
}
if(password == "")
{
alert("Please Enter Password.");
$("#login-form-password").focus();
return false;
}
var form = document.getElementById('login-form');
formdata2 = new FormData(form);
$.ajax({
url : "controller/ajax/check_login.php",
cache : false,
contentType : false,
processData : false,
data : formdata2,
type : 'post',
success : function(data) {
if (data == 1) {
alert('success');
}else {
alert('Invalid Authentication.');
}
}
});
return false;
});
});