js动态增加表单以及服务器如何接收参数

最新推荐文章于 2018-01-30 18:02:20 发布
最新推荐文章于 2018-01-30 18:02:20 发布
阅读量2.7k 收藏
点赞数
分类专栏： php javascript 文章标签： 服务器 table button session input class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cfchengfei002/article/details/7927238
版权

js动态增加表单页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#main {
height: 650px;
width: 800px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#main strong {
letter-spacing: 2px;
font-size: 18px;
}
#main strong a {
text-decoration: none;
}
#main #form1 table tr td {
line-height: 25px;
}
#main #form1 table tr th {
height: 25px;
}
#main #form1 table tr td #button {
width: 50px;
}
#main #form1 table tr td #button2 {
width: 50px;
}
.td{
background-color: #FFE;
height: 30px;
}
.tds{
background-color: #CCC;
height: 30px;
}
#main #form1 table tr .td #textfield2 {
width: 125px;
}
#main #form1 table tr .td #textfield3 {
width: 125px;
}
#main #form1 table tr .td #textfield4 {
width: 125px;
}
#main #form1 table tr .td #textfield5 {
width: 125px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
var i=0
function Add1()
{
 var temp=document.getElementById("add")
 temp.insertRow(temp.rows.length);
 temp.rows.item(temp.rows.length -1).insertCell(0);
 var xx=temp.rows.length -1 ;//-1
 var sHTML
 sHTML='<TABLE border=\"1\" style=\"border-collapse: collapse\" bordercolor=\"#111111\"width=\"100%\">' +
       '<TR>' +
       '<TD align=\"left\" width="25%"><SELECT NAME=\"\">'+
       '<option value=\"0\">&nbsp;-------------------&nbsp;</option>'+
  '<option value=\"1\">&nbsp;海马高度&nbsp;</option>' +
       '<option value=\"2\">&nbsp;脉络膜裂宽度&nbsp;</option>' +
   '<option value=\"3\">&nbsp;内嗅皮层厚度&nbsp;</option>' +
       '<option value=\"4\">&nbsp;颞叶干宽度&nbsp;</option>' +
   '<option value=\"5\">&nbsp;侧裂池宽度&nbsp;</option>' +
       '<option value=\"6\">&nbsp;海马total NAA/CR&nbsp;</option>' +
   '<option value=\"7\">&nbsp;海马total MI/CR&nbsp;</option>' +
       '<option value=\"8\">&nbsp;头NAA/CR&nbsp;</option>' +
   '<option value=\"9\">&nbsp;头MI/CR&nbsp;</option>' +
       '<option value=\"10\">&nbsp;体NAA/CR&nbsp;</option>' +
   '<option value=\"11\">&nbsp;体MI/CR&nbsp;</option>' +
       '<option value=\"12\">&nbsp;尾NAA/CR&nbsp;</option>' +
   '<option value=\"13\">&nbsp;尾MI/CR&nbsp;</option>' +
       '<option value=\"14\">&nbsp;杏仁核NAA/CR&nbsp;</option>' +
   '<option value=\"15\">&nbsp;杏仁核MI/CR&nbsp;</option>' +
       '<option value=\"16\">&nbsp;扣带回NAA/CR&nbsp;</option>' +
  '<option value=\"17\">&nbsp;扣带回MI/CR&nbsp;</option>' +
       '</SELECT>' +
       '</TD>' +
       '<TD align=\"left\" width="65%">&nbsp;左侧：&nbsp;<input type=\"text\" name=\"\">&nbsp;&nbsp;右侧：&nbsp;&nbsp;<input type=\"text\" name=\"\"></TD>' +
       '<TD align=\"center\" width="10%"><input type=\"button\" value=\" 删除 \" οnclick=\"Delete(this);\"></TD>'+
       '</TR>' +
       '</TABLE>';
 temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(2).children.item(0).text=xx;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).name="seeo"+xx;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(0).name="seeo"+xx+"L";
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(1).name="seeo"+xx+"R";
}
function Add2()
{
 var temp=document.getElementById("add1")
 temp.insertRow(temp.rows.length);
 temp.rows.item(temp.rows.length -1).insertCell(0);
 var xx=temp.rows.length -1 ;//-1
 var sHTML
 sHTML='<TABLE border=\"1\" style=\"border-collapse: collapse\" bordercolor=\"#111111\"width=\"100%\">' +
       '<TR>' +
       '<TD align=\"left\" width="25%" ><input type=\"text\" name=\"\"></TD>' +
       '<TD align=\"left\" width="65%">&nbsp;左侧：&nbsp;<input type=\"text\" name=\"\">&nbsp;&nbsp;右侧：&nbsp;&nbsp;<input type=\"text\" name=\"\"></TD>' +
       '<TD align=\"center\" width="10%"><input type=\"button\" value=\" 删除 \" οnclick=\"Delete2(this);\"></TD>'+
       '</TR>' +
       '</TABLE>';
 temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(2).children.item(0).text=xx;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).name="seei"+xx;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(0).name="seei"+xx+"L";
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(1).name="seei"+xx+"R";
}
function Delete(x)
{ 
 var temp=document.getElementById("add")
 temp.deleteRow(x.text.valueOf())
 for (var j=0;j<temp.rows.length;j++) {
 temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(2).children.item(0).text=j;
  temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).name="seeo"+j;
  temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(0).name="seeo"+j+"L";
 temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(1).name="seeo"+j+"R";
}}
function Delete2(x)
{ 
 var temp=document.getElementById("add1")
 temp.deleteRow(x.text.valueOf())
 for (var j=0;j<temp.rows.length;j++) {
 temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(2).children.item(0).text=j;
  temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).name="seei"+j;
  temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(0).name="seei"+j+"L";
 temp.rows.item(j).cells.item(0).children.item(0).rows.item(0).cells.item(1).children.item(1).name="seei"+j+"R";
}}
</SCRIPT>
</head>
<body>
<div id="main">
<br>
  <strong><a href="<?php echo $this->baseUrl?>/<?php echo $this->show?>">病人信息</a>|<a href="<?php echo $this->baseUrl?>/<?php echo $this->search?>">查找病人</a>|<a href="<?php echo $this->baseUrl?>/<?php echo $this->add?>">添加病人 </a>|<a href="<?php echo $this->baseUrl?>/<?php echo $this->medreport?>">病历检索 </a>
  </strong>
