Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление и удаление input (https://javascript.ru/forum/misc/71282-dobavlenie-i-udalenie-input.html)

skitskis 10.11.2017 15:16

Всем доброго дня!
У меня еще маленький вопрос.

Вывожу данные:
<table class="table_style_1">
    <?php foreach ($tags as $item):?>
    <tr class="field">
        <td width="150px">
            <input type="hidden" name="id[]" value="<?=$item['id']?>" />
            <input disabled="" style="text-transform: uppercase" type="text" name="tag" value="<?=$item['tag']?>" placeholder="TEG" />
        </td>
        <td>
            <input disabled="" type="text" name="tag_name" value="<?=$item['tag_name']?>" placeholder="Название поля" />
        </td>
        <td width="200px">
            <select disabled="" type="radio" name="tag_template">
                <option <?php if($item['tag_template'] == '0') echo 'selected=""';?> value="0">Текстовое</option>
                <option <?php if($item['tag_template'] == '1') echo 'selected=""';?> value="1">Числовое с переводом числа в текст</option>
                <option <?php if($item['tag_template'] == '2') echo 'selected=""';?> value="2">Срок исполнения</option>
            </select>
        </td>
        <td id="open" width="32px">
            <a class="list_button" id="open"><i title="Редактировать" class="fa fa-pencil" aria-hidden="true"></i></a>
        </td>
        <td id="save" width="32px" style="display: none">
            <a class="list_button" id="save" href=""><i title="Сохранить" class="fa fa-save" aria-hidden="true"></i></a>
        </td>
        <td width="32px">
            <a class="list_button" id="del" href=""><i title="Удалить" class="fa fa-trash-o" aria-hidden="true"></i></a>
        </td>
    </tr>
    <?php endforeach;?>
</table>


По умолчанию input disabled="", при нажатии на кнопку open, делаю input открытым и открываю кнопку сохранить.
$("#open").click(function(){
    $(this).parent().first().find('input,select').prop('disabled',false);
    $(this).parent().find('td#open').css({'display': 'none'});
    $(this).parent().find('td#save').css({'display': ''});
});


Но данное условие срабатывает только на первый элемент. ????

Nexus 10.11.2017 15:20

skitskis, ID - уникальный идентификатор.
Именно так нужно в большинстве случаев стоит понимать значение этих двух букв.

Замените атрибут id на class.

skitskis 10.11.2017 15:29

Nexus, спасибо ))) все работает. Теперь буду знать, а то уже два дня сижу...

laimas 10.11.2017 16:10

...
Цитата:

Сообщение от skitskis
foreach ($tags as $item)
name="id[]"
name="tag_name"
name="tag_template"

?

skitskis 12.11.2017 11:43

Цитата:

Сообщение от laimas (Сообщение 469746)
...


?

да, я знаю, просто был недописанный код.
name="id[]"
name="tag_name[]"
name="tag_template[]"
))

laimas 12.11.2017 12:55

Это не все. Если ранее была тема о добавлении данных, то там был массив полей формирующийся динамически. В данном случае похоже речь идет о редактировании, а значит поля формы лучше связывать по id, а не опять набором по порядку, это может привести к ошибкам нежелательным.

Прятать id в скрытое поле можно, но совсем не требуется, и это поле безболезненно для последствий можно удалить. Лучше поступать так:

name="tag_name[<?=$item['id']?>]"
name="tag_template[<?=$item['id']?>]"

и каждый из этих ключей будет содержать массив, ключи у которого есть ID записей из базы. Можно задать имена и так, чтобы был один многомерный массив, каждое вложение которого, это массив, ключи которого ID, а значение ассоциативный массив: tag_name=>значение, tag_template=>значение.

А если бы ваш список содержал с десяток опций так бы и определялся выбор?

if($item['tag_template'] == '2') echo 'selected=""'

skitskis 23.01.2018 18:56

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

А именно: есть tr строки для клонирования, в них есть select со значение value шаблона input. Задача при смене значения select.set_tag_template изменить id поля input.tag_template.

