【问题标题】：submitting the different value in jquery在jquery中提交不同的值
【发布时间】：2015-12-18 03:13:47
【问题描述】：

我有以下代码以某种格式显示带有电话号码的输入字段。即，如果电话号码以 33,55 或 81 开头，我将其显示为 (33) 1234-5678。如果电话号码以任何其他号码开头，则格式为 (123) 456-7890。

现在，问题是当我提交表单时，它被提交为 (33) 1234-5678。但我应该提交 3312345678 并显示 (33) 1234-5678。

有人可以帮助我，我该如何解决这个问题。我没有使用任何 jquery 插件；

<input id="criterion"  name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">

jQuery(document).ready(function() {
        jQuery("#criterion").change(function () {
            var searchBy = jQuery('#smartWirelessSearch').val();    
            if(searchBy == 'Mobile'){
                jQuery(this).attr("criterion", $(this).val());
                var twoDigit = jQuery('#criterion').val().substr(0, 2);
                var threeDigit = jQuery('#criterion').val().substr(0, 3);
                var remainingDigits = jQuery('#criterion').val().substr(2, 10);
                if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
                    jQuery('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
                } else {
                    jQuery('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
                }
            }   
        });     
    });

【问题讨论】：

使用隐藏输入来存储电话号码的原始值。
@Amir 你能不能给它的代码sn-p
隐藏的输入在这里没有多大帮助，因为每次按键都会更新输入。为什么不把输入框下面的值打印出来呢？当用户输入他们的数字时，你为什么要编辑输入的实际值？
@Duncan 客户需要这种方式.. 使用相同的文本字段获取号码并提交未更改的号码
我建议使用 {string}.replace()

标签： javascript jquery

【解决方案1】：

您可以在提交表单时更改值，就在它发送到服务器之前：

$("form").on("submit", function(){
  var originalVal = $("#criterion").val();
  var newVal = originalVal.replace(/[^\d]/g, '');
  $("#criterion").val(newVal);
});

【讨论】：

在这种情况下，您的正则表达式与 .replace(/[ -]/g, "") 相比是否有很多可衡量的好处？
@BBQSingular 不是真的（据我所知）。由于问题不是关于那个，所以我没有考虑太多。 OP 可以使用他想删除不需要的字符的任何方法。
@BBQSingular 但是感谢您的评论，我意识到我忘记了g 标志。
如果用户在提交后按下浏览器的返回键，电话号码会显示为无格式。也许应该使用此解决方案在页面加载时重新应用该格式。
@trincot 你是对的，我没有想到这一点......那么也许正如其他人所建议的那样，隐藏输入将是一个更清洁的解决方案。

【解决方案2】：

您可以有一个隐藏的输入，您可以在修改之前存储输入的原始值。

<input id="criterion"  name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">

<input type="hidden" id="org" name="org" />

-

$(document).ready(function() {
    $("#criterion").change(function () {
        var searchBy = $('#smartWirelessSearch').val();  
        $('#org').val($(this).val());
        if(searchBy == 'Mobile'){
            $(this).attr("criterion", $(this).val());
            var twoDigit = $('#criterion').val().substr(0, 2);
            var threeDigit = $('#criterion').val().substr(0, 3);
            var remainingDigits = $('#criterion').val().substr(2, 10);
            if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
                $('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
            } else {
                $('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
            }
        }   
    });     
});

如果您需要始终保持原始清理值，也有很多方法可以做到这一点。一种简单的解决方案是在每次输入更改时自行清理它。

如果是这样，请将$('#org').val($(this).val()); 替换为$('#org').val($(this).val().replace(/[^\d]/g, ''));

这基本上用空字符串替换所有不是数字的东西。

【讨论】：

【解决方案3】：

解决这个问题有两种可能，第一种是隐藏第二个（额外的）input，比如：

<input id="criterion"  name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">
<input id="criterion_hidden"  name= "criterion_real" type="hidden" size="15" maxlength="60" value="" placeholder="" onkeypress = "submitOnReturn(event);">

并将其填充到您的 jquery 中：

jQuery(document).ready(function() {
        jQuery("#criterion").change(function () {
            var searchBy = jQuery('#smartWirelessSearch').val();    
            if(searchBy == 'Mobile'){
                jQuery(this).attr("criterion", $(this).val());
                var twoDigit = jQuery('#criterion').val().substr(0, 2);
                var threeDigit = jQuery('#criterion').val().substr(0, 3);
                var remainingDigits = jQuery('#criterion').val().substr(2, 10);
                $("#criterion_hidden").val(twoDigit + remainingDigits); //update it here.
                if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
                    jQuery('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
                } else {
                    jQuery('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
                }
            }   
        });     
    });

另一种解决方案是使用正则表达式（例如/[^\d]/g）替换来更改服务器端（PHP？）的值。

【讨论】：

【解决方案4】：

在提交表单时，将( ) - 的输入值替换为空字符串""。

【讨论】：

【解决方案5】：

我建议两种解决方案：

1。切换格式

使用此解决方案，您可以在输入中显示格式化的值，或者显示纯数字值。因此，在提交表单时以及在用户编辑值时（如@Rune FS 所建议），您需要注意仅显示数字值：

jQuery(function($) {
    function cleanMobile() {
        if ($('#smartWirelessSearch').val() == 'Mobile') {
            // Strip all non-digit characters
            $("#criterion").val($("#criterion").val().replace(/[^\d]/g, ''));
        }
    }
    function formatMobile() {
        if ($('#smartWirelessSearch').val() == 'Mobile') {
            // Apply format after first stripping all non-digit characters
            $("#criterion").val($("#criterion").val()
                .replace(/[^\d]/g, '')
                .replace(/(33|55|81|...)(.*?)(....)$/, '($1) $2-$3'));
        }
    }
    $("#myform").submit(cleanMobile);
    $("#criterion").blur(formatMobile).focus(cleanMobile).keypress(function(e) {
        if (e.keyCode == 13) {                    
            $(this).closest('form').submit();                
        }
    });
    // Set initial format correctly on page load
    formatMobile();
}, jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <select id="smartWirelessSearch">
        <option value="Mobile">Mobile</option>
    </select>
    <input  id="criterion"  name="criterion" type="tel" class="inputboxBg" 
            size="15" maxlength="60" style="width:85%;" value="" placeholder=""> 
    <input type="submit" value="submit">
</form>

运行 sn-p 以查看它如何响应焦点和提交。

注意上面的代码也是：

使用正则表达式来格式化数字；
通过代码而不是元素的onkeypress 属性附加按键处理程序；
为格式操作定义函数，以便在模糊、聚焦和提交事件中引用这些函数；
定义了一个虚拟的smartWirelessSearch 元素，以便代码与您的表单兼容；
给表单一个id myform，你应该用你的替换它。

2。使用隐藏输入

如果您不希望输入值在提交表单时发生明显变化，您可以添加一个隐藏输入并为其提供仅数字值，如下所示：

<input id="criterionClean"  name="criterionClean"  type="hidden">
<input id="criterion"  name= "criterion" type="tel" class="inputboxBg" size="15" 
       maxlength="60" style="width:85%;" value="" placeholder="" 
       onkeypress="submitOnReturn(event);">

在您的 Javascript 中添加一行：

if(searchBy == 'Mobile'){
    // ... your code ...
    // Then pass the digits only in the hidden input
    $('#criterionClean').val($(this).val().replace(/[^\d]/g, ''));
}

现在您将提交格式化后的值和清理后的值。然后，您的服务器代码可以使用干净的纯数字值。

如果您希望将干净的值称为 #criterion，则在 html 和代码中交换两个输入的名称。

【讨论】：