输入字段到文本输出

时间:2015-05-07 19:22:45

标签: javascript jquery html text input

我想要做的是创建一个webform,它将把放入字段的信息添加到预定义的文本中。我到目前为止的代码如下:

<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身份验证:此处插入输入

请求类型:此处插入输入

采取的措施:此处插入输入

一直未能找到如何做到这一点,所以感谢任何帮助。

5 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

如果您不关心语言,可以使用JavaScript轻松完成。只需将类添加到所有输入中,并在定义的文本旁边添加范围

X(S<0,:)

答案 2 :(得分:0)

如果我正确理解你的问题。你可以这样做。但这不是唯一的方法,它只是一种方式。

示例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/

答案 3 :(得分:0)

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

/**
* 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 herehere。当然,你可以通过调用被认为的函数中的任何其他函数来对数据进行任何验证,你可以通过任何你想要的方式调用它,例如,来自onsubmit事件。

答案 4 :(得分:0)

如果我理解正确,你想从输入框中取出一个文本并将其粘贴到其他地方。使用此代码模板:

HTML代码 (onchange是可选的,我只是想使用它,因为它在文本更改时激活一个函数)

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

JS CODE (“oldText”用作占位符)

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