HTML表单，验证和预览在同一页面

i just built up a simple contact form and i am facing a problem previewing it in same file and same page .

In this coding, there is 3 types of division :

HTML Form
php validation
2nd variant page to be a preview page; trigger after complete the validation

The file name form.php .

Here is the code :

   <?php
// validate data
$fnameErr = $lnameErr  = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {    
  if (empty($_POST["fname"])) {
      $fnameErr = "First name is required";
    }
elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["fname"]) === 0) {
  $fnameErr = "First name must contain letters and spaces only";
}
else  {
$fname = $_POST["fname"];
}
    if (empty($_POST["lname"])) {
        $lnameErr = "Last name is required";
    }
elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["lname"]) === 0) {
  $lnameErr = "Last name must contain letters and spaces only";
}
    else {
        $lname = $_POST["lname"];
    }

   }



?>
   // 1st variant that will be form 
<title>Untitled 1</title>
<style type="text/css">
.style1 {
    border-collapse: collapse;
    border: 1px solid #000000;
    background-color: #99FF99;
}
.style3 {
    text-align: center;
    font-size: large;
}
.style4 {
    color: #0000FF;
}
.style5 {
    text-align: center;
}
.style6 {
    background-color: #FEFECB;
}
.error {
    color: #FF0000;
}
</style>
<script src="jquery-1.10.2.js"></script>
</head>
<body>
<table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
    <tr>
    <form method="POST"
 action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">     <td>
        <div class="style3">
            :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
            ::</div>
        <table style="width: 100%">
                    </table>
        <table style="width: 100%" class="style6" cellpadding="5">
            <tr>
                <td style="height: 30px; width: 106px">First Name&nbsp;</td>
                <td style="width: 14px; height: 30px;" class="style5"><strong>:</strong></td>
                <td style="width: 204px; height: 30px;"><input name="fname" type="text" value="<?php echo htmlspecialchars($fname);?>">&nbsp;</td>
                <td style="height: 30px"><span class="error"><?php echo $fnameErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Last Name</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><input name="lname" type="text" value="<?php echo htmlspecialchars($lname);?>"></td>
                <td><span class="error"><?php echo $lnameErr;?></span></td>
            </tr>    
        </table>
        </td>
        </form>
    </tr>
</table>
</body>
</html>


//--------this code below i want to become as preview page , 2nd variant page that will be switch on after validation complete ---------
<body>

<table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
  <tr>
    <td>
      <div class="style3">
        :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
        ::</div>
      <table style="width: 100%">
      </table>
      <table style="width: 100%" class="style6" cellpadding="5">
        <tr>
          <td style="height: 27px; width: 106px">First Name&nbsp;</td>
          <td style="width: 14px; height: 27px;" class="style5"><strong>:</strong></td>
          <td style="width: 204px; height: 27px;"><?php echo $fname ?> </td>
          <td style="height: 27px"><span class="error"></span></td>
        </tr>
        <tr>
          <td style="width: 106px">&nbsp;</td>
          <td style="width: 14px" class="style5"><strong></strong></td>
          <td style="width: 204px">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td style="width: 106px">Last Name</td>
          <td style="width: 14px" class="style5"><strong>:</strong></td>
          <td style="width: 204px"> <?php echo $lname ?></td>
          <td><span class="error"></span></td>
        </tr>
        <tr>
          <td style="width: 106px">&nbsp;</td>
          <td style="width: 14px" class="style5"><strong></strong></td>
          <td style="width: 204px">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td style="width: 106px">&nbsp;</td>
          <td style="width: 14px" class="style5"><strong></strong></td>
          <td style="width: 204px">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

, Any feedback is really appreciated , thank you!

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
dongmaxi6763 2015-01-10 13:46
关注
First of all change your:

<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

to

<form method="POST" action="">

2nd point - you have to decide what is your condition to show 2nd variant of page.

For example:

if (isset($POST['fname']) && $_POST['fname']==$fname && isset($POST['lname']) && $_POST['lname']==$lname ) {$setPageVariant = 'noform';} else {$setPageVariant = 'form';};

