使用jquery

时间:2016-02-27 21:20:56

标签: jquery wordpress forms truncate

我是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。请协助。

1 个答案:

答案 0 :(得分:0)

感谢大卫通过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用户有所帮助:)