如果验证结果还可以，表单应该提交并发出成功消息。但它宁可陷入提交状态，也不会发生任何动作。请在下面找到我的HTML PHP和JS代码。我在Xampp服务器上创建了一个数据库。 我是bootstrap和ajax的新手。请帮忙！我不时地一直卡在提交按钮上
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.min.css">
<title> Registration Form </title>
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header"><img class="logoPicture" src="images/nyu_long_white.png" alt="" height="42px" width="246px">
<h2 class="ospHeader">The Office of Sponsored Programs</h2>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-me" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-me">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.nyu.edu/" class="navbar-link">NYU Home</a>
</li>
<li><a href="http://www.nyu.edu/about/" class="navbar-link">About NYU</a>
</li>
<li><a href="http://www.nyu.edu/search/" class="navbar-link">Search NYU</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.nyu.edu/research/resources-and-support-offices/getting-started-withyourresearch/office-of-sponsored-programs/about.html" class="navbar-link">About OSP</a>
</li>
<li><a href="http://www.nyu.edu/research/resources-and-support-offices/getting-started-withyourresearch.html" class="navbar-link">Funding Opps</a>
</li>
<li><a href="http://www.nyu.edu/research/resources-and-support-offices/getting-started-withyourresearch/office-of-sponsored-programs/policies.html" class="navbar-link">Policies & Procedures</a>
</li>
<li><a href="http://www.nyu.edu/research/resources-and-support-offices/getting-started-withyourresearch/office-of-sponsored-programs/forms-guides.html" class="navbar-link">Proposals</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container local-nav-links">
<ol class="breadcrumb">
<li><a href="https://www.nyu.edu/osp/">OSP Home</a>
</li>
<li><a href="http://www.nyu.edu/research/resources-and-support-offices/getting-started-withyourresearch/registration-for-electronic-submissions.html">Registration for Electionic Submission</a>
</li>
<li class="active">Registration</li>
</ol>
<div class="container">
<form class="well form-horizontal" method="POST" action="js/formdata.php" id="contact_form" >
<fieldset>
<!-- Form Name -->
<legend><center><h2><b> Cayuse Registration Form</b></h2></center></legend><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >NetID<br>
(See back of NYU Card)</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="netid" placeholder="NetID" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Department / Office</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="department" class="form-control selectpicker">
<option value="">Select your Department/Office</option>
<option>NYU - New York University (NYU) (0)</option>
<option>PROVOST - Office of the Provost (PROVOST) (08000)</option>
<option>PROVOST - Faculty Resource Network (FRN) (03020)</option>
<option>PROVOST - Asian/Pacific/American Institute (A / P / A) (03055)</option>
<option>PROVOST - Institute of African-American Affairs (IAAA) (03400)</option>
<option>PROVOST - NYU Entrepreneurial Institute (08014)</option>
<option>PROVOST - Institute for Public Knowledge (IPK) (08021)</option>
<option>PROVOST - Center for the Study of Gender & Sexuality (08022)</option>
<option>PROVOST - Center for Dialogues: Islamic World - US - The West (08023)</option>
<option>PROVOST - Institute on the Arts and Civic Dialogue (08025)</option>
<option>PROVOST - Hemispheric Institute (08026)</option>
<option>PROVOST - Center for the Study of Transformative Life (08027)</option>
<option>PROVOST - Africa House (08063)</option>
<option>PROVOST - China House (08064)</option>
<option>PROVOST - Development Research Institute (DRI) (08051)</option>
<option>PROVOST - HEOP (57950)</option>
<option>PROVOST - C-STEP (57951)</option>
<option>PROVOST - STEP (57952)</option>
<option>PROVOST - BEST (57953)</option>
<option>PROVOST - Center on Violence and Recovery (08000A)</option>
<option>PROVOST - Scholars at Risk (08032)</option>
<option>CUSP - Center for Urban Science + Progress (CUSP) (64000)</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Job Title</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="jobtitle" placeholder="Job Title" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Contact No.</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="contact_no" placeholder="(639)" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Degree Type<br>(Completed)</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="degreetype" class="form-control selectpicker">
<option>Select your Degree type</option>
<option>Associate in Arts</option>
<option>Associate in Science</option>
<option>Bachelor of Arts</option>
<option>Bachelor of Agriculture</option>
<option>Bachelor of Architecture</option>
</td>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Degree Year</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="degreeyear" placeholder="YYYY" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">System</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="checkbox-inline">
<input type="checkbox" id="cayuse" name="system">Cayuse
</label><br>
<label class="checkbox-inline">
<input type="checkbox" id="irb" name= "system">Cayuse IRB
</label><br>
<label class="checkbox-inline">
<input type="checkbox" id="fastlane" name="system">NSF FastLane
</label><br>
<label class="checkbox-inline">
<input type="checkbox" id="nihcommons" name= "system">eRA Commmons
</label>
</div>
</div>
</div>
<!-- Success message -->
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
              <button type="submit" class="btn btn-primary" name="submit" value="submit" > Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
                         
