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>
        <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>
    <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('val1').value=vals;
                window.close();
            }
        </script>
    </body>
</html>

page2.html中选择的数据用户应发送到page1.html。

现在我有两个问题：

1）page2.html如何知道应该使用哪个<input type=text>来填充所选结果？

例如，在page1.html中，有两个input：“val1”和“val2”，当用户点击“val1”之后的按钮，然后他选择了一些东西，所选的值应该被填充到“val1”输入。

2）因为我启用了用户选择多个项目。例如，如果用户在“val1”之后单击按钮，则用户可以在page2.html中选择“car”和“bike”，然后将值“car，bike”填充到“val1”输入。 / p>

提交表单时，我在服务器端获得的值将是“car，bike”。

这就是说贴出的参数是：

val1:bike,car.

但我想这样，因为我在服务器端持有一个数组对象：

val1:bike
val1:car

任何方式？

Answer 1

您需要在page1.html中对onclick事件进行额外处理，以使其记住应该用结果填充哪个元素。然后在page2.html中，您需要使用.opener属性访问此值。

如果要将值数组发送到服务器，则需要将其作为数组传递。因此，您需要为每个值创建名为“val1 []”的输入。

编辑这是修改后的第1页和第2页的代码，让您了解我的意思是回答问题的第一部分。

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 ：

要回答问题的第二部分，这里是输入字段应该如何显示的示例

<input name="items[]" value="apples" />
<input name="items[]" value="oranges" />
<input name="items[]" value="bananas" />

它将作为数组发送到服务器。但也许你最好现在就把它留下来，然后在服务器端将值除以“，”。

使用javascript在页面之间发送值

1 个答案: