отправлять значения между страницами, используя JavaScript - PullRequest
0 голосов
/ 18 июля 2011

У меня есть одна страница, которая позволяет пользователю выбрать что-то в новом окне:

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», он может выбрать «car» и «bike» в page2.html, тогда значение «car, bike» будет заполнено для ввода «val1».

Когда форма отправлена, значение, полученное мной на стороне сервера, будет "машина, велосипед".

То есть опубликованный параметр:

val1:bike,car.

Но я хочу этот путь, так как я держу объект массива на стороне сервера:

val1:bike
val1:car

В любом случае?

1 Ответ

0 голосов
/ 18 июля 2011

Вам необходимо выполнить дополнительную обработку событий onclick в page1.html, чтобы она помнила, какой элемент должен быть заполнен результатом. А затем в 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" />

Он будет отправлен на сервер в виде массива. Но, возможно, вам лучше оставить все как есть и просто разделить значение на «,» на стороне сервера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...