Prevent form submission by checking every dynamically created text boxes are empty

Question

Here I am trying to check each and every dynamically created textboxes whether it is empty or not before the form submission.

Here is the HTML code,

<form>
<table class="table table-hover table-white">
  <thead>
    <tr>
        <th class="col-sm-1">Test ID</th>
        <th class="col-md-6">Test Name</th>
        <th style="width:100px;">Amount</th>
        <th> Action</th>
    </tr>
  </thead>
  <tbody id="rows">
    <tr>
        <td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td>
        <td> <input  type="text" style="width:300px" class="form-control test_name"  readonly="" id="test_name"  onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td>
        <td> <input  type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td>
        <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td> 
    </tr>
  </tbody>
</table>
                                                                 
                                                          
<span id="test_id_info" class="info text-danger"></span>

<div class="row">
   <div class="col-md-12">
       <div class="form-group">
          <label>Other Information</label>
          <textarea class="form-control" id="description"></textarea>
        </div>
    </div>
</div>
                                                     
<div class="text-center m-t-20">
  <input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay">
</div>

</form>

Here is the Ajax code

$(document).ready(function(){

var count=0;
$(document).on('click','#add',function() {
count++; 

var html= '';
html += '<tr id="trrows">';

html += '<td id="testid"> <input id="test_id" class="form-control test_id" type="text" style="width:200px" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);" onblur="sum(this);" onkeyup="sum(this);" onchange="sum(this);"> </td>';

html += '<td id="testname"> <input id="test_name"  type="text" style="width:300px" class="form-control test_name"  readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';

html += '<td id="amounts">  <input id="amount" name="amount" type="text" style="min-width:150px" class="form-control amount"  readonly="" > </td>';

html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o"></i></a></center> </td>';

html +=  '</tr>';
$('#rows').append(html);
  
});

$(document).on('click','.remove',function() {
$(this).closest("#trrows").remove();

});

});

//  generate bill 

$(document).on('click', '#pay', function () {

var test_id = new Array();
$('input[id="test_id"]').each(function() {
test_id.push(this.value);
});

var amount = new Array();
$('input[name="amount"]').each(function() {
    amount.push(this.value);
});

var p_id = $('#p_id').val();
var pres_id = $('#pres_id').val();
var description=$('#description').val();

var valid;
valid = validateContact();

if (valid) {

    swal({
title: "Are you sure?",
text: "You wanna proceed this Payment!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-success",
confirmButtonText: "Yes, Proceed It!",
closeOnConfirm: false
},
function(isConfirm){
if (!isConfirm) return;
$.ajax({
        url: "testquery/test_payments.php", // Url to which the request is send
        method: "POST",             // Type of request to be send, called as method
        data: {   
         'test_id': test_id,
         'amount': amount,
         'p_id': p_id,  
         'pres_id': pres_id, 
         'description':description
           },     

        success: function (data) {
        if (data == 'Password Changed') {
            swal("Success", "Invoice has been Generated :)", "success");

        } else {
            swal("Sorry", "Something Went Wrong. Please try again later:(", "error");
        }
    },

    error: function (data) {
           //other errors that we didn't handle
        swal("Sorry", "Failed to Proceed. Please try later :(", "error");
    }
    });
});  
};

// check validations
function validateContact() {
    var valid = true;
    $(".demoInputBox").css('background-color', '');
    $(".info").html('');

    if (!$("#test_id").val()) {
    $("#test_id_info").html("(Required)");
    $("#test_id").css('background-color', '#FFFFDF');
    valid = false;
        }
  
    return valid;
}

});

I want to check the test_id textbox is empty . Before dynamically generating the textboxes there, already there is a row of textboxes including test_id textbox . My problem is, before generated, it check the textbox as empty or not by using function , but after generated it does not check. I don't know where I went wrong.

Please help me may highly appreciated.

Answer 1

Rather than using the elementID use class name to get the collection of elements and iterate through them. the problem we have here is all input have the same id so jquery will return the first element it finds and ignore the rest since with ID we assume that it is unique throughout the DOM

 function checkname(el){ } $(document).ready(function(){ var count=0; $(document).on('click','#add',function() { debugger; count++; var html= ''; html += '<tr id="trrows">'; html += '<td id="testid"> <input id="test_id" class="form-control test_id" type="text" style="width:200px" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);" onblur="sum(this);" onkeyup="sum(this);" onchange="sum(this);"> </td>'; html += '<td id="testname"> <input id="test_name" type="text" style="width:300px" class="form-control test_name" readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>'; html += '<td id="amounts"> <input id="amount" name="amount" type="text" style="min-width:150px" class="form-control amount" readonly="" > </td>'; html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o"></i></a></center> </td>'; html += '</tr>'; $('#rows').append(html); }); $(document).on('click','.remove',function() { $(this).closest("#trrows").remove(); }); }); // generate bill $(document).on('click', '#pay', function () { var test_id = new Array(); $('input[id="test_id"]').each(function() { test_id.push(this.value); }); var amount = new Array(); $('input[name="amount"]').each(function() { amount.push(this.value); }); var p_id = $('#p_id').val(); var pres_id = $('#pres_id').val(); var description=$('#description').val(); var valid; valid = validateContact(); if (valid) { alert('invoice generated') }; // check validations function validateContact() { debugger; var valid = true; $(".demoInputBox").css('background-color', ''); $(".info").html(''); //list of test_id inputs var testIdList = document.getElementsByClassName('test_id') for(let i= 0 ; i<testIdList.length; i++){ if (!testIdList.item(i).value) { $("#test_id_info").html("(Required)"); $("#test_id").css('background-color', '#FFFFDF'); valid = false; } } return valid; } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <table class="table table-hover table-white"> <thead> <tr> <th class="col-sm-1">Test ID</th> <th class="col-md-6">Test Name</th> <th style="width:100px;">Amount</th> <th> Action</th> </tr> </thead> <tbody id="rows"> <tr> <td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td> <td> <input type="text" style="width:300px" class="form-control test_name" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td> <td> <input type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td> <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td> </tr> </tbody> </table> <span id="test_id_info" class="info text-danger"></span> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label>Other Information</label> <textarea class="form-control" id="description"></textarea> </div> </div> </div> <div class="text-center mt-20"> <input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay"> </div> </form>

Answer 2

Use class, name or other attributes instead id, because you have a several elements with the same ids - it's always create problems. If you need check inputs with class "text_id" before submit try to change validation function

function validateContact() {
    var valid = true;
    $(".demoInputBox").css('background-color', '');
    $(".info").html('');

    $('.text_id').map(function(i, el){        
        if(!$(el).val() || $(el).val().trim() == '') {
            valid = false;
            $("#test_id_info").html("(Required)");
            $(el).css('background-color', '#FFFFDF');
        }
    });
  
    return valid;
}