Show in div input value + option select

[fumeeptc]

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

But it seems i did something wrong

anybody can take a look at it?

Edit fiddle - JSFiddle - Code Playground

Thanks

[droopsnoot]

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;
}

[fumeeptc]

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

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

[droopsnoot]

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.

[fumeeptc]

@droopsnoot

var dropDown = document.getElementById(‘clientCode’);

Once again you helped me!Thanks allot

[chrisofarabia]

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.

[fumeeptc]

Ok a typo its “div”

[chrisofarabia]

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

[fumeeptc]

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

[droopsnoot]

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

[fumeeptc]

@droopsnoot here is that mess https://jsfiddle.net/0hj594tn/3/

[droopsnoot]

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.

[Paul_Wilkins]

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?

[droopsnoot]

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

[fumeeptc]

@droopsnoot

onchange

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!

[droopsnoot]

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.

[fumeeptc]

This totally did this!

Big thanks from me @droopsnoot and @Paul_Wilkins
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

Thanks for help once again!

[Paul_Wilkins]

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.