在jquery中提交不同的值

Question

我有以下代碼以特定格式顯示具有電話號碼的輸入字段。即，如果電話號碼以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)); 
       } 
      } 
     });  
    }); 

Answer 1

我建議兩種解決方案：

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>

運行看看它如何迴應重點和提交。

注意，上面的代碼也：

• 使用正則表達式來格式化的數量;
• 通過代碼而不是元素的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和代碼中交換兩個輸入的名稱。

Answer 2

有兩種方法可以解決這個問題，首先是有一個第二（額外）隱藏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？）的值。

Answer 3

您可以更改值的表單提交時，之前它被髮送到服務器：

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

Answer 4

你可以有你在修改之前存儲輸入的原始值的隱藏輸入。

<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().replace(/[^\d]/g, ''));

更換$('#org').val($(this).val());這基本上取代了一切，這是不是一個空字符串一個數字。

Answer 5

提交表格替換輸入值爲() -的空字符串""。