Как получить ID Dynami c в Jquery? - PullRequest
Новая
       0

Как получить ID Dynami c в Jquery?

1 голос
/ 18 февраля 2020

Я делаю динамический c ввод, когда пользователь нажимает « Добавить из контрольного списка », появится форма ввода, а если снова нажать «Добавить из контрольного списка», то форма ввода становится равной двум и и так далее, для действительного кода выбора уже есть такие данные, как ' 1-022020-001 ', теперь для ввода станций и оборудования эти данные находятся там, где значение ' 1-022020-001 'находится в базе данных, теперь я все еще не понимаю, как получить результаты из значения' 1-022020-001 ', которое может быть отправлено на контроллер и возвращено на js для отображения Станция ввода и оборудование.

DEMO: 

var html = '';
    $('.btnSend').attr('disabled', true);

    $("#inputCode, #inputStasiun, #inputPeralatan").select2({
        placeholder: "Choose one",
        allowClear: true
    });

    var runNumberAdd = 1;
    $("#add-more").click(function() {
        html =
        '<div class="col-sm-6 control-group">'+
            '<div class="panel panel-default" style="padding: 10px;">'+
                '<div class="form-horizontal">'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Tanggal</label>'+
                        '<div class="col-sm-10">'+
                            '<input name="inputTgl[]" type="date" id="inputTglClone'+ runNumberAdd +'" class="form-control inputTglClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Code</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputCode[]" id="inputCodeClone'+ runNumberAdd +'" class="form-control select2 inputCodeClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Stasiun</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputStasiun[]" id="inputStasiunClone'+ runNumberAdd +'" class="form-control select2 inputStasiunClone">'+
                            '</select>'+
                            '<input name="inputStasiunHidden[]" type="text" id="inputStasiunHiddenClone'+ runNumberAdd +'" class="form-control inputStasiunHiddenClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Peralatan</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputPeralatan[]" id="inputPeralatanClone'+ runNumberAdd +'" class="form-control select2 inputPeralatanClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Deskripsi</label>'+
                        '<div class="col-sm-10">'+
                            '<textarea name="inputDeskripsi[]" id="inputDeskripsiClone'+ runNumberAdd +'" class="form-control inputDeskripsiClone"></textarea>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Resume</label>'+
                        '<div class="col-sm-10">'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist1Clone'+ runNumberAdd +'" class="inputChecklist1Clone'+ runNumberAdd +'" value="1"> OK'+
                            '</label>'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist2Clone'+ runNumberAdd +'" class="inputChecklist2Clone'+ runNumberAdd +'" value="0"> NOK'+
                            '</label>'+
                            '<div class="pull-right">'+
                                '<button type="button" class="btn btn-danger btn-sm remove_list"> Hapus From Checklist</button>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>';
        $('.clone-form').append(html);
        $(".inputCodeClone, .inputStasiunClone, .inputPeralatanClone").select2({
            placeholder: "Choose one",
            allowClear: true
        });
        $.ajax({
            url   : 'showDataCode',
            dataType : 'JSON',
            async : true,
            success : function(data) {
                var minrunNumberAdd = runNumberAdd - 1;
                var attrCode = '#inputCodeClone' + minrunNumberAdd;
                $(attrCode).append($("<option selected disabled></option>").attr("value", '').text('')); 
                $.each(data, function(key, value) {   
                    $(attrCode).append($("<option></option>").attr("value", value.id).text(value.code)); 
                });
            }
        });
        $('.btnSend').attr('disabled', false);
        $('.inputStasiunClone').attr("disabled", true);
        $('.inputPeralatanClone').attr("disabled", true);
        runNumberAdd++;
    });
    
    $("body").on("click", ".remove_list",function() {
        var numItems = $('.control-group').length;
        $(this).parents(".control-group").remove();
        if (numItems == 1) {
            $('.btnSend').attr('disabled', true);
        } else {
            $('.btnSend').attr('disabled', false);
        }
    });
    
    
    
    
    // How to get attribut ID
    // My Xample
    $('input[id^="inputCodeClone"]').on('click', function() { 
        alert('A');
    });
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="box-header">
                    <div class="pull-right">
                        <button type="button"  id="add-more" class="btn btn-success btn-sm"> Tambah From Checklist</button>
                    </div>
                </div>
                <form action="<?= base_url('GeneralFormChecklist/submitChecklist'); ?>" method="post" id="formInput">
                    <div class="box-body">
                        <div class="clone-form">
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-sm btnSend">Kirim Checklist</button>
                        </div>
                    </div>
                </form>

