javascript 提交表单输出表单值,再次提交时保留第一次的值

JavaScript021

javascript 提交表单输出表单值,再次提交时保留第一次的值,第1张

方法有n种

1、表单提交方式:

1)Get方式提交

function UrlSearch() {

var name,value

var str = window.location.href//取得整个地址栏

var num = str.indexOf("?")

str = str.substr(num+1)//取得所有参数

var arr = str.split("&")//各个参数放到数组里

for ( var i = 0i <arr.lengthi++ ) {

num = arr[i].indexOf("=")

if ( num >0 ) {

name = arr[i].substring(0,num)

value = arr[i].substr(num+1)

this[name] = value

}

}

}

var Request = new UrlSearch()

//以上是模拟asp的Request对象的QueryString方法

var Key = Request.key //获取上次提交的参数key的值

//有了这个值就可以在document.getElementById("showme").innerHTML赋值时写成Key + values

2)Post方式提交

可以借助asp,如

var Key = "<%=request.Form("key")%>"

之后同理,在赋值时写成Key + values

2、使用ajax

1)不使用表单提交,而使用ajax发送数据,如此页面就不会刷新了,既可以实现表单提交的要求,又可以用js随意修改页面上的文字。

2)使用ajax将上次提交的数据记录到Session或Cookie,供下次调用

3、用js把上次提交的数据记录到Cookie,供下次调用。

这个建议你用ajax来完成。

以jq的ajax为例

==============

$("#form").submit(function(){

var strArray=$(this).serializeArray()//将form表单转为数组形式序列化表单

$.post("你要提交的后台页面地址",strArray,function(result,status){

//result是由后台返回的id

//status是状态,为success时成功。

if(status=="success"){

window.open("要打开的新窗口地址?id="+result)//打开一个新窗口,并用get方法传入id

}

})

return false//此句是防止页面提交

})

=================

以上是jq代码。

后台代码,要看你用的是什么语言了。

比如说php,有个msyql_insert_id()可以获取最后一条插入记录的id。

如果是asp,可以用select top 1 id from 表 order by id desc的方法来获取id。

=================

后台插入数据库的代码,就由你自己来写了。

新打开的窗口,只需获取id即可

父窗口代码(parent.html)

<!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>

<title>Untitled Page</title>

</head>

<body>

<input type="text" name="data_key" id="data_key" />

<input type="text" name="data_value" id="data_value" />

<input type="button" id="open_child_window" value="list_datas"/>

<script type="text/javascript">

window.onload = function(){

//取得打开子窗口的按钮

var openChildBtn = document.getElementById("open_child_window")

//打开新窗口函数

function openNewWindow(url){

window.open(url)

}

//调用打开新窗口函数,指定新窗口地址

function openChildWindow(){

openNewWindow("child.html")

}

//为按钮绑定事件

if (document.all) {

openChildBtn.attachEvent("onclick",openChildWindow)//IE

}else{

openChildBtn.addEventListener("click",openChildWindow)//非IE

}

}

</script>

</body>

</html>

子窗口代码(child.html)这个必须按这个命名,如果要改,需要把父窗口代码里面的child.html也同步改掉

<!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>

<title>Untitled Page</title>

<style type="text/css">

body{font-size:12px}

.data_list{background:#ddf}

.data_list td{background:white}

</style>

</head>

<body>

<table cellspacing="1" cellpadding="3" border="0" class="data_list">

<tr>

<td id="data_key_1">data_key_1</td>

<td id="data_value_1">data_value_1</td>

<td><input type="button" id="data_submitor_1" value="submit"/></td>

</tr>

<tr>

<td id="data_key_2">data_key_2</td>

<td id="data_value_2">data_value_2</td>

<td><input type="button" id="data_submitor_2" value="submit"/></td>

</tr>

<tr>

<td id="data_key_3">data_key_3</td>

<td id="data_value_3">data_value_3</td>

<td><input type="button" id="data_submitor_3" value="submit"/></td>

</tr>

<tr>

<td id="data_key_4">data_key_4</td>

<td id="data_value_4">data_value_4</td>

<td><input type="button" id="data_submitor_4" value="submit"/></td>

</tr>

</table>

<script type="text/javascript">

//向父窗口发送数据

function SendDataToParent(key,value){

if (window.opener &&window.opener.document.getElementById("data_key")&&window.opener.document.getElementById("data_value")) {

window.opener.document.getElementById("data_key").value = key

window.opener.document.getElementById("data_value").value = value

}

}

window.onload = function(){

//如果父窗口已经被关闭或者不存在,直接返回

if (!window.opener) return

//遍历所有的数据

for(var i=1i<5++i){

//取得提交按钮

var btn = document.getElementById("data_submitor_" + i.toString())

//如果按钮有效

if (btn) {

//为按钮绑定事件

if(document.all){//IE

//attachEvent响应函数中this指针是指向window而不是指向事件响应对象的,所以需要一个函数来实现对象传递

function GetEventHandle(tag) {

return function () {

var temp = tag.id.split("_")

var index = temp[temp.length-1]

SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_"+index).innerHTML)

}

}

btn.attachEvent("onclick",GetEventHandle(btn))

}else{//非IE

btn.addEventListener("click",function(){

var temp = this.id.split("_")

var index = temp[temp.length-1]

SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_"+index).innerHTML)

})

}

}

}

}

</script>

</body>

</html>

我都写了注释的,如果还不清楚就补充问题