限制輸入字段不具有相同的輸入

Question

我有一個HTML表，其中有幾個輸入字段iteName ， unitQty和disc% 。

ItemName是一個jquery自動完成字段，因此在選擇文本后，焦點將移至UnitQty ，然后當用戶按下Enter時，我將創建與上述相同的新行

在itemname列的新行中，我上面也選擇了不想要的

我得到的ItemNames來自JSON數據，因此當用戶再次選擇之前的數據時，我想提醒您該名稱已存在並清空該字段的警報

我做了什么

 "use strict"; console.clear() function format(number, decimals = 2, locale = 'en-in') { const fixed = parseFloat(number).toFixed(decimals); const [float, dec] = fixed.split('.') const intFormatted = (+float).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var CostPrice = ""; var totalAmount = ""; var unitQuantity = 0; var unitQuantityOnDisc = 0; var purchaseRateOnDisc = 0; var purchaseRate = 0; var totalAmount = ""; var discPercentage = ""; var discAmount = ""; var totalAmountOnDisc = ""; var subTotalOnDisc = 0; var gstPercentage = ""; var gstAmount = ""; var totalAmountOnGst = ""; var total = 0; var supplierCode = ""; var totalDiscountAmt = 0; var totalGstAmt = 0; var totalUnitQty = 0; var subtotal = 0; var totalAfterGrnDisc = 0; var totalRoundOff = 0; var totalAfterfreightAmt = 0; var totalAftercommissionAmt = 0; var mrpOnDisc = 0; const tableData = { "ALMOND CHBAR~2402": { "itemName": "ALMOND CHBAR", "itemCode": "2402", "costPrice": 20.0, "gstPercentage": 14.5, "mrp": 30.0 }, "A BR SB EX~333": { "itemName": "A BR SB EX", "itemCode": "333", "costPrice": 1.0, "gstPercentage": 0.0, "mrp": 1.0 } } var autoCompleteData = Object.keys(tableData); function rowappend(tbody) { const markup = `<tr> <td> <input type="text" class="form-control commantd" id="itemNametd" name="itemNametd"> </td> <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly"></td> <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly"></td> <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd" readonly="readonly"></td> <td> <input type="tel" id="unitQtytd"class="form-control commantd" name="unitQtytd"> </td> <td> <input type="tel" id="discPercentagetd"class="form-control commantd" name="discPercentagetd" > </td> <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly"></td> <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly"></td> <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly"></td> <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly"></td> </tr>` $(tbody).append(markup); setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100); $("[name=itemNametd]", tbody).last().autocomplete({ source: autoCompleteData }); $("[name=itemNametd]").change(function() { if (autoCompleteData.indexOf($(this).val()) == -1) { $(this).val(""); alert("chose correct ItemName") return false; } }); } rowappend($('tbody', '#tableInvoice')) function getValues(row) { const search = ($('[name=itemNametd]', row).val()).toString() const value = tableData[search]; CostPrice = value.costPrice; if (value) { $(row).find("[name=itemCodetd]").val(value.itemCode); $(row).find("[name=mrptd]").val(format(value.mrp)); $(row).find("[name=purRatetd]").val(format(CostPrice)); $(row).find("[name=discAmttd]").val(value.DiscAmt); $(row).find("[name=gstPercentagetd]").val(value.gstPercentage); } /* $("#unitQtytd").click(function () { $(this).select(); }); */ } function calc(row) { unitQuantity = $(row).find("[name=unitQtytd]").val() || '0'; purchaseRate = $(row).find("[name=purRatetd]").val() || '0'; var mrp = $(row).find("[name=mrptd]").text() || '0'; totalAmount = (parseFloat(unitQuantity) * parseFloat(purchaseRate)); $(row).find("[name=totalAmttd]").val(format(totalAmount)); } function calcDiscount(row) { unitQuantityOnDisc = $(row).find("[name=unitQtytd]").val() || '0'; purchaseRateOnDisc = $(row).find("[name=purRatetd]").val() || '0'; mrpOnDisc = $(row).find("[name=mrptd]").val() || '0'; subTotalOnDisc = (parseFloat(unitQuantityOnDisc) * parseFloat(purchaseRateOnDisc)); discPercentage = $(row).find("[name=discPercentagetd]").val() || '0'; gstPercentage = $(row).find("[name=gstPercentagetd]").val() || '0'; discAmount = (parseFloat(discPercentage) / 100) * parseFloat(totalAmount) || 0 totalAmountOnDisc = (parseFloat(totalAmount) - parseFloat(discAmount)) gstAmount = (parseFloat(gstPercentage) / 100) * parseFloat(totalAmountOnDisc); totalAmountOnGst = (parseFloat(totalAmountOnDisc) + parseFloat(gstAmount)) total += parseFloat(totalAmountOnGst); totalDiscountAmt += parseFloat(discAmount); totalGstAmt += parseFloat(gstAmount); totalUnitQty += parseFloat(unitQuantity); subtotal += parseFloat(subTotalOnDisc); totalRoundOff = total - Math.round(total); $(row).find("[name=discAmttd]").val(format(discAmount)); $(row).find("[name=gstAmttd]").val(format(gstAmount)); $(row).find("[name=totalAmttd]").val(format(totalAmountOnGst)); $("#unitQtytf").text(format(totalUnitQty)); $("#discAmttf").text(format(totalDiscountAmt)); $("#gstAmttf").text(format(totalGstAmt)); $("#netAmtInput").val(format(total)); $("#totalAmttf").text(format(total)); $("#subTotalInput").val(format(subtotal)); $("#itemAmtDiscinput").val(format(totalDiscountAmt)); $("#taxAmtInput").val(format(totalGstAmt)); // $("#roundOffAmtInput").val(format(totalRoundOff)); } $(document).on('focusout', (e) => { const row = e.target.parentElement.parentElement if (e.target.matches("[name=itemNametd]")) { // whene focus is out from itemNametd getValues(e.target.parentElement.parentElement) } }); $(document).keypress(function(event) { // here I am trying to create new row when enter is clicked const row = event.target.parentElement.parentElement var keycode = event.keyCode || event.which; if (keycode == '13') { alert("presed") calcDiscount(event.target.parentElement.parentElement) if ($(row).parent().find('tr').length - $(row).index() === 1) { rowappend(event.target.parentElement.parentElement.parentElement) total = 0; totalDiscountAmt = 0; totalGstAmt = 0; totalUnitQty = 0; subtotal = 0; $("#tableInvoice tbody tr").each(function() { calc(this) calcDiscount(this) }) } } }); document.addEventListener("keydown", function(e) { const row = e.target.parentElement.parentElement if (event.target.matches('[name=discPercentagetd]') || e.target.matches('[name=unitQtytd]')) { var keycode = e.keyCode || event.e; if (keycode == '9') { if (!$(event.target).val()) { e.preventDefault(); return; } total = 0; totalDiscountAmt = 0; totalGstAmt = 0; totalUnitQty = 0; subtotal = 0; $("#tableInvoice tbody tr").each(function() { calc(this) calcDiscount(this) }) } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <div class="container commonDivInvoice"> <div class="row tableInvoice" id="commonDvScroll"> <table class="table table-bordered" id="tableInvoice"> <thead> <tr> <th id="itemNameth" class="commanth">Item Name</th> <th id="itemCodeth" class="commanth">Code</th> <th id="mrpth" class="commanth">Mrp</th> <th id="purRateth" class="commanth">Pur.Rate</th> <th id="unitQtyth" class="commanth">Unit Qty</th> <th id="discPercentageth" class="commanth">Disc%</th> <th id="discAmtth" class="commanth">Disc Amt</th> <th id="gstPercentageth" class="commanth">Gst%</th> <th id="gstAmtth" class="commanth">Gst Amt</th> <th id="totalAmtth" class="commanth">Total Amount</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="row tableGrn"> <table class="table table-bordered" id="tfootTable"> <tfoot> <tr> <td id="itemNametf" class="commantf" align="center">Total -> </td> <td id="itemCodetf" class="commantf"></td> <td id="mrptf" class="commantd"></td> <td id="purRatetf" class="commantf"></td> <td id="unitQtytf" class="commantf"></td> <td id="discPercentagetf" class="commantf"></td> <td id="discAmttf" class="commantf"></td> <td id="gstPercentagetf" class="commantf"></td> <td id="gstAmttf" class="commantf"></td> <td id="totalAmttf" class="commantf"></td> </tr> </tfoot> </table> </div> 

小提琴鏈接

Answer 1

您需要創建一個包含所有項目名稱的數組，並檢查輸入的值是否存在於該數組中。

將文本框名稱itemNametd更改為itemNametd[]

jQuery代碼

var itemNametd=[];var flag=  'Success';var Message="Success";
   $('input[name="itemNametd[]"]').each(function() {
        $(this).css("border", "");
        if ($(this).val() == '') {
            $(this).css("border", "1px solid red");
            flag = 'Error';
             Message="Please Enter Value"
        }else{
        if ($.inArray($(this).val(), itemNametd) != -1){
         $(this).css("border", "1px solid red");
         $(this).val('')
           Message="name is already present"
   flag = 'Error';
                        }else{
            itemNametd.push($(this).val())
            }

        }
    })

    if(flag=='Error'){
    alert(Message)
    return false
    }

檢查這個Fiddel

Answer 2

• 您可以維護一個ItemName數組。 因此，當用戶按下Enter鍵時，請進行函數調用，以檢查輸入的ItemName是否已存在於列表中。
• 如果ItemName已存在於數組中，則向用戶顯示錯誤。
• 如果不存在ItemName，則將其添加到數組列表中。