apend value to all rows

joe

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
<table class="table table-bordered table-hover order-list" id="tab_logic" style="width:60% !important">
  
  <tbody>
    <tr id="fst_row">
      <td>
            <select class="form-control sel_sel" id="payacc" name="actname" for="actname">
              <option value="">Select TDS A/c name</option>
              <option value="1">TDS A/c 1</option>
              <option value="2">TDS A/c 2</option>
              <option value="3">TDS A/c 3</option>
            </select>
          </td>
          <td>
            <input type="text" class="form-control required" id="pay_narrat" name="narr" for="narr" data-toggle="modal" data-target="#narratModal" placeholder="Enter your text here" />

          </td>
    </tr>
  </tbody>
</table>

<!-- narrtion modal -->

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close">
          <span...

CSS

im using one dynamic table and form and i create one small validation form my form and that dynamic table validation.. its working but if form is not valid also its submitting.. dont need that..
just want when form is valid that time only form going to submit. otherwise restrict error message wants to shown.. like "this field is required"

my sample code is here..

JavaScript

$(document).ready(function() {

          $("#add_Row").on("click", function() {
            var counter = 0;
            var idVal = $('#tab_logic tr:last').find('td:first').html();
            var matches = idVal.match(/\d+/g);
            if (matches != null) {
              counter = Number(matches) + counter + 1;
            }
            var newRow = $("<tr>");
            var cols = "";
cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName" required><option>Select cash account</option><option value="1">TDS A/c 1</option><option value="2">TDS A/c 2</option><option value="3">TDS A/c 3</option></select></td>'
            cols += '<td><input type="text" class="form-control required price" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" data-toggle="modal" data-target="#narratModal" onchange="unname(this.id, this.value)"/></td>';

            cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';

            newRow.append(cols);


            var defVal = $("select[name=acctname]").find(":selected").val();
            if (defVal) {
              $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
            }
            $("table.order-list").append(newRow);
            setValCashVal('accountName'.concat(counter));
            bindScript();
            counter++;

          });
          $("table.order-list").on("click", ".ibtnDel", function(_event) {
            $(this).closest("tr").remove();
            evaluateTotal();
          });
        });

        /* Apend value to all row */
        $("#ok_button").on('click', function() {
          let val = $("#cash_text").val();
          $("#pay_narrat, #acc_narrat").val(val);
        });