在提交表单前合并文本字段以供预览

我一直在搜索不成功的代码，以便在人员类型中显示在页面上组合的多个文本框字段中输入的值。我目前有6个文本框（描述1，描述2，描述3，描述4，描述5，描述6），它们在后端与PHP结合，形成一个“final_description”，然后保存在数据库中。我的目标是让用户能够在PHP保存和处理表单之前查看所有6个字段组合的final_description。我正在寻找的代码非常类似于我们在此处使用的stackoverflow，当您键入它时将其添加到下方，以便您可以看到它将如何输出。我只是想将它放在一个预览中，将多个文本框合并在一起。在提交表单前合并文本字段以供预览

来源

2014-01-12 Chris Allington

假设你有：

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

<div id="final_desc" />

这会工作：

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

希望这有助于。干杯

来源

2014-01-12 07:09:08

如果使用knockout.js数据绑定库这里是你如何解决这个问题：

<div id="content"> 
    <input type="text" data-bind="value: description1" /> 
    <input type="text" data-bind="value: description2" /> 
    <input type="text" data-bind="value: description3" /> 
    <input type="text" data-bind="value: description4" /> 
    <input type="text" data-bind="value: description5" /> 
    <input type="text" data-bind="value: description6" /> 
    <span data-bind="value: combined"></span> 
</div> 

<script type="text/javascript"> 
function myViewModel() 
{ 
    var self = this; 
    self.description1 = ko.observable(""); 
    self.description2 = ko.observable(""); 
    self.description3 = ko.observable(""); 
    self.description4 = ko.observable(""); 
    self.description5 = ko.observable(""); 
    self.description6 = ko.observable(""); 

    self.combined= ko.computed(function() { 
    return self.description1() + " " + self.description2()+ " " + self.description3()+ " " + self.description4()+ " " + self.description5()+ " " + self.description6(); 
    }, self); 
} 

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

只需确保在您的网页knockout.js库。

来源

2014-01-12 07:27:17

我跟着去了。我知道它可能不是最好的，但它似乎工作：

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

来源

2014-01-12 07:50:13

在提交表单前合并文本字段以供预览

回答

相关问题