提交按钮不适用于混合收音机和复选框输入类型

时间:2016-09-23 09:04:22

标签: javascript html css forms checkbox

Contact.php代码 - >

<?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中的复选框

1 个答案:

答案 0 :(得分:0)

在你的问题中id =&#34; question-2-answers-G&#34;值=&#34; -G。其他&#34; /价值G.其他没有任何意义。你也可以输入额外的文字字段。尝试使用下面的代码复选框,您的提交按钮位于第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>