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

Analyzing the path of the cursor

There is no way to convert a strongly typed object into an observable object using MobX

AngularJS $cookies version 1.6.9 experiencing functionality issues

Utilizing the variables defined in the create function within the update function of Phaser 3

The Laravel array is returning incorrect values

Exploring the concept of front-end deletion through ajax technology

Using JavaScript to generate dynamic folders in Alfresco is not functioning as expected

JSON - The challenge of incorporating single quotes within double quotes

Steps to delete an item from a table without affecting the database

Generated Form Data Automatically

Steps for integrating a valid SSL certificate into a Reactjs application

Which is the better option for data storage: JSON files or MySQL database?

The children's className attribute can impact the parent element

How can one keep object values constant or unchanging in JavaScript?

Animation not functioning properly after Ajax call in event onload

How do I automatically redirect to a different URL after verifying that the user has entered certain words using Javascript?

The chosen option does not display any information

Enhance the axis functionality in c3.js

Setting the class attribute dynamically using code behind

Exploring the process of updating initialState within react-redux