Пример данных в базе данных 1

Вопрос:

  1. как можно отобразить id_location на входной станции и id_equipment_name на входном оборудовании, выбрав код, как в базе данных позже?

ПРИМЕЧАНИЕ: код, который я застрял при поиске динамического c ID

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

если вы хотите получить значение текущего входа, который вы щелкнули, или всех ближайших входов, то вы можете использовать $ (это). это поможет вам указать на текущий фокусированный или выбранный элемент.

0 голосов
/ 20 февраля 2020

Я просто пытаюсь добавить несколько полей. Вы изменяете 

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box-header">
                    <div class="pull-right">
                        <button type="button"  id="add-more" class="btn btn-success btn-sm"> Tambah From Checklist</button>
                    </div>
                </div>
                <form action="<?= base_url('GeneralFormChecklist/submitChecklist'); ?>" method="post" id="formInput">
                    <div class="box-body">
                        <div class="clone-form">
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-sm btnSend">Kirim Checklist</button>
                        </div>
                    </div>
                </form>
<script>
$(document).ready(function(){

var html = '';


    $('.btnSend').attr('disabled', true);

    $("#inputCode, #inputStasiun, #inputPeralatan").select2({
        placeholder: "Choose one",
        allowClear: true
    });

    var runNumberAdd = 1;
    $("#add-more").click(function() {
	html =  $('<div/>', {
        'class': 'col-sm-6 control-group'
    });
	var firstchild =  $('<div/>', {
        'class': 'form-group'
    });
   var	lable1 =  $('<label/>', {
        'class': 'col-sm-2 control-label',
	text: 'Tanggal',
	id: 'lbl1'
    }).on('click',function(){
	alert("First lable");
});
var innerchild =  $('<div/>', {
        'class': 'col-sm-10'
	
    });
var firstinput =  $('<input/>', {
        'class': 'form-control inputTglClone',
	id: 'inputTglClone'+ runNumberAdd,
	type: 'date' 
    });
innerchild.append(firstinput);
firstchild.append(lable1);
firstchild.append(innerchild);

	html.append(firstchild);
	
	 var lable2 =  $('<label/>', {
        'class': 'col-sm-2 control-label',
	text: 'Code',
	id: 'lbl2'
    }).on('click',function(){
	alert("First lable");
});
	runNumberAdd = 2;
        var firstselectinput =  $('<select/>', {
        'class': 'form-control select2 inputCodeClone',
	id: 'inputTglClone_select',
	
    });
var innerchild1 =  $('<div/>', {
        'class': 'col-sm-10'
	
    });
var secondchild =  $('<div/>', {
        'class': 'form-group'
    });
	innerchild1.append(firstselectinput);
	secondchild.append(lable2);
	secondchild.append(innerchild1);
	html.append(secondchild);  
        $('.clone-form').html(html);
        $(".inputCodeClone, .inputStasiunClone, .inputPeralatanClone").select2({
            placeholder: "Choose two",
            allowClear: true,
	    data:[{id:'1',text:'one'},{id:'2',text:'two'}],
	createTag: function (params) {
    		var term = $.trim(params.term);
    		if (term === '') {
      		return null;
    		}
    		return {id: term,text: term}
      
		}
        }).on("change", function (e) {
	var selectedvalue = e.currentTarget.selectedOptions[0].value;
	alert(selectedvalue);
	
});
       
        $('.btnSend').attr('disabled', false);
        $('.inputStasiunClone').attr("disabled", true);
        $('.inputPeralatanClone').attr("disabled", true);
        runNumberAdd++;
    });
   
    $("body").on("click", ".remove_list",function() {
        var numItems = $('.control-group').length;
        $(this).parents(".control-group").remove();
        if (numItems == 1) {
            $('.btnSend').attr('disabled', true);
        } else {
            $('.btnSend').attr('disabled', false);
        }
    });
    
  
   
   
 
});
</script
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...