'How to update the actual true value="" of a input field when another field is entered

I have reviewed tonnes of articles and all solutions only update the visually displayed value as opposed to the actual value within the input tag itself.

When I click on a button a modal appears with a text input to enter a code. We will call it input1

Upon entering the code and exiting the modal the button updates to the code entered and a hidden input value gets updated as well. However the actual tags value="" remains the same.

I have tried numerous ways but all seem to only update the visual and not the true value.

Here is what I have so far but it only updates the value you see in the browser not within the tag itself.

let promoModal = document.getElementById("promoModal");
let promoBtn = document.getElementById("promo");
let promoSpan = document.getElementsByClassName("promoClose")[0];

promoBtn.onclick = function() {
  promoModal.style.display = "block";
}
promoSpan.onclick = function() {
  promoModal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == promoModal) {
    promoModal.style.display = "none";
  }
}

function updatePromo() {
  let promoValue = document.getElementById("promo-value");
  let producePromo = document.getElementById("promo");
  let copyPromo = document.getElementById("promo-value-copy");
  producePromo.innerHTML = promoValue.value;
  copyPromo.innerHTML = promoValue.value;
}
/* THE MODAL */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 5px 20px;
    border: 1px solid #888;
    width: 280px;
    position: relative;
  }
}


/* The Close Button */

.adultClose,
.promoClose {
  color: #aaaaaa;
  position: absolute;
  right: 5px;
  top: 0px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<button id="promo" type="button" class="promo">
  <span class="promoCode">Promo Code +</span>
</button>
<input type="hidden" id="promo-value-copy" value="test">

<!-- Promo Modal -->
<div id="promoModal" class="modal">
  <div class="modal-content">
    <span class="promoClose">&times;</span>
    <input type="text" class="promo-value" id="promo-value" value="" placeholder="Promotional code" onchange="updatePromo()">
  </div>
</div>

I stripped the styling to get to the meat and potatoes.

How can I update the actual value="test" to the new value using javascript?

javascripthtmljqueryforms


Solution 1:[1]

The innerHTML is used for changing HTML content, so for instance you can use it for changing the content of a paragraph <p id="text-to-change"></p>. To change the input value you can use the .value property of the object.

Try to change the following line copyPromo.innerHTML = promoValue.value; with copyPromo.value = promoValue.value;

Solution 2:[2]

You need to change the value like this:

   document.getElementById("promo-value-copy").value = promoValue.value;

Solution 3:[3]

so going with Barmar's suggestion I was able to update my updatePromo function to both produce the value as well as update the DOM value.

Here is the updated function. I hope it helps the community.

 function updatePromo() {
   let promoValue = document.getElementById("promo-value");
   let producePromo = document.getElementById("promo");
   let copyPromo = document.getElementById("promo-value-copy");
   producePromo.innerHTML = promoValue.value;
   copyPromo.innerHTML = promoValue.value;
   copyPromo.setAttribute("value", promoValue.value); // suggestion given by Barmar

 }

I had to leave the other element as it adds the text after the form field which is actually needed for this project however typically would not be needed.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luigi T.
Solution 2 Raul Zarate
Solution 3

Related Questions