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

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);