我正在用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?
在Chrome和Firefox中测试:
通过元素id获取值:
<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">
在form元素中设置值:
<form name="calc" id="calculator">
<input type="text" name="input">
<input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>
https://jsfiddle.net/tuq79821/
还有一个JavaScript计算器实现。
来自@bugwheels94:在使用此方法时,请注意此问题。
当你有多个输入字段时,你可以使用onkeyup。假设你有四个输入。然后
. getelementbyid(“什么”)。价值是恼人的。我们需要写四行来获取输入字段的值。
因此,你可以创建一个函数,在keyup或keydown事件时将值存储在object中。
例子:
<div class="container">
<div>
<label for="">Name</label>
<input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Age</label>
<input type="number" name="age" id="age" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Email</label>
<input type="text" name="email" id="email" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Mobile</label>
<input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
</div>
<div>
<button onclick=submitData()>Submit</button>
</div>
</div>
JavaScript:
<script>
const data = { };
function handleInput(e){
data[e.name] = e.value;
}
function submitData(){
console.log(data.fname); // Get the first name from the object
console.log(data); // return object
}
</script>