Как удалить запятую перед отправкой формы на сервер? - PullRequest
Новая
       31

Как удалить запятую перед отправкой формы на сервер?

0 голосов
/ 19 января 2020

Я работаю над формой с пользовательским вводом. Это мой код: 

<form role="search" id="default-search" action="<?php echo home_url(); ?>" novalidate>

    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">

</form>
  1. Сначала я хочу автоматически отформатировать пользовательский ввод, например, от 10000 до 10000, чтобы иметь более четкое представление о том, что было набрано

Мой код для преобразования пользовательский ввод: 

    jQuery.noConflict();
jQuery('input.number').keyup(function(event) {

  // format number
  jQuery(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});

А пока все работает нормально.

НО!

При отправке этой формы сервер " думая, что «10 000 = 10, а не 10000».

Итак, что мне нужно сделать, - это преобразовать обратно 10 000 в 10000, чтобы сервер правильно его считал.

Мне нужно, чтобы пользователь увидел отформатированный версия его ввода (например, 10000), в то время как сервер должен использовать простое число без запятых (например, 10000).

Любые идеи очень ценятся. Спасибо!

Ответы [ 3 ]

0 голосов
/ 19 января 2020

используйте это, чтобы удалить запятую или все запятые вашего текста 

let num = "10,000"
num = num.replace(/,/g, ''),
0 голосов
/ 19 января 2020

Использование текущего подхода к регулярному выражению и замене:

Вы можете просто добавить функцию, которая будет использовать регулярное выражение и метод replace () , чтобы удалить все разделители запятых, а затем преобразовать входное значение в целое число, используя функцию parseInt () , когда вы готовы отправить форму следующим образом: 

jQuery.noConflict();
jQuery('input.number').keyup(function(event) {

  // format number
  jQuery(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});

jQuery('#btn').click(function(){
	const valueToSubmit  = parseInt(jQuery('input.number').val().replace(/,/, ""));
  alert("Submitting the value " + valueToSubmit);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

Использование метода toLocaleString:

Вы можете просто использовать метод toLocaleString () вместе с replace () метод, позволяющий автоматически добавлять разделители запятых к вашему входному значению, а затем преобразовывать их обратно в исходное значение, если вы хотите отправить входное значение на ваш сервер следующим образом: 

jQuery.noConflict();

jQuery('input.number').on('input', function(e) {
  e.target.value = parseInt(e.target.value.replace(/,/g, "")).toLocaleString();
});

jQuery('#btn').click(function() {
  const valueToSubmit = parseInt(jQuery('input.number').val().replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

При pure JavaScript вышеприведенный jQuery будет выглядеть следующим образом: 

const input = document.querySelector('#default-search input[name="price-from"]');
const btn = document.getElementById('btn');

input.addEventListener('input', function() {
  input.value = parseInt(input.value.replace(/,/g, "")).toLocaleString();
});

btn.addEventListener('click', function() {
  const valueToSubmit = parseInt(input.value.replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
})
<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

Использование объекта Intl.NumberFormat:

Другим аналогичным подходом для этого будет использование Intl. NumberFormat объект вместе с методом replace () для автоматического добавления разделителей запятых к вашему входному значению и последующего преобразования их обратно в исходное значение, когда вы хотите отправить входное значение на ваш сервер следующим образом: 

$('input[name="price-from"]').on('input', function(e) {
  e.target.value = new Intl.NumberFormat().format(parseInt(e.target.value.replace(/,/g, "")))
});

$('#btn').click(function() {
  const valueToSubmit = parseInt($('input[name="price-from"]').val().replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
  <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
  <button type="button" id="btn">Submit number</button>
</form>

При pure JavaScript вышеприведенный jQuery будет выглядеть следующим образом: 

const input = document.querySelector('#default-search input[name="price-from"]');
const btn = document.getElementById('btn');

input.addEventListener('input', function() {
  input.value = new Intl.NumberFormat().format(parseInt(input.value.replace(/,/g, "")))
});

btn.addEventListener('click', function() {
  const valueToSubmit = parseInt(input.value.replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
})
<form role="search" id="default-search" action="#" novalidate>
  <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
  <button type="button" id="btn">Submit number</button>
</form>
0 голосов
/ 19 января 2020

Я думаю, вы используете приведение типа, так что вместо 10000 получите 10 в качестве вывода. Таким образом, он усекает символ по начальному индексу символа (то есть запятой).

Вы можете заменить запятую и получите желаемый результат. 

var num = "10,000";
num = num.replace(',','');

Затем передайте его на сервер.

...