将输入的默认值更改为隐藏输入的值

Question

我有一个生成的名字和姓氏不正确的表格。 因此，我使用用户正确的名字和姓氏进行了隐藏输入。 但是，我的查询没有将该值更改为隐藏输入的值，并且我不确定我的代码有什么问题。 这是我正在做的事情的jsfiddle https://jsfiddle.net/9xmz94bq/2/

这是我的jquery，上面有一个计时器，因为原始文件会加载js来填充某些输入值，包括我要更改的值，并且我需要等待它完成后再进行任何更改：

setTimeout(function () {
   var firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML').val();
   var lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML').val();

   var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
   var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

   $(firstName).val($(hiddenFirstName).val());
   $(lastName).val($(hiddenLastName).val());
}, 1000);

Answer 1

如果看一下代码，很明显出了什么问题： firstName是输入的值。 $(firstName)不会给您对该元素的引用。 这同样适用于所有其他变量。

$(...)只是返回jQuery对象。 因此，要设置该值，可以执行以下操作：

1. 将显示的<input>元素存储在以$开头的变量中，即$firstName和$lastName 。 这些是jQuery对象，您可以将其他jQuery函数链接到这些对象。
2. 将隐藏的<input>元素值（ String类型）存储在不带$变量中，即hiddenFirstName和hiddenLastName 。 这些不是 jQuery对象，将它们包装在$(...)也不会做任何事情。

这些约定虽然不是一成不变的，但却非常有用，因为当快速浏览一下代码时，您可以轻松分辨出哪些变量是指jQuery对象，什么是普通的JS变量。

setTimeout(function () {

  // Convention: Store references to DOM elements in $...
  var $firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML');
  var $lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML');

  // Convention: Store strings in normal variable names without $
  var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
  var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

  // Set the value of jQuery object to string
  $firstName.val(hiddenFirstName);
  $lastName.val(hiddenLastName);
}, 1000);

这是一个概念验证示例：

 $(function() { setTimeout(function() { var $firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML'); var $lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML'); var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val(); var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val(); $firstName.val(hiddenFirstName); $lastName.val(hiddenLastName); }, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ContactField"> <label>First Name:</label><br> <input class="Input_Style required valid" name="txtShipToFirstName" id="ShipBillInformation_txtShipToFirstName_NewHTML" type="text" value="DefaultFirstName"> </div> <div class="ContactField"> <label>Last Name:</label><br> <input class="Input_Style required" maxlength="30" name="txtShipToLastName" id="ShipBillInformation_txtShipToLastName_NewHTML" type="text" value="DefaultLastName" onfocus="if (this.value=='Last Name') this.value='';" onblur="if (this.value=='') this.value='';"> </div> <input type="hidden" name="ShopperFirstName" value="MyFirstName"> <input type="hidden" name="ShopperLastName" value="MyLastName"> 

Answer 2

可能您需要的是这个

setTimeout(function () {
   var firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML');
   var lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML');

   var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
   var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

   firstName.val(hiddenFirstName);
   lastName.val(hiddenLastName);
}, 1000);