делаю я это удалением старого поля и записываю новое поле с новым id.

Дело в том что, первая строка работает и я отлавливаю id, но после клонирования, в следующие строки я уже не могу поймать значение select.

Вот я завернул, надеюсь понятно. Вот сам код:
<form action="" method="POST" enctype="multipart/form-data">  
    <input type="hidden" name="agreement_id" value="<?=$data['id']?>" />
    
    <table class="table_style_1">
    <thead id="sortable" rel="agreement_tags">
    <tr class="field">
        <td width="20px">
            <a class="sortable_a"><i title="Переместить" class="fa fa-sort" aria-hidden="true"></i></a>
        </td>
        <td width="150px">
            <input type="hidden" name="id[]" value="0" />
            <input type="text" style="text-transform: uppercase" name="tag[]" value="" placeholder="TEG" />
        </td>
        <td width="200px">
            <input type="text" name="tag_name[]" value="" placeholder="Название поля" />
        </td>
        <td class="delete_clase_tag_template">
            <input type="text" name="tag_text[]" class="tag_template" value=""/>
        </td>
        <td width="200px">
            <select class="set_tag_template" type="radio" name="tag_template[]">
                <option value="text">Текстовое</option>
                <option value="srok_r_d">Срок рабочие дни</option>
                <option value="adres">Адрес</option>
            </select>
        </td>
        <td width="32px">
            <button name="save_tags" type="submit" class="save"><i title="Сохранить" class="fa fa-save" aria-hidden="true"></i></button>
        </td>
        <td width="32px" class="td_del_button">
            <a class="list_button_del" id="del"><i title="Удалить" class="fa fa-trash-o" aria-hidden="true"></i></a>
        </td>
    </tr>
    </thead>
    <tbody class="inputs_tag">
    
    </tbody>
    <tfoot>
    <tr class="tr_hiden_add_produkt_score">
        <td colspan="7">
            <a class="add_tag">Добавить тег</a>
        </td>
    </tr>
</table>
</form>


<script>
$(function() {
    $('.add_tag').click(function() {
       $('.field').first()                     
                     .clone()                      
                     .appendTo('.inputs_tag')              
                     .end()
                     .find('input,select').val('').end()                     
                     .find('input.id').val('0').end()
                     .find('.list_button_del').remove().end()
                     .find('.td_del_button').append('<a class="list_button_del" id="del"><i title="Удалить" class="fa fa-trash-o" aria-hidden="true"></i></a>')
                     .end()                     
                     .find('.list_button_del#del').click(function() {
                        $(this).parent().parent().remove();
                     })
    });
});
$(function() {
    $('.list_button_del#del').click(function() {
            $(this).parent().parent().remove();
    });
});   
    
    
    
//смена полей ввода (тег поля)//
$(function() {
    $('.set_tag_template').change(function(){
        tag_template = $(this).val();
            console.log(tag_template);
        //$(this).parent().parent().find('.tag_template').attr("id", tag_template);
        $(this).parent().parent().find('.tag_template').remove();
        $(this).parent().parent().find('td.delete_clase_tag_template').append('<input type="text" name="tag_text[]" class="tag_template" id="'+ tag_template +'" value=""/>');
        });
}); 


//смена полей ввода (тег поля)//


</script>

skitskis 23.01.2018 19:07

Вот тут можно посмотреть как работает, вывод в консоль настроен: https://codepen.io/Skitskis/pen/GyLddM

рони 23.01.2018 19:36

skitskis,
постаьте ваши click и change на то что есть всегда, table или form

$("table").on("click", ".add_tag", ....)

skitskis 23.01.2018 19:43

Цитата:

Сообщение от рони (Сообщение 476060)
skitskis,
постаьте ваши click и change на то что есть всегда, table или form

$("table").on("click", ".add_tag", ....)

add_tag у меня отрабатывает нормально. Проблема в том что при смене select, я не могу перехватить их val()


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