Объединение значений нескольких <input>
 

Здравствуйте, уважаемые девелоперы.

Измучал себе все мозги, перерыл тонны страниц гугла, ну никак не могу решить такую задачу:

есть два <select>:

<select id="1">
<option>A</option>
<option>B</option>
</select>

<select id="2">
<option>C</option>
<option>D</option>
</select>

и один <input>, который будет скрыт:

<input type="text" name="title" />

Хочу сделать так, чтобы значения обоих селекторов передавались в текстовое поле. Например, выбираем в первом селекторе A, а во втором B, в поле появляется A B, которое можно уже отправить на сервер.

Добавил в оба селектора,

<select onchange="parentNode.getElementsByTagName('input')[0].value=value">

но это работает только для одного селектора.

Прошу вашей помощи, ибо в JS я ноль.

<script type="text/javascript">
window.onload = function(){
    var select = document.forms['select'].elements, i = select.length, array = [];
    while(i--){
        select[i].onchange = function(){
            array.push(this[this.selectedIndex].text);
            select[2].value = array;
        };
    }
};
</script>

<form action="" method="post" name="select">
    <select>
        <option disabled>Выберите1</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>
    <select>
        <option disabled>Выберите2</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
   </select>
   <input type="text" value="" />
   <input type="submit" value="Отправить" />
</form>

Ну и соответственно в элементе input['text'] замените на hidden

Огромное спасибо!

А еще такой вопрос: как заместо запятой между двумя значениями поставить пробел?

<script type="text/javascript">
window.onload = function(){
    var select = document.forms['select'].elements, i = select.length;
    while(i--){
        select[i].onchange = function(){
            select[2].value += this[this.selectedIndex].text+' ';
        };
    }
};
</script>

<form action="" method="post" name="select">
    <select>
        <option disabled>Выберите1</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>
    <select>
        <option disabled>Выберите2</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
   </select>
   <input type="text" value="" />
   <input type="submit" value="Отправить" />
</form>

или чуть подправить выражение (в первом примере):

select[2].value = array.join(' ');

Ни у кого нет идей, как можно было бы это организовать проще?

Просто возникла проблема, нужно брать информацию из 10 селекторов и отправлять в один input... :)

Куда еще проще? Можно конечно разделить формы, но и так все прозрачно...

В чем проблема-то?

<script type="text/javascript">
window.onload = function(){
    var select = document.forms['select'].elements, i = select.length;
    while(i--){
        select[i].onchange = function(){
            document.forms['input'].elements[0].value += this[this.selectedIndex].text+' ';
        };
    }
};
</script>

<form action="" method="post" name="select">
    <select>
        <option disabled>Выберите1</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>
   <select>
        <option disabled>Выберите2</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
   </select>
   <select>
        <option disabled>Выберите3</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
   </select>
   <select>
        <option disabled>Выберите4</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
   </select>
   <select>
        <option disabled>Выберите5</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
   </select>
   <select>
        <option disabled>Выберите6</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
   </select>
</form>

<form action="" method="post" name="input">
   <input type="text" value="" />
   <input type="submit" value="Отправить" />
</form>

Дуб я :)

Еще раз спасибо, но я сейчас попробовал изменить на

<script type="text/javascript">
window.onload = function(){
    var select = document.forms['select'].elements, i = select.length;
    while(i--){
        select[i].onchange = function(){
            select[[B][U]10[/U][/B]].value += this[this.selectedIndex].text+' ';
        };
    }
};
</script>

Все работает как нужно :)