Required field form by using id attribute in Javascript

128

August 07, 2021, at 06:00 AM

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>&nbsp;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>&nbsp;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>&nbsp;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.

Answer 1

You could use it immediately after you set the prop

const inputs = $("input").prop('required',true);
console.log(inputs);

You can also use an attribute selector

const inputs = $("input[required]");

        const i = 1;
        $('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>&nbsp;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>&nbsp;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('name'));
               }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item"></div>

POPULAR ONLINE

PgwMenu : Responsive Menu plugin for jQuery

How efficiently this controller action can be written more in phalcon?

Learn, Share, Build

“npm install <github url>” Downloading from NPM instead of GitHub

Handshake failure when making t3s call

Looking for differences in two CSV files with Python

I have a script that scrapes a site and puts specific site names into a csvSome days it has 0 site names and some days it has more the 4

197

PHP

Check for the status of insufficient balance from Stripe during create subscription

Currently I am facing an issue of not able to retrieve the status of insufficient balance during subscription creationI am using the below link to retrieve status as a reference, but not able to do this

247

CSS

Css selector nth sibling and stops if it encounters another parent class

Is it possible to have an nth sibling selector for the code below?

190

MySQL

When use nested transaction, will the nested transaction see changes maded by the outside transaction?

If the transaction type of inner transaction is REQUIRES_NEW, will it see the changes made by outside transaction? What about other transaction type?

172