如何隐藏html表单,然后单击“提交”按钮后显示输出?

时间:2018-11-20 11:53:57

标签: php jquery html

这是我的表格

<form action="" method="POST" id="f1">
            <h3><I>GENERATE HERE !</I></h3>
              <div class="row">
                 <div class="col-25">
                   <label for="qnum">Select no.of questions:</label>
                    </div>
                     <div class = "col-75"><input type="number" id="qnum" name="que" value="1"  min="1" max="100"></div>
                     <br /><br />
               </div>
             <br />

        <div class="row">
              <div class="col-25">
                <label for="int">Select no. of Integers:</label></div>
                    <div class="col-75">
                       <select name="select" id="int">
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                        <option value="4"> 4 </option>
                        <option value="5"> 5 </option>
                        <option value="6"> 6 </option>
                        <option value="7"> 7 </option>
                        <option value="8"> 8 </option>
                        <option value="9"> 9 </option>
                        <option value="10"> 10 </option>
                      </select>
                    </div>
      </div>
      <br /> 

       <div class="row">
           <div class="col-25">
             <label for="dig">Select no. of digits:</label></div>
                <div class="col-75">
                  <select name="digits" id="dig">
                   <option value="1"> 1 digit</option>
                   </select>
              </div>
              <br /><br /><br /><br />
        </div>

          <div class="row">
          <div class="col-25"><label>Select operations:</label><br /></div>
              <div class="col-75">
                <input type="checkbox" id="mix" value="all" class="toggle-button"><label>All</label>
                <input type="checkbox" id="add" name="operation[]" value="Addition" checked><label>Addition</label>
                <input type="checkbox" id="sub" name="operation[]" value="Subtraction"><label>Subtraction</label>
                <input type="checkbox" id="mult" name="operation[]" value="Multiplication"><label>Multiplication</label>
                <input type="checkbox" id="div" name="operation[]" value="Division"><label>Division</label>
               </div>
                <br /><br />
                <br /><br />
            </div><br />


        <input type="submit" name="submit" value="Generate" id = "gen">
        <button class="button btn1">Play</button><br>
         <br />

 </form>
  </div>

     <script>
      $( '.col-75 .toggle-button' ).click( function () {
          $( '.col-75 input[type="checkbox"]' ).prop('checked', this.checked)
      })
      </script>

下面是我的php代码,可以正常运行。我的目的是在单击“播放”按钮时隐藏表单。然后显示代码输出,该怎么办?

 <?php
    error_reporting(E_ALL & ~E_NOTICE);

     if(isset($_POST['submit'])){
        if($_POST['digits'] == 1){
            $q = $_POST['que'];
            $rOperators = array('+','-','*','/')
            $previousInt = null;        //Track the previous operand
            $s = $_POST['select'];

            for ($x = 1; $x<=$q; $x++){ //for loop for no. of questions
                $randomOperands = array();
                $randomOperators = array();

                // loop over $i n times
                for ($i = 1; $i <=$s; $i++){ //for loop for no. of integers user entered
                    $nextInt = rand(1, 9); // assign random operand to array slot
                    $randomOperands[] = $nextInt;
                    if($i < $s){   
                        if($previousInt === 0) //No operator after last opearnd
                        {
                            //avoid division-by-zero
                            $randomOperators[] = $rOperators[rand(0, 2)];
                        }else{
                            $randomOperators[] = $rOperators[rand(0, $N-1)];
                        } 
                    }  
                    $previousInt = $nextInt;
                }
                // print array values
                $exp = '';  
                $output_string = " ";
                //Generating the expression
                foreach($randomOperands as $key=>$value1){
                    $exp .=  $value1 . "" ;
                    $output_string .= $value1. "<br>";
                    if(isset($randomOperators[$key])){
                        $exp .=  $randomOperators[$key]  ."";
                        $output_string .= $randomOperators[$key]."<br>";
                    }
                }
                //print expression
                $res = eval("return ($exp);");//evaluate the expression

                echo ("This is Q(".$x."): <br>"), $output_string. "<br>________<br>".$res."<br>";
            }
        }
     }
 ?>

输出产生的很好。我只是在单击“播放”按钮时隐藏表单的功能,然后显示输出时遇到麻烦,那我该怎么办?

