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

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

CodePudding user response：

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>

And this an attempt went too far with the generalization able to keep an arbitrary number of inputs bound to each other in the aim of concatenating their values inside an output element when the change event occurs on any of those inputs.

*the answer was accepted already.. it was for the sake of making sense of the generalized approach and nothing else

const c = new Concatenator(
  retrieveClassSelectors('#showingMaxPotential input.concat'),
  '#showingMaxPotential input[name=result]');


//returns an array of selector (sorted) based on the class attribute belonging to all the elements grabbed by the matchingSelector
function retrieveClassSelectors(matchingSelector){
  
  const specificSelectors =
    [...document.querySelectorAll(matchingSelector)]
    .map(target => {    
      const classesSelector =
        target.getAttribute('class')
          .replace(/[^\s] /g, '.$&')
          .replace(/\s/g, '');
      return classesSelector;
      }).sort();
      
  return specificSelectors;
}

function Concatenator(targetSelectors, outputSelector) {

  this.init = () => {
    //adds a keyup event handler to all the elements in targetSelectors
    this.targetSelectors.forEach((targetSelector) => {      
      document.querySelector(targetSelector)
        .addEventListener('keyup', (event) => {
          //refreshes the result input field value with the new one
          this.refreshField(this.outputSelector, this.concatFields(' '));
        });
    });
  }

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

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

  this.targetSelectors = targetSelectors;
  this.outputSelector = outputSelector;
  this.init();

}

form#showingMaxPotential{
  border: solid 1px darkgray;
  padding: 1em;
}

form#showingMaxPotential > label,
form#showingMaxPotential > input{
  display:  block;
}

form#showingMaxPotential > input{
  margin-bottom: 1em;
}

<form id="showingMaxPotential">
  <label>Enter <b>first</b> item name:</label>
  <input type="text" name="i1" >
  
  <label>Enter <b>last</b> item name:</label>
  <input type="text" name="i3" >

  <label>Enter <b>middle</b> item name:</label>
  <input type="text" name="i2" >

  <label>Full Name:</label>
  <input type="text" name="result" disabled>
</form>