如何从表单中选择输入并将其存储在变量中

Question

例如，如果我有这样的表单：

<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem"></button>

如何从表单中输出输入？

Answer 1

您可以编写一个函数，在该函数中，您可以使用querySelector()来获取元素以获取输入的值：

function outputItem(){
var v = document.querySelector('#form1 > input[name=item]').value;
console.log(v);
}

<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem()">Print</button>

Answer 2

<form id="form1">
<input type="text" name="item" id="item">
</form>
<button onclick="outputItem()">ShowMe</button>
<span id="response"></span>
<script>
function outputItem() {
var item = document.getElementById('item').value;
document.getElementById('response').innerHTML = item;
}
</script>

试试上面的一个。

Answer 3

您可以这样做：

function selectInputForm(){
const selectForm = document.querySelector('#inputForm');
}

请记住将id添加到要选择的输入表单：

<form id="form1">
<input type="text" name="item" id= 'inputForm' >
</form>
<button onclick="selectInputForm()"></button>

Answer 4

在点击按钮之前，您已经在输入中写入了一些文本。否则，它可能会得到一个错误-未定义。

function outputItem() {
var x = document.getElementsByName("item")[0].value;
document.getElementById("demo").innerHTML = x;
}

<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem()">Try it</button>
<p id="demo"></p>