清除表单并填充jQuery

Question

我正在尝试清除表单，然后用新数据重新填充它。 我有一个页面，其中包含搜索历史记录列表以及“再次搜索”按钮，当单击该按钮时，它将获取该搜索历史记录字符串，将其拆分，然后再次匹配所有各种表单项； 复选框，单选按钮等。表单中基本上具有每种表单元素，并且除复选框外，其他所有内容都像我希望的那样填充。 第一次单击填充表单按钮时，它可以正常工作，但是第一次单击后，所有复选框都开始混乱了……有些项目以某种奇怪的随机模式填充，而有些则不然。 我没有包含html，因为我认为这不是必需的，但是如果有人需要更多信息，请告诉我。

这将重置窗体。 我已经对此进行了独立测试，并且可以正常工作。

function form_reset(){
   $('#hosp_search_form')[0].reset();
   $('#hosp_search_form').find("input[type=text], textarea").val("");
   $('input[type=checkbox]').each(function(){
      $('input[type=checkbox]').removeAttr('checked');
   });
   $('input[type=number]').val('');
   $('input[type=radio]').each(function(){
   $(this).removeAttr('checked');
 });

单击时，首先清除以前的值的形式，然后获取其他需要的值并设置它们的格式...这部分的内容有些丑陋，但是我已经安慰了所有值，一切都应该如此。

$('.search_again_btn').on('click', function(){
  form_reset();
   $('#hosp_search_form').find('input[type=checkbox]').removeAttr('checked');
   var id = $(this).data('id');
   var searchstring = $('#searchstring_' + id).text();
   var patientcode = $('#patientcode_' + id).text();
   var mrn = $('#mrn_' + id).text();
 var first_name = patientcode.substr(0,2);
 var last_name = patientcode.substr(2,2);
 var age = patientcode.substr(4,3);
 var gender = patientcode.substr(6,2);
 var age = age.replace(/\D+/g, '');
 gender = gender.replace(/[0-9]/g, '');

填充一些表格，效果很好

 //populate fields in search form
 $('input[name=fn]').val(first_name);
 $('input[name=ln]').val(last_name);
 $('input[name=patientage]').val(age);
 $('input[name=mrn]').val(mrn);

填充表单的另一部分，也总是根据需要工作

 //populate gender fields
 if(gender == 'F'){
   $('.female').attr('checked', 'checked');
 }
 if(gender == 'M'){
   $('.male').attr('checked', 'checked');
 }

我怀疑这是问题所在。 splitsearch是一个长字符串（以前的搜索历史记录），其中各项之间用分隔。 然后将它们分为不同的项目。 我在控制台上进行了记录，它正确地将其分解为所需的较小值，然后对其进行迭代，并遍历所有复选框，每个复选框均具有可保存在splitsearch中的数据属性。 如果值匹配，则应进行检查。 每次第一次，对于splitsearch / search字符串值的任何组合，此方法都有效，但是第一次之后，我不知道它在做什么。 我希望每次单击都会清除表单，并且它会再次进行值匹配，如我所述。

 //populate checkboxes
 var splitsearch = searchstring.split('. ');
 $.each(splitsearch, function(key, value){
   $('input[type=checkbox').each(function(keyb, checkbox){
       item = $(checkbox).data('services');
       if(item == value){
           $(this).attr('checked', 'checked');
           console.log($(this));
    }
 });

这样做与上面相同，但是每次都可以工作……可能是因为从来没有像复选框这样的多个组合。

$('input[name=payor]').each(function(k, radio){
 if(value == $(radio).data('payors')){
   $(this).attr('checked', 'checked');
   //console.log($(this));
  }
});

也喜欢上面的作品。

$('input[name=bedtype]').each(function(keyc, radio){
bed = $(radio).data('bed');
  if(bed == value){
    $(this).attr('checked', 'checked');
  }
});

下面的这一部分很丑陋，但每次都填充所需的表格。

 //if searchstring contains Needs Transportation, returns true, else     returns false 

 if(value.indexOf("Needs Transportation") > -1 === true){
   $('.transyes').attr('checked', 'checked');
 }
 if(value.indexOf("Near hospital") > -1 != true){
   $('input[name=desiredzip]').val(searchstring.substr(5,5));
 }
 if(value.indexOf("5 mile radius") > -1 === true){
   $('.miles_5').attr('checked', 'checked');
 }
 if(value.indexOf("10 mile radius") > -1 === true){
    $('.miles_10').attr('checked', 'checked');
 }
 if(value.indexOf("15 mile radius") > -1 === true){
    $('.miles_15').attr('checked', 'checked');
 }
 if(value.indexOf("20 mile radius") > -1 === true){
   $('.miles_20').attr('checked', 'checked');
  }
}); 

将窗口向上滚动到填充的搜索表单并显示它。

   window.scrollTo(0,100);
   $('#search_show').show();
});

Answer 1

只是一个想法，但是，它可能会帮助您稍微重组一下代码以使其保持DRY。

// used to Hold search data in local or global
var data;

function form_reset() {
  // clear form
}
function get_search_data() {
  // populate data with search results
}
function form_populate() {
  // use data to populate form
}

$('.search_again_btn').on('click', function(){
  get_search_data();
  form_reset(); 
  form_populate();
});

// Initial Load of form
get_search_data();
form_populate();

这样，您一开始就使用与刷新时相同的填充函数，这会迫使您将数据放入一个变量，该变量可以在clear和populate函数中看到，从而消除了对this和$（this）的依赖。

您还需要记住，click函数中的this值将在click事件本身的上下文中，而不是其余代码所属的JavaScript对象。