here is my form. When user want to add another form they just click the "tambah bil".
my problem is the function of required just detect the name of input filed. I want the function of required detect by the id of input field because it have the same name in one form.
<fieldset>
<div id="item">
<div class="callout callout-warning" style="margin-top:15px">
<div class="row">
<div class="col-md-12">
<h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b>
<span class="float-sm-right">
<button type="button" name="add" id="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i> Tambah Bil</button>
</span></h6><hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Jabatan</label>
<input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>">
<span class="form-control form-control-sm"><?php echo $jab; ?></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Kod*</label>
<select class="form-control select2bs4" name="kod[]" id= "kod" required>
<option value="" disabled="disabled" selected="selected">--Pilih Kod--</option>?php foreach($kod as $k):?>
<option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Perkara (Wajid isi ruangan pertama)*</label>
<input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1" required>
<input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2" required="false" style="margin-top:6px !important" >
<input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3" required="false" style="margin-top:6px !important" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>No. Rujukan*</label>
<input id="noruj" type="text" class="form-control form-control-sm" name="noruj[]" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Jumlah (RM)* </label>
<input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required>
</div>
</div>
</div>
<span>*Ruangan wajib diisi</span>
</div>
</div>
</fieldset>
here is my form in javascript when user want to add another bil.
$('html, body').animate({scrollTop: '+=550px'}, 400);
var html = '';
html += '<div class="callout callout-warning">';
html += '<div class="row"><div class="col-md-12"><h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b><span class="float-sm-right" style="padding-left:5px"><button type="button" name="remove" class="btn btn-block btn-danger btn-sm right remove"><i class="fa fa-minus"></i> Padam Bil</button></span><span class="float-sm-right"><button type="button" name="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i> Tambah Bil</button></span></h6><hr></div></div>';
html += '<div class="row"><div class="col-md-12"><div class="form-group"><label>Jabatan*</label><input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>"><span class="form-control form-control-sm"><?php echo $jab; ?></span></div></div></div>';
html += '<div class="row"><div class="col-md-6">';
//html += '<div class="form-group"><label>Kategori*</label><select name="kategori'+i+'[]" class="form-control select2bs4" style="width: 100%;" required><option value="" disabled="disabled" selected="selected">--Pilih Kategori--</option><option value="INDIVIDU">Individu</option><option value="SYARIKAT">Syarikat</option></select></div>';
html += '<div class="form-group"><label>Kod*</label><select class="form-control select2bs4" name="kod[]" id ="kod'+i+'" required><option value="" disabled="disabled" selected="selected">--Pilih Kod--</option><?php foreach($kod as $k):?><option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option><?php endforeach;?></select></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Perkara (Wajib isi ruangan pertama)*</label><input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1'+i+'" required><input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2'+i+'" style="margin-top:6px !important" ><input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3'+i+'" style="margin-top:6px !important" ></div>';
html += '</div></div>';
html += '<div class="row"><div class="col-md-6">';
html += '<div class="form-group"><label>No. Rujukan*</label><input id="noruj'+i+'" type="text" class="form-control form-control-sm" name="noruj[]" required></div>';
html += '</div><div class="col-md-6">';
html += '<div class="form-group"><label>Jumlah (RM)*</label><input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required></div>';
html += '</div><span>*Ruangan wajib diisi</span></div>';
html += '</div>';
$('#item').append(html);
$(function()
{
const inputs = $("input").prop('required',true);
console.log('return value:');
inputs.each(log);
console.log('');
console.log('selector:');
$("input[required]").each(log);
function log(index, element)
{
console.log($(element).attr("id"));
}
});
the coding required field just read input field outside the javascript... how i want to detect the input in javascript form is required by using id attribute?? function required cannot detect the id of input field, function detect the name of input field it is because in one form have same name of input field. anybody can help me?? thank you in advance.
