Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна помощь!! Не пойму в чем дело при повторном добавлении выпадающего списка!!! (https://javascript.ru/forum/dom-window/76430-nuzhna-pomoshh-ne-pojjmu-v-chem-delo-pri-povtornom-dobavlenii-vypadayushhego-spiska.html)

Екатерина_2404 10.01.2019 22:24
Нужна помощь!! Не пойму в чем дело при повторном добавлении выпадающего списка!!!
 
Подскажите пожалуйста, не могу разобраться. При повторном добавлении (нажатии кнопки Добавить строку) таблицы у выпадающего списка не выводит в input значение option. При первом выборе все работает. За ранее спасибо!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<SCRIPT language="javascript" type="text/javascript">
function addRow(tableID) {

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
row = table.insertRow(table.rows.length);
for(var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
if(i == (colCount - 1)) {
newcell.innerHTML = "<INPUT type=\"button\" value=\"Удалить строку\" onclick=\"SomeDeleteRowFunction(this)\"/>";

} else {
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
}

/**
* This method deletes the specified section of the table
* OR deletes the specified rows from the table.
*/

function SomeDeleteRowFunction(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}

function OptionSum(){
var sum = $('#opt').val();
$('#sum').val(sum);
}

</script>

<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD>
<select id="opt" onchange="OptionSum()" >
<option value="80">- грант в рамках академической мобильности</option>
<option value="60">- международные конкурсы, олимпиады (1 место)</option>
<option value="50">- международные конкурсы, олимпиады (2 место)</option>
<option value="40">- международные конкурсы, олимпиады (3 место)</option>
<option value="50">- всероссийские конкурсы, олимпиады (2-3 тур, 1 место)</option>
<option value="40">- всероссийские конкурсы, олимпиады (2-3 тур, 2 место)</option>
<option value="30">- всероссийские конкурсы, олимпиады (2-3 тур, 3 место)</option>
<option value="20">- региональные конкурсы, олимпиады (1 место)</option>
<option value="15">- региональные конкурсы, олимпиады (2 место)</option>
<option value="10">- региональные конкурсы, олимпиады (3 место)</option>
<option value="15">- городские или вузовские конкурсы, олимпиады (1 место)</option>
<option value="10">- городские или вузовские конкурсы, олимпиады (1 место)</option>
<option value="5">- городские или вузовские конкурсы, олимпиады (1 место)</option>
</select>
</TD>

<TD>
<input type=text name="sum" size="5" id="sum" >

</TD>

<TD>
<INPUT type="button" value="Добавить строку" onclick="addRow('dataTable')" />
</TD>
</TR>
</TABLE>

j0hnik 11.01.2019 01:29
id - уникальный элемент на странице, не нужно их дублировать.

Екатерина_2404 11.01.2019 06:34
то есть передавать в input сразу переменную? значение option

laimas 11.01.2019 08:33
А подключение jquery ради этого?
var sum = $('#opt').val();
$('#sum').val(sum);

Используйте тогда его на всю катушку:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#datatable {
    width: 600px;
    border-collapse: separate;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var tbl = $('#datatable').on('click change', 'button,select', function(e) {
        var src = $(this);
        if(src.hasClass('opt')) {
            src.parent().next().find('input').val(src.val())
        } else {
            var tr = src.closest('tr');
            if(src.hasClass('add')) {
                tr.clone().find('input').val('').end().find('button').toggleClass('add del').text('Удалить строку').end().appendTo(tbl)
            }
            else tr.remove() 
        }
    })    
})
</script>
</head>

<body>

<table id="datatable">
    <tr>
        <td>
            <select class="opt">
                <option value="80">- грант в рамках академической мобильности</option>
                <option value="60">- международные конкурсы, олимпиады (1 место)</option>
                <option value="50">- международные конкурсы, олимпиады (2 место)</option>
                <option value="40">- международные конкурсы, олимпиады (3 место)</option>
                <option value="50">- всероссийские конкурсы, олимпиады (2-3 тур, 1 место)</option>
                <option value="40">- всероссийские конкурсы, олимпиады (2-3 тур, 2 место)</option>
                <option value="30">- всероссийские конкурсы, олимпиады (2-3 тур, 3 место)</option>
                <option value="20">- региональные конкурсы, олимпиады (1 место)</option>
                <option value="15">- региональные конкурсы, олимпиады (2 место)</option>
                <option value="10">- региональные конкурсы, олимпиады (3 место)</option>
                <option value="15">- городские или вузовские конкурсы, олимпиады (1 место)</option>
                <option value="10">- городские или вузовские конкурсы, олимпиады (1 место)</option>
                <option value="5">- городские или вузовские конкурсы, олимпиады (1 место)</option>
            </select>
        </td>
        <td>
            <input type="text" name="sum" size="5" >
        </td>
        <td>
            <button class="add">Добавить строку</button>
        </td>
    </tr>
</table>
</body>
</html>


Замечание: Если это как часть формы и будет передаваться на сервер, то в общем никакого поля "sum" не требуется, сам список уже отображает выбор, а если и передавать, то в зависимости от серверного языка можно получить значение только последнего поля. При добавлении строки, получение фокуса списком в поле "sum" сразу будет вставлено значение первой опции, так как список не имеет опции с пустым значением, это обусловлено способом установки обработчиков. Но не логичен сам подход - если список не имеет опции приглашающей сделать выбор и с пустым значением, то поместить значение первой опции в поле "sum" можно только после выбора какой либо иной опции.

Екатерина_2404 11.01.2019 09:02
это часть формы. например студент заполняет анкету и нажимает сохранить результат, после чего идет запись в базу. Спасибо за помощь!

Екатерина_2404 11.01.2019 09:06
подскажите еще пожалуйста. А не лучше сделать запись с этим селектом в базу и из базы вытягивать значения на страницу, а потом снова делать запись но для конкретного пользователя с его заполнением?

laimas 11.01.2019 09:17
Цитата:
Сообщение от Екатерина_2404
например студент заполняет анкету и нажимает сохранить результат, после чего идет запись в базу.
1) Зачем тогда поле "sum"? Оно ведь совсем не нужное, так как сам список и отображает выбор, и передаст значение на сервер, нужно только указать списку имя, иначе он не будет передан на сервер. А поле sum удалить, если уж и требуется показывать значение выбора в списке, то просто писать его как тест в ячейку таблицы.

