Hello,

My name is Burhanuddin, I am trying to create a form that save Sales Invoices to the database. I am using JQuery Repeater Plugin to enable me to have dynamic number of rows for the number of products in every Sale Invoice.

On the other hand, i am also successfully using Jquery Validation Plugin to enable me to check via Ajax if the invoice is already entered or not.

My Task now is to setup an Ajax Check which checks if the product being sold is in stock or not, if not i should be able to display an error about the same, and prevent the invoice to be saved.

I am facing trouble specifically how to target the repeater inputs, as all of them have the same name & ids.

HTML Form

1. <div class="mt-repeater">
                                                       <div data-repeater-list="group_a">
                                                           <div data-repeater-item="" class="row">
                                                               <div class="col-md-3">
                                                                   <select name="pr_name" id="pr_name" class="form-control select2 product-select2">
                                                                   </select>
                                                               </div>
                                                               <div class="col-md-2">
                                                                   <div class="input-group col-sm-12">
                                                                       <input placeholder="Desc" name="pr_dsc" id="pr_dsc" class="form-control" type="text">
                                                                   </div>
                                                               </div>
                                                               <div class="col-md-2">
                                                                   <div class="input-group col-sm-12">
                                                                       <input placeholder="Qty" name="pr_qty" id="pr_qty" class="form-control" type="text">
                                                                   </div>
                                                               </div>
                                                               <div class="col-md-2">
                                                                   <div class="input-group col-sm-12">
                                                                       <span class="input-group-addon">₹</span>
                                                                       <input placeholder="Price" name="pr_price" id="pr_price" class="form-control" type="text">
                                                                   </div>
                                                               </div>
                                                               <div class="col-md-2">
                                                                   <div class="input-group col-sm-12">
                                                                       <select name="pr_tax" class="form-control select2 pr_tax">
                                                                           <option value="0">---None---</option>
                                                                           <option value="5">5</option>
                                                                           <option value="12">12</option>
                                                                           <option value="18">18</option>
                                                                           <option value="28">28</option>
                                                                       </select>
                                                                   </div>
                                                               </div>
                                                               <div class="col-md-1">
                                                                   <label class="control-label">&nbsp;</label>
                                                                   <a href="javascript:;" data-repeater-delete="" class="btn btn-danger">
                                                                       <i class="fa fa-close"></i>
                                                                   </a>
                                                               </div>
                                                           </div>
                                                          
                                                       </div>
                                                       <a style = "margin-top:5px;" id="add_btn" href="javascript:;" data-repeater-create="" class="btn btn-info mt-repeater-add">
                                                           <i class="fa fa-plus"></i> Add </a>
                                                       <br>
                                                       <br>
                                                   </div>
   

Javascript

1. var Sales = function() {
   
       var handleSave = function() {
   
           $('#addSales').validate({
               errorElement: 'span', //default input error message container
               errorClass: 'help-block', // default input error message class
               focusInvalid: false, // do not focus the last invalid input
               rules: {
                   client: {
                       required: true
                       },
                   invoice: {
                       required: true,
                       remote: {
                         url: "../assets/custom/check_sales_inv.php",
                         type: "post"
                       }
                   },
                   inv_date: {
                       required: true
                   },
                   pr_qty: {
                       required: true
                   }
               },
   
               messages: {
                   client: {
                       required: "This field cannot be empty"
                   },
                   invoice: {
                       required: "This field cannot be empty",
                       remote: "This invoice has been already entered"
                   },
                   inv_date: {
                       required: "This field cannot be empty"
                   }
               },
   
           });
   
       }
   
       var handleUpdate = function() {
   
           var ajaxUpdate = function(form) {           
               form = $(form);           
               var data = JSON.stringify(form.serializeJSON());
               $.ajax({
                   url: form.attr('action'),
                   type: form.attr('method'),
                   data: data,
                   dataType: 'json',
                   success:function(response) {
                       if(response.success == true)
                       {
                           updateSalesToast();
                       }
                       else
                       {
                           //$('.alert').show();
                           //$('.alert span').html(response.messages);
                       }
   
                       //Reset The Form
                       $('#editSales')[0].reset();
                       manageSalesTable.api().ajax.reload(null, false);
                       // close the modal
                       $("#editSalesModal").modal('hide');
                                         
                   }
               });
   
               return false;           
           }
       return {
           //main function to initiate the module
           init: function () {           
               handleSave();
               handleUpdate();
           }
       };
   
   }();
   

Any kind of help would be much appreciated.

Thanks in Advance.