Show in div input value + option select

What i want to get is a code that is made from input value and option value .

But it seems i did something wrong :frowning:

anybody can take a look at it?


This seems to do it, if I’ve understood correctly:

var inputBox = document.getElementById('docNr');

inputBox.onkeyup = function(){
  var id = $('#clientCode').val();
  var newI = inputBox.value +" "+ id;
  document.getElementById('printchatbox').innerHTML = newI;
1 Like

Yes that is exactly what i needed!
Found another issue i cant solve maybe you have an idea?

If i type in input first and only then select value from select box then value in dive does not update :frowning:

it should do it from both sides no matter was entered first

That’s because the only thing that triggers the update is your function that is called onkeyup in the text input box. You need to add a function that runs on change of the selection value in the drop-down.

var dropDown = document.getElementById('clientCode');

dropDown.change = function ( 
// and so on

Of course, what you then want is to move the content to a separate function, and have both your .change and .onkeyup call that, so as to not duplicate the code.

1 Like

Once again you helped me!Thanks allot :slight_smile:

Do you mind me asking what the “dov” in the title means? I’m assuming it’s a typo, in which case, if you can let me know what it is, I can correct and make it easier to understand for searches and so on.

1 Like

Ok a typo its “div”

1 Like

Ah, you did it. Wasn’t sure whether you’d still be within the ‘edit window’ for it.

looks like i cant put it together :frowning: i tought it works but when it comes to puting it in function one part doesnt wor in real time . … :cold_sweat:

Post the code so we can see where it’s going wrong.

@droopsnoot here is that mess

You haven’t added the function to catch a change of the value of the drop-down. What you have there works, now you need to add the code to trap changes of the drop-down value, as in post #4.

Sorry, it’s “onchange” rather than “change” that you need to trap.

Because the onchange event can be easily overwritten or messed up by other code, it’s become a lot safer to use addEventListener with the “change” event instead.

For example:

var clientCode = document.querySelector("#clientCode");
clientCode.addEventListener("change", clientChangeHandler. false);

I tend to use querySelector now instead of getElementById, because they’re as easy to use as each other, and with queryString it’s easier to make refinements to the selector later on. With getElementById though, you sometimes need to consider filtering the results, or switching back over to querySelector.

Because of that occasional switch, I find that nowdays it’s better to use querySelector as a regular habit.

Which has me pondering. Since IE8 onwards support querySelector (IE8 with some limitations), are there any good reasons to use getElementById anymore? :thinking:


Ah, I see. And use “keyup” to trap whenever a user presses a key (or technically, stops pressing a key) in the text box.

I m still learning JS and jQuery so i can do some basic things , but when it comes to harder things and how to do better i m in trouble! Like here!

Actually, Pauls method makes it even easier. Instead of defining a function for each event and having those functions call a central function to update the display, you can actually just have both events call the same function.

var inputBox = document.querySelector('#docNr');
var dropDown = document.querySelector('#clientCode');
dropDown.addEventListener("change", myFunction, false);
inputBox.addEventListener("keyup", myFunction, false);

function myFunction() {
  var ibVal = inputBox.value;
  var ddSel = $('#clientCode').find('option:selected').val();
  var newI = ibVal +" "+ ddSel;
  document.getElementById('printchatbox').innerHTML = newI;
  $('#cargoCode').val(newI);             // The function returns the product of p1 and p2

So, any time the user either changes the dropdown selection, or types a key in the input box, the function is called and the display updated.


This totally did this!

Big thanks from me @droopsnoot and @Paul_Wilkins :slight_smile:
in code it looks so simple but when i have to put that together its complicated for me for now!
But in future for similar codes this one will be excellent example :slight_smile:

Thanks for help once again!


Here’s an idea. Because the input event is triggered both on change and keyup, you could get away with using the “input” event in both situations.

The “false” part is the default state too, so you could simplify the code with:

["#docNr", "#clientCode"].forEach(function (selector) {
  document.querySelector(selector).addEventListener("input", myFunction);

Can this be simplified further? ES6 gives us arrow functions:

["#docNr", "#clientCode"]
  .map(selector => document.querySelector(selector))
  .forEach(input => input.addEventListener("input", myFunction));

Is that getting too simple? It looks beautiful.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.