使用jquery截斷和添加表單元素

我是jquery的新手，並試圖截斷表單元素字符串，然後連接或稍後添加它們。使用jquery截斷和添加表單元素

jQuery(document).ready(function($){ 
var sur = $('#field_surname').val(); //Get value from field surname and store it in sur 
var name = $('#field_adult_name').val(); //Get value from field adult_name and store it in name 
var pcode = $('#field_postcode').val();// Get value from field postcode and store it in pcode 
var surshort = jQuery.trim(sur).substring(0, 3); //truncate first three letters 
var nameshort = jQuery.trim(name).substring(0, 3);//truncate first three letters 
var pcodeshort = jQuery.trim(pcode).substring(0, 12);//truncate first 12 letters 
var msg = surshort+nameshort+pcodeshort; // Add all the strings 
$("#field_sur").val("SKU"+msg); // write values in field_sur and prefix SKU to it 
});

大多數我所看到的是指做那些提交後或提交或形式驗證事件的查詢，但我想它，當用戶在

所以我也嘗試使用數據填充：

jQuery(document).ready(function($){ 
    /*Fire up the script when the below three fields change*/ 
    $('#field_surname', '#field_adult_name','#field_postcode').change(function(){ 
    var sur = $('#field_surname').val(); 
    var name = $('#field_adult_name').val(); 
    var pcode = $('#field_postcode').val(); 
    var surshort = jQuery.trim(sur).substring(0, 3); 
    var nameshort = jQuery.trim(name).substring(0, 3); 
    var pcodeshort = jQuery.trim(pcode).substring(0, 12); 
    var msg = surshort+nameshort+pcodeshort; 
    $('#field_sur').val("SKU"+msg); 
    }); 

});

但幾個小時後，我無法在#sur_field中獲得所需的值。我使用最新的wordpress與Zia3自定義CSS和JS插件注入JS。請協助。

來源

2016-02-27 Prince

你的代碼看起來不錯，是你的html正確嗎？你的遊戲機說什麼？ – David

@大衛：控制檯是空白的。顯然沒有價值計算。我不確定我出錯的地方。 – Prince

使用控制檯日誌寫入控制檯。代碼是正確的，但顯然我們看不到1.代碼是在頁面上輸出的2.你有正確的html字段等！ – David

感謝David爲console.log故障排除提供了啓發。

但是，我發現了問題，並在此期間解決了我的問題。

的問題是： $('#field_surname', '#field_adult_name','#field_postcode').change(function(){

和一個具有不聲明每個DIV ID，而不是宣佈這一切在一個這樣的： $('#field_surname, #field_adult_name, #field_postcode').change(function(){

另一種方法是使用單獨的功能，並呼籲他們在另一個變量，但它會再次需要使用上面的方法，但是整齊地跟蹤三個表單元素的變化：

jQuery(document).ready(function($){ 

    $('#field_surname').change(function(){ 
     var sur = $('#field_surname').val(); 
     var surshort = jQuery.trim(sur).substring(0, 3); 
     $('#field_sur').val("MEM"+surshort); 
    }); 
    $('#field_adult_name').change(function(){        
     var name = $('#field_adult_name').val(); 
     var nameshort = jQuery.trim(name).substring(0, 3); 
     $('#field_shortname').val(nameshort); 
    }); 
    $('#field_postcode').change(function(){ 
     var pcode = $('#field_postcode').val(); 
     var pcodeshort = jQuery.trim(pcode).substring(0, 12); 
     $('#field_shortpcode').val(pcodeshort); 
    }); 
    $('#field_sur, #field_shortname, #field_shortpcode').blur(function(){ 
     var val1 = $("#field_sur").val(); 
     var val2 = $("#field_shortname").val(); 
     var val3 = $("#field_shortpcode").val(); 
     $("#field_msg").val(val1+val2+val3); 
    }); 

});

希望它對像我這樣的新手jquery用戶有所幫助:)

來源

2016-02-27 22:51:28 Prince

使用jquery截斷和添加表單元素

回答

相關問題