我正在用JavaScript进行搜索。我会使用一个表单，但它在我的页面上搞砸了其他东西。我有这个输入文本字段:
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
这是我的JavaScript代码:
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
我如何从文本字段的值变成JavaScript?
当前回答
你也可以，通过标签名称调用，像这样: 所以你会得到特定形式的特定输入值。
其他回答
有多种方法可以直接获取输入文本框的值(不需要将输入元素包装在表单元素中):
方法1
. getelementbyid(“textbox_id”)。值来获取的值 需要盒子
例如
document.getElementById（“searchTxt”）.value;
注意:方法2、3、4和6返回元素的集合，因此使用[whole_number]来获得所需的出现。对于第一个元素，使用[0]， 对于第二个，使用[1]，以此类推……
方法2
使用 document.getElementsByClassName (class_name) [whole_number]。返回一个Live HTMLCollection的值
例如
document.getElementsByClassName(“searchField”)[0]。value;如果这是页面中的第一个文本框。
方法3
使用document.getElementsByTagName (tag_name) [whole_number]。值，它也返回一个实时的HTMLCollection
例如
document.getElementsByTagName("input")[0].value;，如果这是页面中的第一个文本框。
方法4
document.getElementsByName(“名字”)[whole_number]。>返回一个活的节点列表
例如
document.getElementsByName(“searchTxt”)[0]。value;如果这是您页面中第一个名称为“searchtext”的文本框。
方法5
使用功能强大的document.querySelector('selector')。值，它使用CSS选择器选择元素
例如
document.querySelector value(“# searchTxt”);按id选择 document.querySelector value(“.searchField”);按班级选择 document.querySelector value(“输入”);由tagname选择 document.querySelector ([name = " searchTxt "]) value;按名称选择
方法6
document.querySelectorAll(“选择器”)[whole_number]。值，它也使用CSS选择器来选择元素，但它以静态节点列表的形式返回该选择器的所有元素。
例如
document.querySelectorAll (# searchTxt) [0] value;按id选择 document.querySelectorAll(“.searchField”)[0]。value;按班级选择 document.querySelectorAll(“输入”)[0]。value;由tagname选择 document.querySelectorAll(“[name = " searchTxt]”)[0]value;按名称选择
支持
| Browser | Method1 | Method2 | Method3 | Method4 | Method5/6 |
|---|---|---|---|---|---|
| IE6 | Y(Buggy) | N | Y | Y(Buggy) | N |
| IE7 | Y(Buggy) | N | Y | Y(Buggy) | N |
| IE8 | Y | N | Y | Y(Buggy) | Y |
| IE9 | Y | Y | Y | Y(Buggy) | Y |
| IE10 | Y | Y | Y | Y | Y |
| FF3.0 | Y | Y | Y | Y | N IE=Internet Explorer |
| FF3.5/FF3.6 | Y | Y | Y | Y | Y FF=Mozilla Firefox |
| FF4b1 | Y | Y | Y | Y | Y GC=Google Chrome |
| GC4/GC5 | Y | Y | Y | Y | Y Y=YES,N=NO |
| Safari4/Safari5 | Y | Y | Y | Y | Y |
| Opera10.10/ | |||||
| Opera10.53/ | Y | Y | Y | Y(Buggy) | Y |
| Opera10.60 | |||||
| Opera 12 | Y | Y | Y | Y | Y |
有用的链接
要查看这些方法对所有错误的支持，包括更多详细信息，请单击这里 静态集合和动态集合的区别点击这里 NodeList和HTMLCollection的区别点击这里
我们可以使用这种形式。元素来获取表单中的所有元素。如果一个元素有id，它可以用. nameditem ("id")找到。例子:
var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;
来源:w3schools
如果你的输入是一个表单，你想在提交后得到值，你可以这样做:
<form onsubmit="submitLoginForm(event)">
<input type="text" name="name">
<input type="password" name="password">
<input type="submit" value="Login">
</form>
<script type="text/javascript">
function submitLoginForm(event){
event.preventDefault();
console.log(event.target['name'].value);
console.log(event.target['password'].value);
}
</script>
这样做的好处:例如你的页面有2个表单用于输入发送方和接收方信息。
如果你不使用形式来获取价值
你可以为每个字段设置两个不同的id(或标签或名称…)，比如sender-name和receiver-name, sender-address和receiver-address，… 如果为两个输入设置相同的值，那么在getElementsByName(或getElementsByTagName…)之后，您需要记住0或1是发送方或接收方。稍后，如果您更改HTML中2表单的顺序，则需要再次检查此代码
如果你用form，那么你可以用name, address，…
<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
短
你可以通过searchTxt.value读取值
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> < script type = " text / javascript " > 函数searchURL () { console.log (searchTxt.value); / /窗口。location = "http://www.myurl.com/search/" + searchTxt.value; ｝ > < /脚本 <！——短小丑陋的测试代码——> <button class="search" onclick="searchURL()“>搜索> < /按钮
