Question

假设我有一个要求姓名和考试成绩的表格。我喜欢让表单消失，并在用户点击提交时显示另一个div。

表示代码

<form action="exam.php" method="post" id = "coursedata" class="form-horizontal">
<fieldset>
<legend>Please Complete the Details</legend>
     <div class ="form-group">
      <label for="name" class="control-label col-xs-2">Student name</label>
      <div class="col-xs-6">
      <input type="text" name="name" id="name" size="20" class="form-control" autofocus required pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised">
      </div></div>
    <div class ="form-group">
      <label for="CA1" class="control-label col-xs-2">Assessment One</label>
     <div class="col-xs-6">
      <input type="number" class="form-control" min = "0" max = "100"name="CA1" id="CA1" size="3" maxlength ="3" onkey ="limit(this);" onkeyup="limit(this);" required>
    </div></div>
<div class="buttonarea">
        <input type="submit" value="Submit" name = "Submit">
        <input type="reset" value="Clear the Info">
</div>
</fieldset>
</form>

Answer 1

最短的方式（假设表单和exam.php是相同的文件......）：

<?php
    if (!isset($_POST['Submit'])) {
?>
Your form code
<?php
    }
    else {
        // form engine
        echo "<div>SUCCESS</div>";
    }
?>

希望它有帮助:)。 PS。这是对你的问题的严格回答，是否还有许多其他问题，比如如何处理表格，如何验证表格等等。但这是回答硬币的另一面;）。最好的问候：）。

Answer 2

使用jQuery（JavaScript库）。

将其复制到head部分

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('button[type="submit"]').click(function(){
                $("#coursedata").hide();
                return false;        
            })
        })
    </script>

PHP按下提交按钮后如何使表单消失

2 个答案: