Javascript来获取表单文本框中的值 [英] Javascript to pick up values in a form text box

查看:281
本文介绍了Javascript来获取表单文本框中的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要:
使用Javascript获取表单域的值(表单中的文本输入),并将它们全部添加到一起,将它们排出到另一个标签或div中,所有这些都是在按下按钮时完成的。

应该很简单吧?

编辑:
我尝试了几件事,但是,我没有考虑过发布它们。认为有人会回应一些小逻辑提示,而不是一些无足轻重的空间浪费。

 < SCRIPT> 
函数add()
{
var a = document.getElementById(fscf_field4_8)。value;
var b = document.getElementById(fscf_field4_10)。value;
var c = document.getElementById(fscf_field4_12)。value;
var d = document.getElementById(fscf_field4_14)。value;
var e = document.getElementById(fscf_field4_16)。value;
document.getElementById(fscf_field4_19)。value = a + b + c + d + e;
}
< / script>

< table>
< tr>
< td>
< div id =FSContact4style =width:375px;>
< form action =/ payment /#FSContact4id =fscf_form4method =post>
< input type =hiddenname =fscf_submittedvalue =0>
< input type =hiddenname =fs_postonce_4value =99193296484a8d52d2b9579199ca2f0c,1384214867>
< input type =hiddenname =si_contact_actionvalue =send>
< input type =hiddenname =form_idvalue =4>

< div id =fscf_required4>
< / div>

< input type =hiddenname =mailto_idvalue =1>

< div id =fscf_div_clear4_4style =clear:both;>
< div id =fscf_div_field4_4style =clear:left; float:left; width:99%; max-width:550px; margin-right:10px;>
< div id =fscf_label4_4style =text-align:left; padding-top:5px;>
< label style =text-align:left; for =fscf_field4_4>公司名称< / div>
< div style =text-align:left;>
< input style =text-align:left; margin:0; type =textid =fscf_field4_4name =company-namevalue =>
< / div>
< / div>
< / div>

< div id =fscf_div_clear4_5style =clear:both;>
< div id =fscf_div_field4_5style =clear:left; float:left; width:99%; max-width:550px; margin-right:10px;>
< div id =fscf_label4_5style =text-align:left; padding-top:5px;>
< label style =text-align:left; < / span>< / label> for =
< / div>
< div style =text-align:left;>
< input style =text-align:left; margin:0; type =textid =fscf_field4_5name =person-doing-the-transactionvalue =>
< / div>
< / div>
< / div>

< div id =fscf_div_clear4_6style =clear:both;>
< div id =fscf_div_field4_6style =clear:left; float:left; width:99%; max-width:550px; margin-right:10px;>
< div id =fscf_label4_6style =text-align:left; padding-top:5px;>
< label style =text-align:left; for =fscf_field4_6>电子邮件< span style =text-align:left;> *< / span>< / label>
< / div>
< div style =text-align:left;>
< input style =text-align:left; margin:0; type =textid =fscf_field4_6name =email01value =>
< / div>
< / div>
< / div>
< / td>
< / tr>
< tr>
< td>
< tr>
< td>发票编号< / td>
< td>金额(美元)< / td>
< / tr>
< tr>
< td>< input type =textid =fscf_field4_7 name =Invoice Number 1>< / td>
< td>< input type = id =fscf_field4_8 name =Amount 1>< / td>
< / tr>
< tr>
< td>< input type =textid =fscf_field4_9 name =Invoice Number 2>< / td>
< td>< input type = id =fscf_field4_10 name =Amount 2>< / td>
< / tr>
< tr>
< td>< input type =textid =fscf_field4_11 name =Invoice Number 3>< / td>
< td>< input type = id =fscf_field4_12 name =Amount 3>< / td>
< / tr>
< tr>
< td>< input type =textid =fscf_field4_13 name =Invoice Number 4>< / td>
< td>< input type = id =fscf_field4_14 name =Amount 4>< / td>
< / tr>
< tr>
< td>< input type =textid =fscf_field4_15 name =Invoice Number 5>< / td>
< td>< input type = id =fscf_field4_16 name =Amount 5>< / td>
< / tr>
< tr>
< td>< input type =buttonvalue =点击计算onclick =add()>< / td>
< td>< input type =textid =fscf_field4_19>< / td>
< / tr>
< / table>
< div id =fscf_submit_div4style =text-align:left; padding-top:2px;>
< input type =submitid =fscf_submit4style =cursor:pointer; margin:0;值= 提交 >
< / div>
< / form>
< / div>
< / tr>
< / td>
< / table>


