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

Question

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?

_"However the actual tags value="" remains the same."_ Which element are you referring to? id="promo-value-copy"? — j08691, Jan 26 '22 at 21:26
If you want to change the value in the DOM, use `input1.setAttribute("value", newValue)` — Barmar, Jan 26 '22 at 21:26
Check this out https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html. I think this will clear things up for you. Here's the important part: "The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code" — Andre Nuechter, Jan 26 '22 at 21:27
@Barmar you rock, that was exactly the issue. I just couldn't get the wording right to be able to properly research. If you wanted to make it a answer I will mark it as correct. I just added it to my updatePromo function and we are golden. — DigitalDesigner, Jan 26 '22 at 21:32
thx @AndreNuechter that stack is a good read, I will surely review tonight over a cuppa :) — DigitalDesigner, Jan 26 '22 at 21:38
[Input](https://html.spec.whatwg.org/multipage/input.html#the-input-element) shouldn't have children, it has a`content model` of `nothing` in the spec which says *When an element's content model is nothing, the element must contain no Text nodes (other than inter-element whitespace) and no element nodes.* — pilchard, Jan 26 '22 at 21:42

score 1 · Answer 1 · answered Jan 26 '22 at 21:33

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;

answered Jan 26 '22 at 21:33

Luigi T.

506
3
11
22

unfortunately i need them in both locations. The solution I went with is above. Thanks for the assist though :) – DigitalDesigner Jan 26 '22 at 21:37
You need to change only the last line of the updatePromo() function. The rest is correct. – Luigi T. Jan 26 '22 at 21:46

score 0 · Answer 2 · answered Jan 26 '22 at 21:42

0

You need to change the value like this:

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

answered Jan 26 '22 at 21:42

Raul Zarate

101
1

as mentioned in the other response with the same answer I cannot remove/replace this element unfortunately. I decided to go with Barman's suggestion which has worked for my needs. thanks. – DigitalDesigner Jan 26 '22 at 21:44

DigitalDesigner · Answer 3 · 2022-04-21T19:46:12.520

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.

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

3 Answers3