Onclick of link set value of different ID

Question

So I've been searching a lot here and on google, but can't seem to find the solution.

Onclick of a link, I need to empty the value of a hidden input field with a certain ID.

var x = document.getElementById('tijdelijke_datum');

document.getElementById("close-popup").onclick = verwijderdatum;

function verwijderdatum() {
  x.value = "";
}

<a href="websitelink" id="close-popup">Button value</a>

<input type="hidden" id="tijdelijke_datum" value="{$profile.x}" />

Does this answer your question? [Update hidden input field value with another input field value?](https://stackoverflow.com/questions/14709637/update-hidden-input-field-value-with-another-input-field-value) — Kiksen, Jan 28 '20 at 13:05
Why does `close-popup` have `href="websitelink"`? Also, did your forget to add relevant tags? This looks like you're using some kind of template library: `value="{$profile.x}"` — connexo, Jan 28 '20 at 13:08
@connexo I just typed that there instead of the link I was using :-) The value has a smarty value assigned to it — Sybrentjuh, Jan 28 '20 at 14:35

score 4 · Accepted Answer · answered Jan 28 '20 at 13:08

Its working. Your problem is, since you are using anchor tag, the page navigates to new URL. Try using Button instead or setting href to "#"

var x = document.getElementById('tijdelijke_datum');

document.getElementById("close-popup").onclick = verwijderdatum;
document.getElementById("close-popup2").addEventListener("click", verwijderdatum);

function verwijderdatum() {
  console.log(document.getElementById('tijdelijke_datum').value);
  x.value = "";

  console.log(document.getElementById('tijdelijke_datum').value);
}

<a href="#" id="close-popup">Button value</a>

<br>

<input type="button" id="close-popup2" value="Button value">

<input type="hidden" id="tijdelijke_datum" value="{$profile.x}" />

score 1 · Answer 2 · answered Jan 28 '20 at 13:07

Change your javascript code like below,

var x = document.getElementById('tijdelijke_datum');

document.getElementById("close-popup").addEventListener('click', () => {
    event.preventDefault(); // To stop href to navigate, we are using this line
    verwijderdatum();
});

function verwijderdatum() {
    x.value = "";
}

score 0 · Answer 3 · answered Jan 28 '20 at 13:07

0

Change <a href="websitelink" id="close-popup">Button value</a> to <a href="javascript:verwijderdatum();" id="close-popup">Button value</a>

Remove this line: document.getElementById("close-popup").onclick = verwijderdatum;

answered Jan 28 '20 at 13:07

Vijay Joshi

919
7
17

Shashikant · Answer 4 · 2020-01-28T13:52:58.463

Use Jquery to reset the input field.

use the following code :

<script>

  $("#close-popup").click(function(){
    $("#tijdelijke_datum").val("")
  })
</script>

Also include a jquery CDN file in your project.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Your final code will be as follow :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container text-center">
<a href="websitelink" id="close-popup">Button value</a>
<input type="hidden" id="tijdelijke_datum" value="{$profile.x}" />
</div>


<script>
  $("#close-popup").click(function(){
    $("#tijdelijke_datum").val("")
  })
</script>

I never mind also getting a jquery solution, atleastI can learn from that :-) Although in this case I indeed only need the js, to keep it clean. Thanks though — Sybrentjuh, Jan 28 '20 at 15:39

Onclick of link set value of different ID

4 Answers4