put this line right before html part start (line #27-28)

3rd. In your html replace:

<form method="POST" action="">

with

<?php if ($setPageVar=='form') { ?> <form method="POST" action=""> <?php } ?>

and same condition but with else for inputs. replace for example:

<input name="fname" type="text" value="<?php echo htmlspecialchars($fname);?>">

with

<?php if ($setPageVar=='form') { ?> <input name="fname" type="text" value="<?php echo htmlspecialchars($fname);?>"> <?php } else { echo $fname; } ?>

I hope you've got an idea and can go ahead in your project :-) Good luck!
解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

php表单和操作在同一页面中 php
2014-02-05 15:24

回答 1 已采纳 You can put the code in the same file and change the form to: <form action="" method="post"&gt
仅使用PHP在同一页面上显示表单验证错误消息？ html php
2017-02-13 13:36

回答 1 已采纳 You shouldn't put the rendering of the form in the else of your if structure. This is the reason y
在同一页面上提交已发送状态的联系表单 html javascript php
2019-03-26 23:12

回答 1 已采纳 Simple example jQuery version: $("#contact-form").submit(function() { var name = $("#form_nam
设计HTML5表单
2023-08-15 13:06

布道师小羊的博客一文读懂HTML表单设计！
我是否需要在同一页面中为两个HTML表单添加前缀输入变量 html php
2018-01-30 13:29

回答 2 已采纳 As long as you keep the 2 input requests separate having the post arg "make" is completely fine.
如何在php中提交表单后返回同一页面。 http mysql php
2015-03-27 11:03

回答 7 已采纳 Thank You All. I Got My Answer $_SERVER['REQUEST_URI']; will give the current URL with query stri
如何使用PHP在同一页面上使用表单提交更新先前的HTML输出 php
2013-08-22 20:35

回答 1 已采纳 With the help of j08691 and Ariane, I was able to get the desired outcome by swapping the code as
LayUI_02 前端框架页面元素
2022-07-11 11:38

£轻描～淡写°的博客目录一、栅格系统与后台布局示例codeHTML二、layui 颜色设计感三、字体图标四、CSS3动画类按钮 - 页面元素五、表单 - 页面元素HTMLcode行区块结构code六、导航相关 - 页面元素七、基础菜单 - 页面元素HTMLcodeJS八、...
在同一页面的表单中提交并显示结果 php
2011-11-01 18:29

回答 3 已采纳 There are several problems with your code. First, the variables that are established in the Calc
怎么将element 表单验证错误提示固定到搜索框的下面 elementui html 前端
2021-12-08 11:06

回答 3 已采纳建议把“年化”设置绝对定位，然后定位到下面，且不占位置
如何在同一页面上显示表单发布数据异步（没有刷新页面）？ ajax html javascript php
2017-11-06 07:29

回答 1 已采纳 $.ajax({ type:"GET", url:"path/to/file", data: 'your data', success:function(h
前端面试题之html css篇
2023-03-28 18:45

WY_ALA的博客当我们对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础的盒模型，将所有的元素表示为一个个的矩形的盒子一个盒子有四个部分组成，content（实际内容，显示文本和图像）、padding（内边距）、...
问下前端form表单验证怎么做 java 前端
2017-05-24 03:57

回答 2 已采纳 ``` 上传文件(.xls格式)
前端入门学习笔记(HTML, CSS, JS)
2023-07-05 17:31

江北南风的博客记录前端学习芝士
HTML及CSS基础入门：web前端基础，看这一篇就够了
2023-04-27 15:38

郝郝郝郝_七的博客写在开头：这是一篇有关于HTTP和CSS的基础入门教程。你也可以将他当作一本字典，因为我将所有可能用到的语法结构全部设置了标题，你只需要点击标题即可跳转过去。同时，我在最后放置了两个CSS实战，以供读者练习使用...
没有解决我的问题, 去提问

悬赏问题

¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
¥20 软件测试决策法疑问求解答
¥15 win11 23H2删除推荐的项目，支持注册表等
¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
¥15 qt6.6.3 基于百度云的语音识别不会改
¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
¥15 神经网络怎么把隐含层变量融合到损失函数中？
¥15 lingo18勾选global solver求解使用的算法
¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
¥20 测距传感器数据手册i2c

HTML表单，验证和预览在同一页面

1条回答 默认 最新

悬赏问题

1条回答默认最新