2016-09-23 38 views
-1

Contact.php代碼工作 - > 提交按鈕不具有混合無線電和checkbox輸入型

<?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> \t 
 

 
<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"> 
 

 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t </div> 
 
      
 
\t \t     <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> 
 
\t \t \t \t \t \t </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> 
 
\t \t \t \t \t \t </div> 
 
          
 
\t \t \t \t \t \t  
 
\t \t \t \t \t \t  <div class="section"> 
 
          <label class="field prepend-icon"> 
 
\t \t \t \t \t \t <h3>Question 4</h3> 
 
          <input type="text" id="question4" name="question4" class="gui-input" value="<?php echo $_POST["question-4-answers"]; ?>"/> 
 
          </label> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t  
 
          <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> 
 
\t \t \t \t \t \t \t </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> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </body> 
 
\t \t \t \t </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; 
 
     \t 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 
 
     { 
 
     \t height:100%; 
 
     \t width:100%; 
 
     } 
 
     body { 
 
      color: #000; 
 
      height:100%; 
 
      width:100%; 
 
      font-size: 16px; 
 
      line-height: 20px; 
 
      text-align: left; 
 
      overflow-x:hidden; 
 
     } 
 
     #header { 
 
     \t width:100%; 
 
     \t height:100px; 
 
     } 
 
     #logo{ 
 
     \t clear:both; 
 
     \t 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; 
 
     \t font-weight:600; 
 
     } 
 

 
     #quiz label 
 
     { 
 
     \t font-family: 'Roboto', sans-serif; 
 
     \t font-weight:normal; 
 
     } 
 

 
     #results { 
 
      font: 44px Georgia, Serif; 
 
     } 
 

 
     center 
 
     { 
 
     \t font-size:xx-large; 
 
     \t padding:20px 0 50px 0; 
 
     \t font-family: 'Roboto', sans-serif; 
 
     } 
 

 
     .form-footer .button { 
 
      margin-right: 10px; 
 
      margin-bottom: 5px; 
 
     \t color: #fff; 
 
      text-shadow: 0 1px rgba(0, 0, 0, 0.08); 
 
     \t  background-color: #ecae3d; 
 
     \t \t 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; 
 
     \t font-family: "Roboto", Arial, Helvetica, sans-serif; 
 
      font-weight: 400; 
 
     } 
 

 
     .form-footer .button:hover{ 
 
     \t 
 
     \t background-color:#DBDBDB; 
 
     \t color:#000; 
 
     } 
 

 
     #quiz { 
 
      left: 50%; 
 
      margin-left: 25%; 
 
      
 
     } 
 

 
     #footer{ 
 
     \t width:100%; 
 
     \t height:80px; 
 
     \t background-color:#2D2D2D; 
 
     \t color:#9C9C9C; 
 
     \t position:absolute; 
 
     \t clear:both; 
 
     \t margin-top:2%; 
 
     } 
 

 
     #footer #footer-center 
 
     { 
 
     \t font-size:18px; 
 
     \t margin:auto; 
 
     \t font-family: "Roboto", Arial, Helvetica, sans-serif; 
 
     \t clear:both; 
 
     \t padding:20px 0 0 0 ; 
 
     \t 
 
     } 
 

 
     .survey-form 
 
     { 
 
     \t width:100%; 
 
     \t min-height:500px 
 
     } 
 
     li{ 
 
     \t padding-bottom:20px; 
 
     \t margin-left:0px; 
 
     \t padding-left:0px; 
 
     } 
 
     ul 
 
     { 
 
     \t padding:0px; 
 
     \t margin:0px; 
 
     \t 
 
     }
<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"/> 
 
     \t <meta name="viewport" content="width=device-width, initial-scale=1"/> 
 
     \t 
 
     \t <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/> 
 
     \t <link rel="stylesheet" type="text/css" href="CSS/style.css"/> 
 
     \t <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> 
 
     \t \t 
 
       </div> 
 
     \t 
 
      </form> 
 
     \t <div class="form-footer text-left"> 
 
     \t <button id="next" data-btntext-sending="Next" class="NextButton">Next</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 

 

請幫助如何解決這個問題。我想在問題2中使用複選框

回答

0

在你的問題id =「問題2答案-G」值=「G。others」/值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> 
+0

我的問題是,提交按鈕不工作,能否請你提出一些解決方案 –

+0

contact.php不包括對您的問題 –

+0

我已經添加contact.php代碼,請看看,並提出了一些解決 –