Merge text inputs to preview content prior to form submission

Question

Merge text inputs to preview content prior to form submission

I've been on the hunt for a solution to display the collective values entered into multiple text box fields as they are being typed. Currently, I have 6 text boxes (description1, description2, description3, description4, description5, description6) which are concatenated using PHP into a "final_description" that is then stored in the database. My objective is to provide users with a preview of what the final_description will look like when all 6 fields are combined, before submitting the form and processing it through PHP. The kind of code I'm seeking is akin to the functionality seen here on StackOverflow where typing adds content below for visual output. I simply want to merge the input from multiple text boxes into one preview.

javascript ajax

Answer 1

Answer №1

If you have the following elements:

<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />

<div id="final_desc" />

You can make it work like this:

window.onload = function(){
   function forEach(arr, fun){ return Array.prototype.forEach.call(arr, fun); };
   var inputs = document.querySelectorAll(".desc");
   function updateFinalDesc(){
       var finalDescription = "";
       forEach(inputs, function(inp){ finalDescription += inp.value + "<br/>"; });
       document.getElementById('final_desc').innerHTML = finalDescription;
   };
   forEach(inputs, function(input){
       input.addEventListener('keypress', updateFinalDesc);
       input.addEventListener('change', updateFinalDesc);
   });
}

I hope this explanation is helpful. Cheers!

Answer 2

If you have the following elements:

<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />

<div id="final_desc" />

You can make it work like this:

window.onload = function(){
   function forEach(arr, fun){ return Array.prototype.forEach.call(arr, fun); };
   var inputs = document.querySelectorAll(".desc");
   function updateFinalDesc(){
       var finalDescription = "";
       forEach(inputs, function(inp){ finalDescription += inp.value + "<br/>"; });
       document.getElementById('final_desc').innerHTML = finalDescription;
   };
   forEach(inputs, function(input){
       input.addEventListener('keypress', updateFinalDesc);
       input.addEventListener('change', updateFinalDesc);
   });
}

I hope this explanation is helpful. Cheers!

Answer 3

Answer №2

For those utilizing the knockout.js data binding framework, here is a solution for your specific scenario:

<div id="content">
    <input type="text" data-bind="value: detail1" />
    <input type="text" data-bind="value: detail2" />
    <input type="text" data-bind="value: detail3" />
    <input type="text" data-bind="value: detail4" />
    <input type="text" data-bind="value: detail5" />
    <input type="text" data-bind="value: detail6" />
    <span data-bind="text: combined"></span>
</div>

<script type="text/javascript">
function myDataModel()
{
    var self = this;
    self.detail1 = ko.observable("");
    self.detail2 = ko.observable("");
    self.detail3 = ko.observable("");
    self.detail4 = ko.observable("");
    self.detail5 = ko.observable("");
    self.detail6 = ko.observable("");

    self.combined= ko.computed(function() {
    return self.detail1() + " " + self.detail2()+ " " + self.detail3()+ " " + self.detail4()+ " " + self.detail5()+ " " + self.detail6();
    }, self);
}

ko.applyBindings(new myDataModel(), document.getElementById("content"));
</script>

To ensure proper functionality, remember to integrate the knockout.js library into your webpage.

Answer 4

For those utilizing the knockout.js data binding framework, here is a solution for your specific scenario:

<div id="content">
    <input type="text" data-bind="value: detail1" />
    <input type="text" data-bind="value: detail2" />
    <input type="text" data-bind="value: detail3" />
    <input type="text" data-bind="value: detail4" />
    <input type="text" data-bind="value: detail5" />
    <input type="text" data-bind="value: detail6" />
    <span data-bind="text: combined"></span>
</div>

<script type="text/javascript">
function myDataModel()
{
    var self = this;
    self.detail1 = ko.observable("");
    self.detail2 = ko.observable("");
    self.detail3 = ko.observable("");
    self.detail4 = ko.observable("");
    self.detail5 = ko.observable("");
    self.detail6 = ko.observable("");

    self.combined= ko.computed(function() {
    return self.detail1() + " " + self.detail2()+ " " + self.detail3()+ " " + self.detail4()+ " " + self.detail5()+ " " + self.detail6();
    }, self);
}

ko.applyBindings(new myDataModel(), document.getElementById("content"));
</script>

To ensure proper functionality, remember to integrate the knockout.js library into your webpage.

Answer 5

Answer №3

My approach might not be perfect, but it gets the job done:

var desc1 = document.getElementById('description1');
var desc2 = document.getElementById('description2');
var desc3 = document.getElementById('description3');
var desc4 = document.getElementById('description4');
var desc5 = document.getElementById('description5');
var desc6 = document.getElementById('description6');
desc1.onkeyup = desc1.onkeypress = function(){
document.getElementById('description1preview').innerHTML = this.value;
}
desc2.onkeyup = desc2.onkeypress = function(){
document.getElementById('description2preview').innerHTML = this.value;
}
desc3.onkeyup = desc3.onkeypress = function(){
document.getElementById('description3preview').innerHTML = this.value;
}
desc4.onkeyup = desc4.onkeypress = function(){
document.getElementById('description4preview').innerHTML = this.value;
}
desc5.onkeyup = desc5.onkeypress = function(){
document.getElementById('description5preview').innerHTML = this.value;
}
desc6.onkeyup = desc6.onkeypress = function(){
document.getElementById('description6preview').innerHTML = this.value;
}

Answer 6

My approach might not be perfect, but it gets the job done:

var desc1 = document.getElementById('description1');
var desc2 = document.getElementById('description2');
var desc3 = document.getElementById('description3');
var desc4 = document.getElementById('description4');
var desc5 = document.getElementById('description5');
var desc6 = document.getElementById('description6');
desc1.onkeyup = desc1.onkeypress = function(){
document.getElementById('description1preview').innerHTML = this.value;
}
desc2.onkeyup = desc2.onkeypress = function(){
document.getElementById('description2preview').innerHTML = this.value;
}
desc3.onkeyup = desc3.onkeypress = function(){
document.getElementById('description3preview').innerHTML = this.value;
}
desc4.onkeyup = desc4.onkeypress = function(){
document.getElementById('description4preview').innerHTML = this.value;
}
desc5.onkeyup = desc5.onkeypress = function(){
document.getElementById('description5preview').innerHTML = this.value;
}
desc6.onkeyup = desc6.onkeypress = function(){
document.getElementById('description6preview').innerHTML = this.value;
}

Merge text inputs to preview content prior to form submission

Answer №1

Answer №2

Answer №3

Similar questions

Utilize the useState hook to update state when changes occur in the

Problem with laravel ajax request

Parsing the JSON string from PHP using JSON.parse resulted in an unexpected and strange array

jQuery Ajax consistently returns the data type of an 'object'

Tips for concealing an input IP Address in React

Understanding the Vue lifecycle methods for updating Vuex state

Is it possible to preserve the query parameters from the previous page using Vue Router's Navigation guard feature?

Turn off drag and drop functionality and activate selection in HTML

Cannot extract the 'name' property from 'e.target' because it is not defined

Modifying the page header content using JavaScript

What is V8's approach to managing dictionaries?

Can a JavaScript function be used with images to operate across multiple elements?

PHP: How to send checkbox value in conjunction with textbox values

Retrieve the city ID from an AJAX call that populates a dropdown menu with cities, and pass it back

Issue with Google Charts where the label does not show outside of the bar if the bar is too small

Unable to access the data once CORS is disabled

Attempting to resolve the Bootstrap issue, currently in search of a suitable solution

Serialize the elements within an array using JSON.stringify

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query