Question

我有三个文本框，我在密钥上用%替换-。但我想在提交时执行此操作。我不想向用户显示替换，但在提交时应该替换它。不太了解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">

Answer 1

您可以汇总其他表单或使用隐藏字段。
您无需在$(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>

工作小提琴==＆gt; http://jsfiddle.net/y4a7rp2e/

Answer 2

如果这是您的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>

为了执行替换，请为提交按钮指定一个ID，使用id并替换

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

因此，当单击提交按钮时，所有3个字段将执行指定的操作。操作也可以更改

有关jQuery中.submit（）的更多信息，请参阅官方文档：https://api.jquery.com/submit/

Answer 3

首先，列出验证html的3个函数。您可以使用.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
});

如何使用jQuery对表单提交进行验证

3 个答案: