验证警报保留在同一页面

时间:2015-09-21 18:30:58

标签: javascript php html html5

目前,如果用户将练习题目输入留空并且在练习文本中输入文本,则会显示警告,告知用户填写完整表格,反之亦然。当警报出现并按下确定时,表单数据将丢失,用户必须再次添加所有输入。如何显示警报并按下确定将用户保持在同一页面上?我不确定它是否是因为我有一个隐藏和显示div点击'创建新练习'或者是其他东西。

我的代码在

下面

CourseA.php

HTML:

<script>
function showDiv(el1,el2){
    document.getElementById(el1).style.display = 'block';
    document.getElementById(el2).style.display = 'none';
}
</script>
<div class="right">
        <h2 id = 'course_admin_titleA'>Course A</h2>
        <button id= 'create_btnA' onClick="showDiv('is', 'ie')">Create new session</button>
        <button id= 'create_btnB' onClick="showDiv('ie', 'is')">Create new exercise</button>
</div>

<div id= "ie">
    <!-- input form for admin -->
    <form action="courseA.php" method="post" enctype="multipart/form-data"> 
        <table class ="table_exercise">
                <td id = "exercise_titles"><strong> Exercise Title:</strong></td>
                <td><input type="text" name="exercise_title" value="<?php if(isset($_SESSION['a'])){echo $_SESSION['a'];} ?> " size="60" /></td>
            </tr>
            <tr>
                <!-- input text area for admin to type exercise content -->
                <td id = "exercise_titles"><strong> Exercise Text:</strong></td>
                <td><textarea name="exercise_text"  rows="15" cols="50"  ><?php if(isset($_SESSION['b'])){echo $_SESSION['b'];} ?></textarea></td>
            </tr>   
        </table>
        <!-- button with input type 'submit' which is referenced by the php code -->
        <button id= 'create_btnB'input type="submit" name="submit1" > Publish Exercise Now</button>
        <!-- Hide if not clicked -->
        <input type="hidden" value="ie" name="type">
    </form>
</div>

PHP:

        <?
        session_start();
        //if submit button is set i.e 'publish exercise now' pressed then:
        if(isset($_POST['submit1'])){
            $_SESSION['a'] = $_POST['exercise_title'];  //assign to session variable
            $_SESSION['b'] = $_POST['exercise_text'];
            //local variables taking the input names from the html forms above
            $exercise_title = $_POST['exercise_title'];
            $exercise_text = $_POST['exercise_text'];
                //validation
                if($exercise_title =='' OR $exercise_text==''){
                    echo "<script>alert('Please make sure the exercise has a title and exercise info')</script>";
                    //exit();

                } else {
                    //query to insert the form data from the admin into the exercises table
                    $insert_exercises = "insert into exercises (exercise_title,exercise_text) 
                    values ('$exercise_title','$exercise_text')";
                    //runs query
                    $run_exercises = mysqli_query($con,$insert_exercises); 
                    //JS to tell user exercise has been published
                    echo "<script>alert('Exercise Has been Published!')</script>";
                    //returns to courseA page on the admin panel
                    echo "<script>window.open('courseA.php','_self')</script>";
                } //end of else 
        } //end of IF
        //end of if & end of PHP
        } ?>

由于

4 个答案:

答案 0 :(得分:1)

当页面刷新并且验证失败时,您需要将失败的值放回到字段中。例如:

<input type="text" name="exercise_title" size="60" />

应该是:

<input type="text" name="exercise_title" values "$_POST['exercise_title']" size="60" />

答案 1 :(得分:1)

我不知道其中的其他风险,但您可以使用以下会话。 在php中使用会话并将输入的数据分配给会话变量

<?php
session_start();  //start session for using session variable
//if submit button is set i.e 'publish exercise now' pressed then:
if(isset($_POST['submit1'])){
$_SESSION['a'] = $_POST['exercise_title'];  //assign to session variable
$_SESSION['b'] = $_POST['exercise_text'];   //assign to session variable
//local variables taking the input names from the html forms above
$exercise_title = $_POST['exercise_title'];
$exercise_text = $_POST['exercise_text'];

并在html中,将这些会话变量称为文本输入和区域的值。

<input type="text" name="exercise_title" value="<?php if(isset($_SESSION['a'])){echo $_SESSION['a'];} ?> " size="60" />
<textarea name="exercise_text"  rows="15" cols="50"  ><?php if(isset($_SESSION['b'])){echo $_SESSION['b'];} ?></textarea>

您需要进行更多验证。

答案 2 :(得分:1)

安德鲁的回答是正确的,但代码有点偏离,并没有考虑到问题中提到的所有内容。

数据丢失的原因是提交表单会触发POST个请求到表单action属性中定义的目标页面。

从您的问题我明白您将表单提交到同一页面,因此您可以检索POST数据中的值,就像您在检查它们时所做的那样'重空。

您的PHP部分应该在您的HTML之前:

<?php
    if(isset($_POST['submit1'])){
        $exercise_title = $_POST['exercise_title'];
        $exercise_text = $_POST['exercise_text'];

        if($exercise_title =='' OR $exercise_text==''){
            // Do your stuff
        } else {
            // Do your other stuff
        }
    } else {
        // Define the variables as empty strings
        // so they can be used when the form hasn't been submitted yet
        $exercise_title = '';
        $exercise_text = '';
    }
?>

注意:您应避免使用<?等短标记,因为并非所有环境都支持它们。

然后在HTML处理您div的可见度,具体取决于表单是否已提交:

<div id= "ie" <?php if(!isset($_POST['submit1'])) { echo 'style="display:none"'; } ?>>

最后echo输入字段的值:

<input type="text"
  name="exercise_title"
  value="<?php echo htmlentities($exercise_title, ENT_QUOTES, 'UTF-8'); ?>"
  size="60" />

<textarea name="exercise_text" rows="15" cols="50">
  <?php echo htmlentities($exercise_text, ENT_QUOTES, 'UTF-8'); ?>
</textarea>

更新:忘记提及,您的代码是对SQL注入开放的,所以你应该看看this post

答案 3 :(得分:0)

如果你使用的是JQuery,可以按照你的方式完成。无论如何,最好使用Javascript验证表单,以便减少对服务器的访问。

<?
//if submit button is set i.e 'publish exercise now' pressed then:
if(isset($_POST['submit1'])){
    //local variables taking the input names from the html forms above
    $exercise_title = $_POST['exercise_title'];
    $exercise_text = $_POST['exercise_text'];
        //validation
        if($exercise_title =='' OR $exercise_text==''){
            echo "<script>alert('Please make sure the exercise has a title and exercise info');
                  $('input[name=\"exercise_title\"]').val($exercise_title);
                  $('input[name=\"exercise_text\"]').val($exercise_text);</script>";
            //exit();

        }else{....