如何在JavaScript中获取文本框值

97

我正在尝试使用JavaScript从HTML文本框中获取值，但是空格后面没有值

例如：

<input type="text" name="txtJob" value="software engineer">

我只从上面得到：“软件”。我正在使用这样的脚本：

var jobValue = document.getElementById('txtJob').value

我如何获得全部价值：“软件工程师”？

javascript html

— 纳尼亚·祖拜尔
source

63

+1 Gumbo：“ id”是访问页面元素的最简单方法。如果找不到具有给定ID的任何内容，IE（8版之前的版本）将返回带有匹配“名称”的内容，但这是一个错误。

我只得到“软件”。

id-vs-name不会影响这一点；我怀疑发生了什么事（与示例代码相反），您忘记了引用“值”属性：

<input type="text" name="txtJob" value=software engineer>

— 博宾斯
source

77

您的元素没有ID，只有名称。因此，您可以使用getElementsByName()method来获取具有该名称的所有元素的列表：

var jobValue = document.getElementsByName('txtJob')[0].value  // first element in DOM  (index 0) with name="txtJob"

或者，您为元素分配一个ID：

<input type="text" name="txtJob" id="txtJob" value="software engineer">

— 秋葵
source

11

var word = document.getElementById("word").value;//by id
or
var word = document.forms[0].elements[0].value;//by index
//word = a word from form input
var kodlandi = escape(word);//apply url encoding

alert(escape(word));
or
alert(kodlandi);

您没有使用编码来输入表单值的问题，因此浏览器无法将其添加到...

ontop在进行Unicode编码/解码操作时会遇到一些问题，因此请使用此函数对字符串/数组进行编码

function urlencode( str ) 
{
// http://kevin.vanzonneveld.net3.    
// +   original by: Philip Peterson4.    
// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)5.    
// *     example 1: urlencode('Kevin van Zonneveld!');
// *     returns 1: 'Kevin+van+Zonneveld%21'7. 
   var ret = str; 
   ret = ret.toString();
   ret = encodeURIComponent(ret);
   ret = ret.replace(/%20/g, '+');
   return ret;
}


ex.
var word = "some word";
word = urlencode(word);

— it
source

7

<!DOCTYPE html>
<html>
<body>
<label>Enter your Name here: </label><br>
<input type= text id="namehere" onchange="displayname()"><br>


<script>
function displayname() {
    document.getElementById("demo").innerHTML = 
document.getElementById("namehere").value;
}

</script>


<p id="demo"></p>

</body>
</html>

— 扎卡拉
source

4

将的id属性设置input为txtJob。呼叫时，浏览器的行为古怪getElementById。

— 丹尼尔·怀特
source

4

如果您使用的是ASP.NET，则即使您使用的是母版页，下面这些示例中的服务器端代码标签也将提供确切的控件ID。

Javascript：

document.getElementById("<%=MyControlName.ClientID%>").value;

jQuery的：

$("#<%= MyControlName.ClientID %>").val();

— 假
source

3

如果是形式，则为：

<form name="jojo">
<input name="jobtitle">
</form>

然后，您会在javascript中说：

var val= document.jojo.jobtitle.value

document.formname.elementname

— 吉姆
source

3

在需要文本框值时提供。简单的一个：

<input type="text" value="software engineer" id="textbox">

var result = document.getElementById("textbox").value;

— 薇姬·乔杜里（Vicky Chaudhary）
source

0

如果您正在使用任何用户控件并希望获取任何文本框值，则可以使用以下代码：

var result = document.getElementById('LE_OtherCostsDetails_txtHomeOwnerInsurance').value;

在这里，LE_OtherCostsDetails是用户控件的名称txtHomeOwnerInsurance，也是文本框的ID。

— Ranjan Srivastava
source

0

问题是您犯了一个小错误！

这是我使用的JS代码：

var jobName = document.getElementById("txtJob").value;

您不应使用name =“”。而是使用id =“”。

— 1010
source

0

您需要按以下方式更改代码：

<html>
<body>
<div>
<form align="center" method=post>
    <input id="mainText" type="text" align="center"placeholder="Search">

    <input type="submit" onclick="myFunction()" style="position: absolute; left: 450px"/>
</form>
</div>
<script>
function myFunction(){
    $a= document.getElementById("mainText").value;
    alert($a);
        }
</script>
</body>
</html>

— 维沙尔·塔库（Vishal Thakur）
source

0

因为您使用软件工程师html / php之间的空格将不支持文本框下的值之间的空格，所以您必须使用此代码 <input type="text" name="txtJob" value=software_engineer> ，它将起作用

— 维卡斯·沙玛（Vikas Sharma）
source

0

 var jobValue=document.FormName.txtJob.value;

尝试上面的代码。

jobValue：变量名。
FormName：以html表示的表单名称。
txtJob：文本框名称

— 27像素
source

0

使用jquery应该很简单：

HTML：

  <input type="text" name="txtJob" value="software engineer">

JS：

  var jobValue = $('#txtJob').val(); //Get the text field value
  $('#txtJob').val(jobValue);        //Set the text field value

— 詹姆斯·C
source

0

设置文本框的ID。即

<input type="text" name="txtJob" value="software engineer" id="txtJob">

在JavaScript中

var jobValue = document.getElementById('txtJob').value

在jQuery中

 var jobValue =  $("#txtJob").val();