send values between page using javascript
I have one page which enable user to choose something in a new window:
Page1.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
</head>
<body>
<form action="update.action">
<input name="val1" type="text" id="val1" value="" readonly="readonly"> <input type="button" name="Submit2" value="select value" onclick="javascript:window.open('page2.html','','width=750,height=500,scrollbars=yes');">
<br/>
<input name="val2" type="text" id="val2" value="" readonly="readonly"> <input type="button" name="Submit2" value="select value" onclick="javascript:window.open('page2.html','','width=750,height=500,scrollbars=yes');">
</form>
</body>
</html>
page2.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
</head>
<bod开发者_如何学运维y>
<input type="checkbox" value="Bike" />Bike<br/>
<input type="checkbox" value="Car" />Car<br/>
<input type="button" value="OK" id="sub"/>
<script type="text/javascript">
document.getElementById("sub").onclick=function(){
var cks=document.getElementsByTagName('input');
var vals="";
for(var i=0;i<cks.length;i++){
if(cks[i].checked){
vals+=','+cks[i].value;
}
}
window.opener.document.getElementById('val1').value=vals;
window.close();
}
</script>
</body>
</html>
The data user choosed in page2.html should be send to page1.html.
Now I have two questions:
1)how did the page2.html know which <input type=text> should used to fill the selected result?
For example,in the page1.html,there are two input: "val1" and "val2",when user click the button after "val1",then he select something,the selected value should be filled to the "val1" input.
2)Since I enable user select multiple items. For example, if user click the button after "val1",then user can select both "car" and "bike" in the page2.html,then the value "car,bike" will be filled to the "val1" input.
When the form is submitted,the value I got in the server side will be "car,bike".
That's to say the posted parameter is :
val1:bike,car.
But I want this way since I hold a array object in the server side:
val1:bike
val1:car
Any way?
You need do extra processing of onclick events in page1.html to make it remember which element should be filled with result. And then in page2.html you need to access this value using .opener property.
If you want to send array of values to the server, you need to pass it as array. So, you need to create input named "val1[]" for each value.
EDIT Here's modified code of page1 and page2 to make you see what I mean answering first part of the question.
page1.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
</head>
<body>
<script>
var openerInput = 'val1';
function openwindow(id) {
openerInput=id;
window.open('page2.html','','width=750,height=500,scrollbars=yes');
}
</script>
<form action="update.action">
<input name="val1" type="text" id="val1" value="" readonly="readonly"> <input type="button" name="Submit2" value="select value" onclick="openwindow('val1')">
<br/>
<input name="val2" type="text" id="val2" value="" readonly="readonly"> <input type="button" name="Submit2" value="select value" onclick="openwindow('val2')">
</form>
</body>
</html>
page2.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
</head>
<body>
<input type="checkbox" value="Bike" />Bike<br/>
<input type="checkbox" value="Car" />Car<br/>
<input type="button" value="OK" id="sub"/>
<script type="text/javascript">
document.getElementById("sub").onclick=function(){
var cks=document.getElementsByTagName('input');
var vals="";
for(var i=0;i<cks.length;i++){
if(cks[i].checked){
vals+=','+cks[i].value;
}
}
window.opener.document.getElementById(window.opener.openerInput).value=vals;
window.close();
}
</script>
</body>
</html>
UPD:
To answer the second part of your question, here's the example how the input fields should look
<input name="items[]" value="apples" />
<input name="items[]" value="oranges" />
<input name="items[]" value="bananas" />
It will be sent to the server as array. But maybe you'd better leave it as is now, and just split the value by "," on the server side.
加载中,请稍侯......
精彩评论