提交按钮不能使用混合单选和复选框输入类型
submit button is not working with mixed radio and checkbox input type
Contact.php code -->
<?php
if(isset($_POST['SubmitButton'])){ //check if form was submitted
$input = $_POST['inputText']; //get input text
$message = "Success! You entered: ".$input;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile view -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yesteryear" rel="stylesheet">
<!-- Template's stylesheets -->
<link rel="stylesheet" href="css/theme-default.css" type="text/css">
<link rel="stylesheet" href="js/loaders/stylesheets/screen.css">
<link rel="stylesheet" href="fonts/font-awesome.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="fonts/Simple-Line-Icons-Webfont/simple-line-icons.css" media="screen" />
<link rel="stylesheet" href="fonts/et-line-font/et-line-font.css">
<link rel="stylesheet" type="text/css" href="js/smart-forms/smart-forms.css">
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<!-- Template's stylesheets END -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
</header>
<center>Please check all details before submitting</center>
<form method="post" action="include/sendmail1.php" id="smart-form">
<div class="text-box white padding-4">
<div class="smartforms-modal-body">
<div class="smart-wrap">
<div class="smart-forms smart-container transparent wrap-full">
<div class="form-body no-padd">
<div class="section">
<label class="field prepend-icon">
<h3>Question 1</h3>
<input type="text" id="question1" name="question1" class="gui-input" value="<?php echo $_POST["question-1-answers"]; ?>"/>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<h3>Question 2</h3>
<input type="text" id="question2" name="question2" class="gui-input" value="<?php echo $_POST["question-2-answers"]; ?>"/>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<h3>Question 3</h3>
<input type="text" id="question3" name="question3" class="gui-input" value="<?php echo $_POST["question-3-answers"]; ?>"/>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<h3>Question 4</h3>
<input type="text" id="question4" name="question4" class="gui-input" value="<?php echo $_POST["question-4-answers"]; ?>"/>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<h3>question 5</h3>
<input type="text" id="question5" name="question5" class="gui-input" value="<?php echo $_POST["question-5-answers"]; ?>"/>
</label>
</div>
<!-- end .form-body section -->
<div class="form-footer text-left">
<button type="submit" data-btntext-sending="Sending..." class="button btn-primary">Submit</button>
</div><!-- end .form-footer section -->
</form>
</div><!-- end .form-body section -->
</div><!-- end .smart-forms section -->
</div><!-- end .smart-wrap section -->
</div></div>
</div>
</body>
</html>我开发了一个测验表格，在问题2中我使用无线电输入选项，而我想在问题2中使用复选框选项。当我使用复选框时，提交按钮在我的表单中不起作用。
我的代码
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();CSS:
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo"><img src="images/sequreone-logo.png" alt="Secqureone Logo"></a>
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
</div>
请帮忙解决这个问题。我想在问题2中使用复选框
在你的问题id="question-2-answers-G" value="G. "others"/value G.Others没有任何意义。你还可以输入额外的文本框。尝试下面的代码与复选框和您的提交按钮是在第4页。
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="checkbox" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<label for="question-2-answers-G">G) Others</label>
<input type="text" name="question-2-answers" id="question-2-answers-G-other" required/ />
</div>
</li>
相关文章：
- 根据复选框输入过滤深层对象
- 将复选框输入组映射到AngularJS数组
- 在angularjs复选框输入中更新ng模型或执行ng更改之前需要确认
- 将复选框输入从PHP传递到JavsScript
- 如何将 jQuery has(） 与复选框输入一起使用
- Javascript 数据仅提取数组的第一项，该数组放入使用 iCheck 复选框输入的数据名称字段中
- 如何从复选框输入发送多个值
- 引导开关不适用于动态创建的复选框输入
- 在提交之前将一堆复选框输入附加到表单，然后隐藏它们
- 在 JavaScript 中分解复选框输入值
- 如何将自定义切换控件附加到复选框输入
- 显示基于HTML 5复选框输入的项目
- 如何循环浏览页面上的所有单选或复选框输入，并返回返回的值组合
- Angularjs ng禁用了几个复选框输入按钮
- 多个复选框输入到文本区域 - 添加文本 - 从文本区域中删除文本
- 不发送隐藏复选框输入值:(
- 如何循环通过单选/复选框输入，并将选中的id推送到数组
- Angular的复选框输入ng-click从未被调用
- 复选框输入的布尔值
- 表单与复选框输入字段，反之亦然-缺少第一个值