2) Если на сервере РНР, то он примет значение только последнего элемента в наборе. Для того чтобы он получил все имена полей должны отражать принадлежность к массиву, то есть name="name[]" - к имени поля добавляются квадратные скобки.

laimas 11.01.2019 09:17
Цитата:
Сообщение от Екатерина_2404
А не лучше сделать запись с этим селектом в базу и из базы вытягивать значения на страницу, а потом снова делать запись но для конкретного пользователя с его заполнением?
Не понял.

Екатерина_2404 11.01.2019 09:44
в общем, задача такая. Есть анкета, большая. Нарисовать ее получается только так как указано в примере, поле sum заполняет балл выбранного значения select. То есть правильно я поняла, мне не хватает массива, чтобы запомнить все значения, а не только первого??

А второе я имела ввиду, что сам select сразу хранить в таблице базы и от туда выводить на страницу через PHP. Просто начинаю еще разбираться, не знаю как лучше реализовать данный блок

laimas 11.01.2019 10:00
Цитата:
Сообщение от Екатерина_2404
поле sum заполняет балл выбранного значения select.
Это полнейшая чушь, ибо это просто добавление в форму лишнего элемента тогда, когда сам список обеспечит тоже самое. Вот так:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#datatable {
    width: 600px;
    border-collapse: separate;
}
#datatable td {
    border: 1px solid #ccc;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var tbl = $('#datatable').on('click', 'button', function() {
        var src = $(this), tr = src.closest('tr');
        if(src.hasClass('add')) tr.clone()
                                  .find('td:eq(1)')
                                  .text('')
                                  .end()
                                  .find('button')
                                  .toggleClass('add del')
                                  .text('Удалить строку')
                                  .end()
                                  .appendTo(tbl);
        else tr.remove() 
    }).on('change', 'select', function() {
        $(this).parent().next().text(this.value)
    });    
})
</script>
</head>

<body>

