输入字段到文本输出

Question

我想做的是创建一个网络表单，将输入字段中的信息添加到预定义的文本中。到目前为止我的代码如下：

<form action="" method="post">
<input type="reset" value="Clear">
<p>
<input type="text" name="casenumber" value="Case Number" onclick="this.select()" size="25"/>
</p>
<p>
<input type="text" name="name" value="Name" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="dealer code" value="Dealer Code" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="cid" value="CID" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="callback" value="Callback#" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="authentication" value="Dealer Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="email" value="Email" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ptn" value="PTN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ban" value="BAN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="banauth" value="Ban Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="type" value="Type of Request" onclick="this.select()" size="25" />
</p>
<p>
Actions Taken:<br/>
<textarea name="actions" rows="5" cols="50"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>

现在我希望将输入到这些字段中的所有信息都添加到此

SFDC - TSO 案例编号：在此处插入输入

经销商名称：在此处输入

经销商代码：在此处输入

CID：此处插入输入

回调#：在此处插入输入

经销商身份验证：在此处插入输入

电子邮件：在此处插入输入

PTN#：在此处插入输入

BAN：在此处插入输入

BAN 身份验证：在此处插入输入

请求类型：在此处插入输入

采取的操作：在此处插入输入

无法找到如何执行此操作，因此非常感谢您的帮助。

Answer 1

我认为您必须使用占位符。看：

http://www.w3schools.com/tags/att_input_placeholder.asp
练习：

<form action="" method="POST">
    <input type="text" name="X" placeholder="Some text..." />
</form>

Answer 2

如果您不关心语言，这可以通过 JavaScript 轻松完成。只需将 class 添加到所有输入并在定义的文本旁边添加一个跨度

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <input id='txtCaseNumber' class="copyValue" placeholder="case number"/>
    <input id='txtDealer' class="copyValue" placeholder="Dealer Name"/>
    Case Number: <span data-inputId="txtCaseNumber"></span>
    Dealer Name: <span data-inputId="txtDealer"></span>

    <script>    
       $(document).ready(function(){
          $(".copyValue").blur(function(){              
            var inputId = $(this).attr('id');               
            var ident = "span[data-inputId='" + inputId + "']";             
            $(ident).html($(this).val());           
        });
      });
   </script>
  </body>
</html>

Answer 3

如果我没有正确理解你的问题。你可以做这样的事情。但这不是唯一的方法，它只是一种方法。

样本HTML:

<div class="container">
   <input type="text" value="something"/>
   <input type="text" value="something"/>
   <input type="submit" value="submit" id="submit"/>
</div>
<div id="output"></div>

JS:

var a = [
    "SFDC - TSO Case number:",
    "Dealer Name:", 
    "Dealer code:", 
    "CID:", 
    "Callback#:", 
    "Dealer Authentication:", 
    "Email:", 
    "PTN#:",
    "BAN:",
    "BAN Authentication:", 
    "Type of Request:", 
    "Actions Taken:"
];

var values = [];

$("#submit").on('click', function()
{
    var form = $('.container');
    var inputs = form.find('input').not('.exclude'); // add this class to the inputs you don't want to collect the values of, IE clear and submit
    var l = inputs.length;
    var html = '';

    for(var i = 0; i < l; i++)
    {
       var value = inputs.eq(i).val();
       values.push(value);
    }

    for(var i = 0, ln = a.length; i < ln; i++)
    {
        html += '<p>' + a[i] + ' ' + values[i] + '</p>';
    }

    $('#output').append(html); 
});

注意：我在此示例中使用了 jQuery 并稍微清理/更改了 HTML。

演示：

http://jsfiddle.net/prb75qvt/4/

Answer 4

尝试以下 javascript 函数，该函数使用占位符属性为生成的文本生成值的标题：

/**
* fId: the form id
* dId: the div id which want to add the text to it
**/
    function printToDiv(fId, dId){
          f = document.getElementById(fId);
          i = f.getElementsByTagName('input');
          iTxt = Array();
          k = 0;
          out = '';
          for (j = 0; j < i.length; j++){
            if (i[j].type == 'text'){
              iTxt[k] = i[j];
              k++;
            }
          }
          for (n =0; n < iTxt.length; n++){
            out += "<b>"+iTxt[n].placeholder+":</b> "+iTxt[n].value+"<br />\n";
          }
          div = document.getElementById(dId);
          div.innerHTML = out;
        }

可以找到通用的 DEMO here or here。当然，您可以通过调用相关函数内的任何其他函数来对数据应用任何验证，您可以通过任何您想要的方式调用它，例如，从 onsubmit 事件。

Answer 5

如果我没理解错的话，您想从输入框中获取文本并将其粘贴到其他地方。使用此代码模板：

HTML 代码（onchange是可选的，我只是喜欢用它，因为它会在文本变化时激活一个功能）

<input id="newText" type="text" onchange="myFunction()">
<p>Your text</p><p id="oldText"></p>

JS代码（"oldText"用作占位符）

function myFunction() {
var inputText = document.getElementById("newText").value;
document.getElementById("oldText").innerHTML = inputText
}

输入字段到文本输出

Input fields to text output

html

javascript

jquery

text

input