CODEWITHSUNDEEP
javascriptphpjquerycodeigniter
Ady Shaputra
Ady Shaputra

Reputation: 25

How to get ID dynamic in Jquery?

I am making dynamic input, when the user clicks "Add From Checklist" there will be an input form, and if clicked again "Add From Checklist" then the input form becomes two and so on, for the actual select code there is already data such as '1-022020-001', now for inputting stations and equipment, the data is where the value '1-022020-001' is in the database, now I'm still confused about how to get results from value '1-022020-001' can be sent to the controller and returned to js to display the input Station and Equipment.

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/[email protected]/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/[email protected]/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>

Sample data in a database 1

The question is:

  1. how to be able to display id_location in the input station and id_equipment_name in the input equipment by selecting code as where in the database later?

NOTE: the code that I have stuck when looking for a dynamic ID

Upvotes: 1

Views: 116

Answers (2)

LDS
LDS

Reputation: 362

I just try to add some fields .You modify

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 0

Harsimranjit Singh
Harsimranjit Singh

Reputation: 245

if you want to get the value of current input that you clicked or all the nearest inputs then you can use $(this). it helps you to point on the currently focused or clicked element.

Upvotes: 1

Related Questions