<table id="datatable">
    <tr>
        <td>
            <select name="set[]" class="opt">
                <option value="">Выберите ...</option>
                <option value="80">- грант в рамках академической мобильности</option>
                <option value="60">- международные конкурсы, олимпиады (1 место)</option>
                <option value="50">- международные конкурсы, олимпиады (2 место)</option>
                <option value="40">- международные конкурсы, олимпиады (3 место)</option>
                <option value="50">- всероссийские конкурсы, олимпиады (2-3 тур, 1 место)</option>
                <option value="40">- всероссийские конкурсы, олимпиады (2-3 тур, 2 место)</option>
                <option value="30">- всероссийские конкурсы, олимпиады (2-3 тур, 3 место)</option>
                <option value="20">- региональные конкурсы, олимпиады (1 место)</option>
                <option value="15">- региональные конкурсы, олимпиады (2 место)</option>
                <option value="10">- региональные конкурсы, олимпиады (3 место)</option>
                <option value="15">- городские или вузовские конкурсы, олимпиады (1 место)</option>
                <option value="10">- городские или вузовские конкурсы, олимпиады (1 место)</option>
                <option value="5">- городские или вузовские конкурсы, олимпиады (1 место)</option>
            </select>
        </td>
        <td></td>
        <td>
            <button class="add">Добавить строку</button>
        </td>
    </tr>
</table>
</body>
</html>


И тут нет никакого sum, выбранное значение ОПЦИИ списка просто отображается в соседней ячейке (зачем это нужно не понятно), а списку дано имя set[]. Если добавить еще несколько строк и сделать выбор в списках, то на сервере будет получен массив ($_GET или $_POST в зависимости от метода передачи формы), в котором под ключом set будет массив всех значений, которые были выбраны в списках. Зачем тут еще другое поле кроме списка нужно?! Пусть форма передается методом POST, тогда на сервере:

if( $_POST['set'] && $data = array_diff(array_map('intval', $_POST['set']), [0])) {
    //массив $data будет содержать все значения выбранные во всех списках
}


Цитата:
Сообщение от Екатерина_2404
второе я имела ввиду, что сам select сразу хранить в таблице базы и от туда выводить на страницу через PHP
Ну в общем так и поступают, если опции для этого списка могут добавляться/удаляться, но хранить их как 5, 10, ... и какой-то текст можно только в том случае, если значение для опций, это уникальные значения, в противном случае хранить надо под уникальным id каждую запись, для которой будут поля значений опций и их текста. А в таблицу в которую вносятся некие записи с которыми связан этот список записывают или id, или значение опции, если они уникальны.

Екатерина_2404 11.01.2019 10:08
да я согласна ,что поле лишнее было, но не могла разобраться, теперь все встало на свои места. спасибо большое за развернутый ответ. Буду пробовать, поняла в каком направлении работать!

Екатерина_2404 11.01.2019 12:43
Можно Вас попросить помочь еще раз. Вы написали вытягивать значения if( $_POST['set'] && $data = array_diff(array_map('intval', $_POST['set']), [0])) {
//массив $data будет содержать все значения выбранные во всех списках
}

Пытаюсь сделать пишет синтаксическая ошибка. Помогите вывести значения которые передаются. За ранее спасибо!

laimas 11.01.2019 12:57
Какая именно ошибка? В версиях РНР до 5.4 нельзя объявлять массив как [], только array(). А вообще это лучше так записать:

if( $_POST['set'] && $data = array_filter(array_map('intval', $_POST['set']), function($v) {
        return $v;
    })) {
    //массив $data будет содержать все значения выбранные во всех списках
    
    echo '<pre>' .  print_r($data, 1) . '</pre>'; //это вывод чисто для посмотреть
}


Вот только чему в базе все это записываться будет, это вопрос.

Екатерина_2404 11.01.2019 13:04
А как вы предлагаете хранить эти данные если потом это будет открываться на редактирование? Может я все усложняю?)) Это своего рода анкета, по заполнению так же будет формироваться рейтинг.

Екатерина_2404 11.01.2019 13:14
Массив объявлять array() у select где name ="set[]" ? у меня меньше версия оказывается....