<form id="form1" name="form1" method="post" action="<?php echo $this->searchform?>">
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th colspan="2" align="left" scope="col">病人信息：</th>
      </tr>
      <tr>
        <td width="18%" class="td">姓名：</td>
        <td width="82%" class="td"><label for="textfield"></label>
        <input type="text" name="name" id="textfield" /></td>
      </tr>
      <tr>
        <td class="td">性别：</td>
        <td class="td"><input type="radio" name="sex" id="radio" value="男" />
        <label for="radio"> 男 &nbsp;&nbsp;
          <input type="radio" name="sex" id="radio2" value="女" />
        女</label></td>
      </tr>
      <tr>
        <td class="td">年龄：</td>
        <td class="td"><label for="select"></label>
          <select name="age" id="select">
          <option value=0 selected="selected">--------------</option>
           <option value=1 >0-5</option>
           <option value=2 >6-15</option>
           <option value=3 >16-30</option>
           <option value=4 >31-60</option>
           <option value=5 >61-</option>
        </select></td>
      </tr>
      <tr>
        <th colspan="2" align="left">检查信息：&nbsp;&nbsp;<INPUT TYPE="button" value="增添（选择项）" οnclick="Add1()">
&nbsp;&nbsp;<INPUT TYPE="button" value="增添（填写项）" οnclick="Add2()">
<span style="color: #F00">[注：建议使用“增添（选择项）”，搜索更快，更准确]</span></th>
      </tr>
      <tr>
      <td colspan="2" align="center" class="td">
      <table align=center border=0 width="100%" height="100%">
<tr>
       <td width="100%" height="220" align="center">
           <div style=" OVERFLOW: auto;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; WIDTH: 100%; HEIGHT: 100%">
                <table width="100%" id="add">
                </table>
<table width="100%" id="add1">
</table>
         </div>
    </td>
</tr>
</table>
      <td>
      </tr>
         <tr>
        <th colspan="2" align="left" scope="col" >诊断结果：</th>
      </tr>
      <tr>
      <td colspan="2" align="left" class="td">
        &nbsp;<input type="text" name="result1" id="textfield2" />
        <select name="result12" id="select2">
<option value="and">&nbsp;and&nbsp;</option>
<option value="or">&nbsp;or&nbsp;</option>
        </select>
        <input type="text" name="result2" id="textfield3" />
        <select name="result23" id="select3">