解决方案

是的。这很容易。很好的观察结果!

编辑:现在你至少已经试图形成一个严肃的问题,下面是你可以做什么的一个基本例子,以帮助你开始。一个完整的解决方案将需要更多的工作,但这对你来说很有趣!



 < form id =myForm>现场演示(单击) > 
< input type =text>
< input type =text>
< input type =text>
< / form>
< button id =process>程序< / button>
< div id =output>< / div>

var button = document.getElementById('process');
var form = document.getElementById('myForm');
var outputDiv = document.getElementById('output');

button.addEventListener('click',function(){
var frag = document.createDocumentFragment();

var children = form.childNodes;
for(var key in children){
var node = children [key];
if(node.nodeName ==='INPUT'){
var p = document.createElement( 'p');
p.textContent = node.value;
frag.appendChild(p);
}
}
outputDiv.textContent ='';
outputDiv.appendChild(frag);
});


I want to: Use Javascript to pick up the values of form fields (text inputs in form), and add them all together, spitting them out into another label or div, all when I press a button.

Should be easy right?

edit: i have tried a couple things, however, I didn't think about posting them. Thought someone would reply with a little logic tips instead of some un-insightful waste of space.

<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>

<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">

<div id="fscf_required4">
  <span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>

<input type="hidden" name="mailto_id" value="1">

<div id="fscf_div_clear4_4" style="clear:both;">
  <div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
    <div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
      <label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
    </div>
    <div style="text-align:left;">
      <input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
    </div>
  </div>
</div>

<div id="fscf_div_clear4_5" style="clear:both;">
  <div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
    <div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
      <label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
    </div>
    <div style="text-align:left;">
      <input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
    </div>
  </div>
</div>

<div id="fscf_div_clear4_6" style="clear:both;">
  <div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
    <div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
      <label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
    </div>
    <div style="text-align:left;">
      <input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
    </div>
  </div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
        <tr>
                <td>Invoice Number</td>
                <td>Amount (USD)</td>
        </tr>
        <tr>
                <td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
                <td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
        </tr>
        <tr>
                <td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
                <td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
        </tr>
        <tr>
                <td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
                <td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
        </tr>
        <tr>
                <td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
                <td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
        </tr>
        <tr>
                <td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
                <td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
        </tr>
        <tr>
                <td><input type="button" value="Click to Calculate" onclick="add()"></td>
                <td><input type="text" id="fscf_field4_19"></td>
        </tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
                <input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>

Yes. It is easy. Good observation!

Edit: Now that you've at least tried to form a serious question, here's a basic example of what you can do to get you started. A complete solution will require more work, but that's for you to have fun with!

Live demo here (click).

  <form id="myForm">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <button id="process">Process</button>
  <div id="output"></div>

var button = document.getElementById('process');
var form = document.getElementById('myForm');
var outputDiv = document.getElementById('output');

button.addEventListener('click', function() {
  var frag = document.createDocumentFragment();

  var children = form.childNodes;
  for (var key in children) {
    var node = children[key];
    if (node.nodeName === 'INPUT') {
      var p = document.createElement('p');
      p.textContent = node.value;
      frag.appendChild(p);
    }
  }
  outputDiv.textContent = '';
  outputDiv.appendChild(frag);
});

这篇关于Javascript来获取表单文本框中的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