单击提交按钮后删除逗号

Question

在使用以下方法提交到我的数据库之前，我试图从所有输入中删除逗号：<form method="POST" class="form-horizontal  mb-5" onsubmit="submitForm()">    <input type="text" name="Salary" class="textInput form-control commanumber">    <input type="text" name="Bonus" class="textInput form-control commanumber">    <input type="text" name="Overtime" class="textInput form-control commanumber">        ....</form>function submitForm() {    var input = $('.commanumber');    input.val(input.val().replace(/,/g, ''));}我设法删除了逗号并将其存储在我的数据库中，但问题是它将所有输入转换为相同的值。现在我所有的输入都有薪水值。我可以知道如何从我的所有.commanumber输入中正确删除逗号并将其存储在数据库中吗？

Answer 1

你应该给你的输入不同的 ID 或类名

btn=document.getElementById("btn")

btn.addEventListener("click",(e)=>{

e.preventDefault() // you should remove this if use this code in your project

submitForm()

})

function submitForm() {

    var input = $('#salary');

    var input1 = $('#bonus');

     console.log("before salary",input.val())

     console.log("before bonus",input1.val())

    input.val(input.val().replace(/,/g, ''));

    input1.val(input1.val().replace(/,/g, ''));

        console.log("after",input.val())

        console.log("after",input1.val())

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" class="form-horizontal  mb-5" onsubmit="submitForm()">

    <input type="text" name="Salary" id="salary" class="textInput form-control commanumber">

    <input type="text" name="Bonus" id="bonus" class="textInput form-control commanumber">

    <input type="text" name="Overtime" class="textInput form-control commanumber">

      <input type="submit" name="submit" id="btn">

</form>

Answer 2

您不需要选择所有元素，而是需要通过方法逐一选择jQuery.each。

function submitForm(e) {

  e.preventDefault(); // remove this in your project!

  $('.commanumber').each((index, input) => {

    const $input = $(input);

    $input.val($input.val().replace(/,/g, ''));

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" class="form-horizontal  mb-5" onsubmit="submitForm(event)">

  <input type="text" name="Salary" class="textInput form-control commanumber" value="1,234,567">

  <input type="text" name="Bonus" class="textInput form-control commanumber" value="200,000">

  <input type="text" name="Overtime" class="textInput form-control commanumber" value="300,000">

  <input type="submit" value="Remove Commas!" />

</form>

Answer 3

您的输入变量是一个元素数组，因此您需要一个一个地选择以删除逗号。我为您提供 3 种方法：

function submitForm(e) {

  e.preventDefault();

  $('.commanumber').each((index, input) => { //1st way

      const $input = $(input);

      $input.val($input.val().replace(/,/g, ''));

  });

  

  let input = document.querySelectorAll('.commanumber'); //2nd way

  input.forEach(index => {

      $(index).val($(index).val().replace(/,/g, ''));

  });

  

  $.map(input, function(content, i) { //3rd way

      $(content).val($(content).val().replace(/,/g, ''));

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" class="form-horizontal  mb-5" onsubmit="submitForm(event)">

    <input type="text" name="Salary" class="textInput form-control commanumber" value="8,210,010">

    <input type="text" name="Bonus" class="textInput form-control commanumber" value="1,058,543">

    <input type="text" name="Overtime" class="textInput form-control commanumber" value="16,789">

    <input type="submit" value="Remove Commas!" />

</form>