Форум

Екатерина_2404 · #1 (**permalink**) 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 · #2 (**permalink**) 11.01.2019, 01:29

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

Екатерина_2404 · #3 (**permalink**) 11.01.2019, 06:34

то есть передавать в input сразу переменную? значение option

laimas · #4 (**permalink**) 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 · #5 (**permalink**) 11.01.2019, 09:02

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

Екатерина_2404 · #6 (**permalink**) 11.01.2019, 09:06

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

laimas · #7 (**permalink**) 11.01.2019, 09:17

Сообщение от Екатерина_2404

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

1) Зачем тогда поле "sum"? Оно ведь совсем не нужное, так как сам список и отображает выбор, и передаст значение на сервер, нужно только указать списку имя, иначе он не будет передан на сервер. А поле sum удалить, если уж и требуется показывать значение выбора в списке, то просто писать его как тест в ячейку таблицы.

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

laimas · #8 (**permalink**) 11.01.2019, 09:17

Сообщение от Екатерина_2404

А не лучше сделать запись с этим селектом в базу и из базы вытягивать значения на страницу, а потом снова делать запись но для конкретного пользователя с его заполнением?

Не понял.

Екатерина_2404 · #9 (**permalink**) 11.01.2019, 09:44

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

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

laimas · #10 (**permalink**) 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, или значение опции, если они уникальны.

Форум

Справочник

Discord чат

Курсы javascript