Как сделать проверку на отправку формы с помощью jQuery - PullRequest
Новая
       35

Как сделать проверку на отправку формы с помощью jQuery

0 голосов
/ 06 июня 2018

У меня есть три текстовых поля, где я заменяю % на - при включении.Но я хочу выполнить это при отправке.Я не хочу показывать замену пользователю, но при отправке она должна быть заменена.Не знаю много о jquery. 

$(function() {
    $('#name').keyup(function() {
            $(this).val($(this).val().replace(/[%]/g, "-"));
      });
});

$(function() {
    $('#userName').keyup(function() {
          $(this).val($(this).val().replace(/[%]/g, ""-""));
    });
});

$(function() {
    $('#productCode').keyup(function() {
        $(this).val($(this).val().replace(/[%]/g, ""-""));
    });
});

 First name: <input type="text" name="name" ><br>
  First name: <input type="text" name="userName" ><br>
   First name: <input type="text" name="productCode" ><br>

    <input type="submit" value="Submit">

Ответы [ 3 ]

0 голосов
/ 06 июня 2018
  1. Вы можете использовать другую форму или использовать скрытые поля.
  2. Вам не нужно переносить каждый отдельный блок кода в $(function(){});.

Это сокращение от $ (document) .ready (function () {}); 

var doReplace = function(string){
        return string.replace(/%/g, "-");
}

var $nameX = $('#nameX');
var $userX = $('#userNameX');
var $prodX = $('#productCodeX');

$('#name').keyup(function() {
  $nameX.val(doReplace($(this).val()));
});

$('#userName').keyup(function() {
  $userX.val(doReplace($(this).val()));
});

$('#productCode').keyup(function() {
  $prodX.val(doReplace($(this).val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" id="name" />
  <input type="hidden" id="nameX" name="name" /><br />
  <input type="text" id="userName" />
  <input type="hidden" id="userNameX" name="userName" /><br />
  <input type="text" id="productCode" />
  <input type="hidden" id="productCodeX" name="productCode" /><br />
  <input type="submit">
</form>

ИЛИ НА ФОРМЕ ПРЕДСТАВИТЬ 

var doReplace = function(string){
  return string.replace(/%/g, "-");
}

var $nameX = $('#nameX');
var $userX = $('#userNameX');
var $prodX = $('#productCodeX');

$("#myForm").on("submit", function(e) {
  $nameX.val(doReplace($('#name').val()));
  $userX.val(doReplace($('#userName').val()));
  $prodX.val(doReplace($('#productCode').val()));

  console.log($nameX.val());
  console.log($userX.val());
  console.log($prodX.val());
  
  // Remove this in production. Here it's just so we can see the console log.
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" id="name" />
  <input type="hidden" id="nameX" name="name" /><br />
  <input type="text" id="userName" />
  <input type="hidden" id="userNameX" name="userName" /><br />
  <input type="text" id="productCode" />
  <input type="hidden" id="productCodeX" name="productCode" /><br />
  <input type="submit">
</form>

Рабочая скрипка ==> http://jsfiddle.net/y4a7rp2e/

0 голосов
/ 06 июня 2018

Во-первых, назовите 3 функции, которые у вас есть для проверки вашего HTML.Вы можете использовать функции .submit или .click.

Для .click: 

<input id="submitBtn" type="submit" value="Submit">

$("#submitBtn").click(function(){
    //call the 3 functions by name
});

для .submit: приложить вашу формумежду <form></form> тегами 

$("yourformName").submit(function(){
    //call the 3 functions by name
});
0 голосов
/ 06 июня 2018

Если это ваш код HTMl: 

 First Name: <input type="text" name="name" ><br>
 User Name: <input type="text" name="userName" ><br>
 Product Code: <input type="text" name="productCode" ><br>
 <input type="submit" value="Submit" id="submit>

Чтобы выполнить замену, назначьте идентификатор для кнопки «Отправить», используйте идентификатор и замените 

$(function() {
    $('#submit').submit(function() {
            $('#name').val($(this).val().replace(/[%]/g, "-"));
            $('#userName').val($(this).val().replace(/[%]/g, ""-""));
            $('#productCode').val($(this).val().replace(/[%]/g, ""-""));
      });
    })

Так, когда кнопка «Отправить»При нажатии на все 3 поля будут выполнены указанные операции.Операции также можно изменить

Для получения дополнительной информации о .submit () в jQuery см. Официальную документацию: https://api.jquery.com/submit/

...