javascript - 限制输入字段不能有相同的输入

标签 javascript jquery html

我有一个 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>

fiddle Link

最佳答案

您需要创建一个包含所有项目名称的数组，并检查输入的值是否存在于该数组中。

将文本框名称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

关于javascript - 限制输入字段不能有相同的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56789860/

上一篇：javascript - => Angularjs。对于传入的值，我是否正确理解了这一点？

下一篇：JavaScript 被浏览器阻止

相关文章：

匹配字符串的重音和非重音版本的 Javascript 正则表达式

javascript - 如何与backbone同步加载外部模板

javascript - javascript中的多元素样式

javascript - 为什么 w3.css 侧导航栏在我的页面上不起作用？

javascript - 带嵌套幻灯片的 Jssor slider + 垂直缩略图

javascript - getElementsByName ('q' )[0] 返回未定义

javascript - 在 '&' 的最后一个实例中在 javascript 中拆分 URL

javascript - 如何确定 (Google Apps) 脚本是否正在新工作表上执行？

javascript - jquery 加载图像到 div 奇怪的行为

javascript - 如何在 ExtJS 中获取任何 HTML 的渲染文本？

©2024 IT工具网  联系我们