1 个答案:

答案 0 :(得分:0)

我希望这是您的问题的解决方案。如果不是这样,请随时与我分享您的反馈意见

$( '.col-75 .toggle-button' ).click( function () {
  $( '.col-75 input[type="checkbox"]' ).prop('checked', this.checked)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST" id="f1">
            <h3><I>GENERATE HERE !</I></h3>
              <div class="row">
                 <div class="col-25">
                   <label for="qnum">Select no.of questions:</label>
                    </div>
                     <div class = "col-75"><input type="number" id="qnum" name="que" value="1"  min="1" max="100"></div>
                     <br /><br />
               </div>
             <br />

        <div class="row">
              <div class="col-25">
                <label for="int">Select no. of Integers:</label></div>
                    <div class="col-75">
                       <select name="select" id="int">
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                        <option value="4"> 4 </option>
                        <option value="5"> 5 </option>
                        <option value="6"> 6 </option>
                        <option value="7"> 7 </option>
                        <option value="8"> 8 </option>
                        <option value="9"> 9 </option>
                        <option value="10"> 10 </option>
                      </select>
                    </div>
      </div>
      <br /> 

       <div class="row">
           <div class="col-25">
             <label for="dig">Select no. of digits:</label></div>
                <div class="col-75">
                  <select name="digits" id="dig">
                   <option value="1"> 1 digit</option>
                   </select>
              </div>
              <br /><br /><br /><br />
        </div>

          <div class="row">
          <div class="col-25"><label>Select operations:</label><br /></div>
              <div class="col-75">
                <input type="checkbox" id="mix" value="all" class="toggle-button"><label>All</label>
                <input type="checkbox" id="add" name="operation[]" value="Addition" checked><label>Addition</label>
                <input type="checkbox" id="sub" name="operation[]" value="Subtraction"><label>Subtraction</label>
                <input type="checkbox" id="mult" name="operation[]" value="Multiplication"><label>Multiplication</label>
                <input type="checkbox" id="div" name="operation[]" value="Division"><label>Division</label>
               </div>
                <br /><br />
                <br /><br />
            </div><br />


        <input type="submit" name="submit" value="Generate" id = "gen">
        <button class="button btn1">Play</button><br>
         <br />

 </form>

 


      <?php
    error_reporting(E_ALL & ~E_NOTICE);

     if(isset($_POST['submit'])){
     	?>
     <script>
      $("form").hide();
      	if ( window.history.replaceState ) {
		  window.history.replaceState( null, null, window.location.href );
		}
      </script>
      <a href="javascript:;" onclick="location.reload()">Try again</a>
      <br>
     	<?php
        if($_POST['digits'] == 1){
            $q = $_POST['que'];
            $rOperators = array('+','-','*','/');
            $previousInt = null;        //Track the previous operand
            $s = $_POST['select'];

            for ($x = 1; $x<=$q; $x++){ //for loop for no. of questions
                $randomOperands = array();
                $randomOperators = array();

                // loop over $i n times
                for ($i = 1; $i <=$s; $i++){ //for loop for no. of integers user entered
                    $nextInt = rand(1, 9); // assign random operand to array slot
                    $randomOperands[] = $nextInt;
                    if($i < $s){   
                        if($previousInt === 0) //No operator after last opearnd
                        {
                            //avoid division-by-zero
                            $randomOperators[] = $rOperators[rand(0, 2)];
                        }else{
                            $randomOperators[] = $rOperators[rand(0, $N-1)];
                        } 
                    }  
                    $previousInt = $nextInt;
                }
                // print array values
                $exp = '';  
                $output_string = " ";
                //Generating the expression
                foreach($randomOperands as $key=>$value1){
                    $exp .=  $value1 . "" ;
                    $output_string .= $value1. "<br>";
                    if(isset($randomOperators[$key])){
                        $exp .=  $randomOperators[$key]  ."";
                        $output_string .= $randomOperators[$key]."<br>";
                    }
                }
                //print expression
                $res = eval("return ($exp);");//evaluate the expression

                echo ("This is Q(".$x."): <br>"), $output_string. "<br>________<br>".$res."<br>";

            }
        }
     }
 ?>