Output Contents of Input in div

Question

I am creating a contact form that creates something like a cart view depending on the inputs.

I managed to get all the checkboxes to output when they are checked; I am having trouble getting the same to work with text and number inputs. So input type text, number and textarea.

<input id="form_name" type="text" name="name" class="form-control"
       placeholder="Please enter your firstname *" required="required"
       data-error="Pflichtfeld" data-validate="true">

<input type="number" id="age" name="age" min="16" max="99"
       class="form-control" required="required"
       data-error="Pflichtfeld" data-validate="true">

<div id="descript11" style="display:none;">Vorname:
  <b id="vorname"></b>
</div>

<div id="descript12" style="display:none;">Alter:
  <b id="alter"></b>
</div>

So I tried the method with $(document).change() but that did not work. I want to grab the contents of the input or textarea and output it to the div with the corresponding id. So "age" should output to "alter" and so on. I'm not sure how to achieve this and w3schools or other sites don't offer an answer.

Answer 1

You can do it like this:

$('input').on('input',function(){
    let text = $(this).val();
    let id = $(this).attr('id');
    $('div.'+id).text(text)
});

This snippet checks changes on inputs and sets their value to the div with class that matches each input's id .

Answer 2

You can do this by adding an input event listener to your input text boxes. In the example below, I loop through all your input text boxes (as I gave them a class of text-input ) using a forEach loop. You can then grab the text from the textbox using this.value and place it into its associated div. To help with this I created a mapping object which is used to map the id of the input to the id of where the text should be placed into.

See example below:

 const input_map = { form_name: "vorname", age: "alter" } document.querySelectorAll(".text-input").forEach(elem => { elem.addEventListener('input', function() { const textbox_value = this.value; // get text from input bpx const target = input_map[this.id]; // get location (ie: the id) of where the text should be placed document.getElementById(target).innerText = textbox_value; // place the text in that location }); }); 

 <input id="form_name" type="text" name="name" class="form-control text-input" placeholder="Please enter your firstname *" required="required" data-error="Pflichtfeld" data-validate="true"> <input type="number" id="age" name="age" min="16" max="99" class="form-control text-input" required="required" data-error="Pflichtfeld" data-validate="true"> <div id="descript11">Vorname:<b id="vorname"></b></div> <div id="descript12">Alter: <b id="alter"></b></div> 

Note : In the example above I removed the style="display: none;" from your divs so that you can see the output