我正在用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?


当前回答

简短的回答

你可以使用下面的代码使用JavaScript获取文本输入字段的值:

更多信息

textObject有一个value属性,你可以设置和获取这个属性。

要设置,您可以指定一个新值: . getelementbyid(“searchTxt”)。Value = "新值"

其他回答

如果你的输入是一个表单,你想在提交后得到值,你可以这样做:

<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,…

我将创建一个变量来存储输入,就像这样:

var input = document.getElementById("input_id").value;

然后我用变量把输入值加到字符串中。

=“你的字符串”+输入;

当你有多个输入字段时,你可以使用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>

function handleValueChange() { var y = document.getElementById('textbox_id').value; var x = document.getElementById('result'); x.innerHTML = y; } function changeTextarea() { var a = document.getElementById('text-area').value; var b = document.getElementById('text-area-result'); b.innerHTML = a; } input { padding: 5px; } p { white-space: pre; } <input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()"> <p id="result"></p> <textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea> <p id="text-area-result"></p>

我们可以使用这种形式。元素来获取表单中的所有元素。如果一个元素有id,它可以用. nameditem ("id")找到。例子:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

来源:w3schools