<div class="footer navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="row">
<p class="eResearchHelp text-right"><a href="mailtp:eResearch.help@nyu.edu">Email: eResearch.help@nyu.edu</a> with suggestions about the website.</p>
</div>
</div>
</div>
</div><!-- /.container -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
PHP
<?php
$conn = mysqli_connect('localhost','root','password','OSP');
if (!$conn) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
if(isset($_POST['submit']))
{
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
$email=$_POST['email'];
$netid=$_POST['netid'];
$department=$_POST['department'];
$jobtitle=$_POST['jobtitle'];
$contact_no=$_POST['contact_no'];
$degreetype=$_POST['degreetype'];
$degreeyear=$_POST['degreeyear'];
$cayuse = $_POST["RegisterCAY"];
$irb = $_POST["RegisterIRB"];
$fastlane = $_POST["RegisterNSF"];
$nihcommons = $_POST["RegisterNIH"];
$query = "INSERT INTO users (first_name, last_name, email, netid, department, jobtitle, contact_no, degreetype, degreeyear,system) VALUES
('".$first_name."', '".$last_name."', '".$email."', '".$netid."', '".$department."', '".$jobtitle."', $contact_no ,'".$degreetype."', $degreeyear,'".$system."')";
$sql = mysqli_query($conn, $query);
$subject = "Electronic Registration: ".$FirstName." ".$LastName;
$message = "Please register ".$FirstName." ".$MiddleInitial." ".$LastName." ".$EmailAddress." ".$NetID." ".$PhoneNumber." ".$FaxNumber." ".$Department." ".$Title." ".$DegreeType." for the following:\n";
if ($RegisterCAY) {$message = $message."Cayuse.\n";}
if ($RegisterIRB) {$message = $message."Cayuse IRB.\n";}
if ($RegisterNSF) {$message = $message."NSF FastLane.\n";}
if ($RegisterNIH) {$message = $message."NIH eRA Commons.\n";}
$headers = "From: Registration for Electronic Submissions System <pc@nyu.edu>\n";
mail("pbc@gmail.com", $subject, $message, $headers);
if(!$sql)
{
echo" Error:".mysqli_error($conn);
}
else{
echo "Thank you";
}
}
?>
JS
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please enter your First Name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please enter your Last Name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please enter your Email Address'
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'The value is not a valid email address'
},
}
},
netid: {
validators: {
stringCase: {
message: 'The net ID must be in lowercase',
'case': 'lower',
},
notEmpty: {
message: 'Please enter your NETID.'
}
}
},
department: {
validators: {
notEmpty: {
message: 'Please select your Department'
}
}
},
jobtitle: {
validators: {
stringLength: {
min: 3,
},
notEmpty: {
message: 'Please enter your title'
}
}
},
degreeyear: {
validators: {
stringLength: {
min: 4,
max:4,
},
notEmpty: {
message: 'Please enter your Degree Year'
}
}
},
}
}
)
.on('sucess.form.bv',function(e){
$('#contact_form').on('submit',function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url:'js/formdata.php',
data: $('#contact_form').serialize(),
success:function(){
alert('Form Submitted');
}
});
});
});
});
答案 0 :(得分：0)
我认为问题出在if (isset($_POST[‘submit’]))部分。不要使用它，尝试if (isset($_POST[‘last_name’], $_POST[‘first_name’]))（在那里写所有的帖子变量），因为我看不到提交名称的按钮在哪里
此外，您还错过了#中的$(‘contact_form’).serialize();选择器。然后尝试评论是否有其他东西