Home Concate two input string instantly without a button(as soon as we move the cursor out of the second box)

Questions

Concate two input string instantly without a button(as soon as we move the cursor out of the second box)

December 23, 2022

A javascript program to concate the first name and last name, but the concated string gets displayed as the cursor moves out from the last name text box

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Practical 3</title>
    <style>
        #concatenator {
            background-color: white;
            height: 150px;
            width: 330px;
            border-width: 4px;
            border-color: black;
            border-style: solid;
            padding: 5px;
        }
    </style>
    <script>
        function concat() {
            fst = String(myform.fst.value);
            snd = String(myform.snd.value);
            result = fst.concat(" ", snd);
            myform.result.value = result;
        }
        function refresh() {
            location.reload();
        }
    </script>
</head>

<body id="concatenator">
    <form name="myform">
        Enter first name: <input type="text" name="fst"><br><br>
        Enter second name: <input type="text" name="snd"><br><br>
        <input type="Button" name="" value="Refresh" onclick="refresh()">
        <input type="Button" name="" value="Full Name" onclick="concat()"><br><br>
        Full Name: <input type="text" name="result">
    </form>
</body>

</html>

`
I have to makes changes in this so that the full name button is gone and the two name are concatenated instantly

>Solution :

To achieve that result you may use a keyup event handler on your input elements so that a given logic will be executed every time the user type something.

Such logic just fetches the values of those input elements, concatenates the two string and sets the value of the return input element.

I used a general approach as far as possible so that the conditions to fetch those two input elements are defined as css selectors in the targetSelectors array.

//selectors relative to the root document for the input element to concat
const targetSelectors = ['#myform [name=fst]', '#myform [name=snd]'];

//adds a keyup event handler to all the elements in targetSelectors
targetSelectors.forEach( (targetSelector) => {
  document.querySelector(targetSelector)
    .addEventListener('keyup', (event) => {
      //concats the fields value
      const concatenated = concatFields(' ');
      //refreshes the result input field value with the new one
      refreshField('input[name=result]', concatenated);
    });
});

//sets the value of the input element found with targetSelector
function refreshField(targetSelector, value){
  document.querySelector(targetSelector).value = value;
}

//returns the concatenated values from the input elements in targetSelectors (separated by spacer)
function concatFields(spacer = ''){
  return targetSelectors.map( targetSelector => document.querySelector(targetSelector).value ).join(spacer);  
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Practical 3</title>
    <style>
        #concatenator {
            background-color: white;
            height: 150px;
            width: 330px;
            border-width: 4px;
            border-color: black;
            border-style: solid;
            padding: 5px;
        }
    </style>
    <script>
        function concat() {
            fst = String(myform.fst.value);
            snd = String(myform.snd.value);
            result = fst.concat(" ", snd);
            myform.result.value = result;
        }
        function refresh() {
            location.reload();
        }
    </script>
</head>

<body id="concatenator">
    <form id="myform">
        Enter first name: <input type="text" name="fst"><br><br>
        Enter second name: <input type="text" name="snd"><br><br>                
        Full Name: <input type="text" name="result">
    </form>
</body>

</html>