javascript pass variable to text input onchange event not work

Question

I'm trying to fill a text input using a URL parameter: http://127.0.0.1/index.html?uname="john"

<p class="control">
<input autofocus id="uname" class="input" 
  onchange="(sayhello(this.value))" 
  oninput="sayhello(this.value)" 
  placeholder="Enter your name" type="text">
</p>

I use the following script to pass the URL parameter into text input but the events don't work, they works only if I delete the input text and type it.

<script>
var uunme = window.location.href.match(/\?uname=(.*)/);
document.getElementById("uname").value = uunme[1];

</script>

`sayhello` is not a native function. Also, change/input events are not triggered when changing the value of an input programmatically. You've to manually call the event handler, or fire the change/input event. — Teemu, Sep 07 '17 at 17:34
Neither `onchange` nor `oninput` will trigger when you set the value programmatically. — stephen.vakil, Sep 07 '17 at 17:35
https://stackoverflow.com/questions/6826707/javascript-onchange-event-does-not-work-with-value-change-in-text-input-o — epascarello, Sep 07 '17 at 17:43

score 0 · Answer 1 · answered Sep 07 '17 at 17:42

0

Something like this?

var url_string = "https://example.com/?uname=foo"; // window.location.href
var url = new URL(url_string);
var uunme = url.searchParams.get("uname");
document.getElementById("uname").value = uunme;

function sayhello(text) {
  alert(text);
}

<p class="control">
  <input autofocus id="uname" class="input" onchange="sayhello(this.value);" oninput="sayhello(this.value);" placeholder="Enter your name" type="text">
</p>

I used the answer from the Stackoverflow question "How to get the value from the GET parameters?" to reliably retrieve the URL parameter uname. I also tidied up a few things.

answered Sep 07 '17 at 17:42

Ari Seyhun

11,506
16
62
109

i know that, when the page loads the parametr foo is loaded in input text but the function doesnt work – roxy678 Sep 07 '17 at 17:51
The `sayhello()` function? – Ari Seyhun Sep 07 '17 at 17:52
yes, only works if i delete the input text, and type it manual – roxy678 Sep 07 '17 at 17:53
In my example it's working. Can you maybe provide the code in your `sayhello()` function? – Ari Seyhun Sep 07 '17 at 17:53
i use the same with your, when you run your code the function works ?? for me only work when i type something into input text – roxy678 Sep 07 '17 at 17:55
Yeah when you press `Run code snippet`, nothing happens until you start typing in the input box. Isn't this what you want? – Ari Seyhun Sep 07 '17 at 17:56
no, this is the problem, i need the function hello works when the url load – roxy678 Sep 07 '17 at 17:59
In your javascript code, why can't you just call the function instantly with `sayhello(uunme);`? – Ari Seyhun Sep 07 '17 at 17:59
sure that works, but first had to fill the parametr in text input – roxy678 Sep 07 '17 at 18:11
then just run `sayhello(uunme);` after you fill the parametr in text input. – Ari Seyhun Sep 07 '17 at 18:12

javascript pass variable to text input onchange event not work

1 Answers1