CODEWITHSUNDEEP
javascriptjqueryhtml
xohbrittx
xohbrittx

Reputation: 181

Changing the default value of an input to the value of a hidden input

I have a form that generates a first and last name that isn't correct. So I made hidden inputs with the users correct first and last name. My query however isn't changing that value to the value of my hidden inputs and I'm not sure what's wrong with my code. Here's a jsfiddle with what I'm doing https://jsfiddle.net/9xmz94bq/2/

Here's my jquery, I have a timer on it because the original file loads js to populate certain input values, including the one's I want to change, and I need to wait for it to be done before changing anything:

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

Upvotes: 1

Views: 83

Answers (2)

Terry
Terry

Reputation: 66103

If you look into your code, it is quite apparent what have went wrong: firstName is the value of an input. $(firstName) will not give you the reference to the element. The same applies to all your other variables.

$(...) simply returns the jQuery object. Therefore, to set the value, you can do the following:

  1. Store the shown <input> elements in variables starting with $, i.e. $firstName and $lastName. These are jQuery objects, to which you can chain additional jQuery functions to.
  2. Store the hidden <input> element values (which are of String type) in variables without $, i.e. hiddenFirstName and hiddenLastName. These are not jQuery objects, and wrapping them in $(...) will not do anything either.

These conventions, although not set in stone, is very helpful because when making quick glances at your code, you can easily tell apart what variables refer to jQuery objects and what are simply normal JS variables.

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

Here is a proof-of-concept example:

$(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">

Upvotes: 2

vabii
vabii

Reputation: 521

Probably what you need is this

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

Upvotes: 0

Related Questions