laimas 11.01.2019 14:15
Цитата:
Сообщение от Екатерина_2404
А как вы предлагаете хранить эти данные если потом это будет открываться на редактирование?
Вы думаете я понимаю что это, для чего это, и почему оно так пишется? :) Анкета понятие резиновое, что за сим скрывается мне не ведомо. Но вот пример иного, что сути не меняет, и данные ваших анкет как то должны быть связаны.

Будем делать планировщика. Первое что нужно, это таблица в базе которая будет хранить основные (первичные) данные планировщика - даты задач. А задачи установленные для каждой даты будут писаться в связанную таблицу ежедневных задач, которая в свою очередь связана с таблицей самих задач - их описание, параметры...

Таблица планировщика scheduler - поле scheduler_date типа DATE первичное, поле scheduler_comment типа VARCHAR.

Таблица задач на день daily_tasks - поле daily_date типа DATETIME уникальное, поле daily_task типа MEDIUMINT.

Таблица задач tasks - поле tasks_task MEDIUMINT первичное с автоинкрементом, поле приоритета задачи tasks_priority типа ENUM со значениями "высокий,средний,обычный" , поле tasks_desc типа VARCHAR описания задачи.

Таблицу tasks можно сравнить в вашим списком. Прежде чем работать с планировщиком необходимо определить задачи, добавив их в таблицу. Это можно сделать обычной формой типа ка к у вас, в котором есть список построенный на параметрах типа поля tasks_priority и поля для ввода описания для поля tasks_desc. При записи этих данных в поле tasks_task таблицы будет формироваться уникальное значение, по которому эта таблица будет связана с таблицей daily_tasks. Таблицу задач можно редактировать - добавлять новые, удалять существующие, при этом при удалении нужно удалять и все записи удаляемой задачи из таблицы daily_tasks, то есть те, значение которых в поле daily_task равно значению tasks_task удаляемой задачи. В противном случае будет нарушена целостность данных.

Добавление задач в планировщик, это форма в которой строится список всех задач имеющихся в таблице tasks, то есть опции списка будут иметь значения из поля tasks_task и текст составленный из значений полей tasks_desc и tasks_priority. Вторым полем в форме будет календарь с возможность выбора даты и времени. При этом при добавлении в форму новых полей для определения еще задач, в добавляемых полях можно установить только время. То есть дата устанавливается единожды.

При сохранении этой формы в таблицу scheduler в поле scheduler_date пишется установленная дата, а в таблицу daily_tasks все задачи установленные, то есть в поле daily_date пишутся выбранная дата + каждое выбранное время, и соответственно для каждого времени значение выбранной задачи в поле daily_task.

Чтобы просмотреть все установленные задачи (вывести их на экран), выбираются все даты из таблица scheduler, все связанные по этой дате в поле daily_date таблицы daily_tasks значения поля daily_task, по которому из таблицы tasks выбираются описание и приоритеты задач. То есть это будет запрос с объединением LEFT JOIN.

Для удаления установленной задачи нужно на сервер передать значение ее даты/времени и удалить ее из таблицы daily_tasks для daily_date равное указанному дате/времени. А если нужно удалить все задачи дня, то нужно передать дату и удалить в таблице scheduler запись для scheduler_date равной указанной дате, и все записи из таблицы daily_tasks у которых значение поля daily_date имеет указанную дату.

Написано много и может быть не понятно, но это в общем-то все упрощено. Здесь есть связи, что позволяет производить с этими данными всевозможные операции. Если ваши анкеты связаны с их "душами", которые как-то где-то описаны, и данная форма как раз есть добавление анкеты такой "душе", форма как-то связана с этой душой по ее ID, то все нормально. Иначе ....

А список - если он не редактируемый, то проще его описать как массив в переменной.

laimas 11.01.2019 14:21
Цитата:
Сообщение от Екатерина_2404
Массив объявлять array() у select где name ="set[]" ?
Нет, в полях формы нужно указывать имя с добавлением [], иначе будет возвращено значение только последнего одноименного поля формы. Спискам multyple также к имени нужно добавлять [] по этой же причине. А об объявлении массива в РНР это тут http://php.net/manual/ru/language.types.array.php


Часовой пояс GMT +3, время: 00:30.