<option value="and">&nbsp;and&nbsp;</option>
<option value="or">&nbsp;or&nbsp;</option>
        </select>
        <input type="text" name="result3" id="textfield4" />
        <select name="result34" id="select4">
<option value="and">&nbsp;and&nbsp;</option>
<option value="or">&nbsp;or&nbsp;</option>
        </select>
        <input type="text" name="result4" id="textfield5" /></td>
      </tr>
      <tr>
        <td colspan="2" align="left"><input type="hidden" name="medreport_search" value="search">
        <input type="submit" name="button" id="button" value="提交" />&nbsp;&nbsp;<input type="reset" name="button2" id="button2" value="重置" />
        </td></tr>
    </table>
  </form>
</div>
</body>
</html>

后台接收数据：

if(isset($_POST["medreport_search"])&&($_POST["medreport_search"]=="search"))
        {  
        session_unset();
        foreach ($_POST as $key=>$value)
        $_SESSION[$key]=$value;       
        }   


如果将session_unset();改为unset($_SESSION),则，页面刷新后，$_SESSION的各项值都被删除，这是为什么？刷新页面的时候，if条件块明明不能执行的。


另外，我们可以这样取出$_SESSION里的值。

如$i=1;

$_SESSION["seeo".$i]

cfchengfei002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
服务器端获取表单数据
qiangzhogshou的博客
12-02 2205
一、单个值 单个值的表单标签有：文本框、密码框、文本域、下拉列表、单选 项目如下： 获取单个值： 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here&lt...
最详细的js获取当前url的方法
你若为我繁华，我愿成你烟花
11-14 1562
1、window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); 返回：http://i.cnblogs.com/EditPosts.aspx?opt=1 2、window.location.protocol(设置或获取 URL 的协议部分) var test = window.loc...
js接收参数几种方式
李赛赛的专栏
04-06 8705
  方式1:   var request = {             QueryString: function (val) {                 var uri = window.location.search;                 var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");      
javascript ajax请求,和接收服务器返回数据
01-07
javascript ajax请求,和接收服务器返回数据
ASP之处理用Javascript动态添加的表单元素数据的代码
10-30
总结来说，处理JavaScript动态添加的表单元素数据的关键在于理解服务器端如何解析这些数据。由于多个同名的表单元素会被组合成一个单一的字符串，所以需要正确地拆分这个字符串以获取每个元素的值。在ASP中，这通常...
Vue form表单动态添加组件实战案例
10-16
要删除动态添加的组件，我们需要在父组件中定义一个删除方法，如`deleteEducation`，接收要删除的索引作为参数。在该方法中，使用`splice`方法从数组中移除对应的元素。同时，如果在子组件中需要触发删除操作，可以...
jQuery使用动态渲染表单功能完成ajax文件下载
12-02
这个`jQuery.download`函数接收三个参数：`url`（文件下载的服务器端地址），`data`（要传递的参数，可以是字符串或对象），以及`method`（HTTP请求方法，默认为'POST'）。函数的主要工作流程如下： 1. 检查`url`和...
JS隐藏参数post传值实例
11-30
在给出的实例中，我们看到一个使用JavaScript进行POST方法提交表单的场景，其中包含了一个隐藏的参数。这个例子展示了如何通过JS动态地设置隐藏字段的值，并在用户点击链接时提交表单。以下是对这个实例的详细解释：...
使用JScript遍历Request表单参数集合
01-20
在Web开发中，尤其是使用ASP（Active Server Pages）技术时，`Request`对象是一个至关重要的组件，它允许我们获取客户端发送到服务器的数据。这个数据可以是表单数据、URL参数、查询字符串、Cookie或者HTTP头部信息...
JavaScript动态增减表单项
01-13
通过JavaScript 动态的添加表单 删除表单
Uncaught ReferenceError: 添加广告位权限 is not defined
judyfun的专栏
09-30 991
在写js的时候，调用方法时，传递的参数，如果zh
form表单提交后台获取表单信息
热门推荐
我是传奇
01-30 3万+
一、需求  客户端通过前端填写表单信息，后台获取表单信息进行相应处理。    二、工具  前端采用jsp,后台 springmvc     三、示例        (一)、前端输入的form表单代码 企业法人信息   *法人身份证号：   
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值