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

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" >
  <span >Promo Code  </span>
</button>
<input type="hidden" id="promo-value-copy" value="test">

<!-- Promo Modal -->
<div id="promoModal" >
  <div >
    <span >&times;</span>
    <input type="text"  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?

CodePudding user response：

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;

CodePudding user response：

You need to change the value like this:

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

CodePudding user response：

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

 }

Thanks Stackoverflowers!