在按下submit按钮时，使用javascript获取特定表单的输入值
在按下submit按钮时，使用javascript获取特定表单的输入值
提问于 2018-10-25 01:01:16
我有一个包含许多类似表单的页面，当我按下submit按钮时，希望获得输入字段的值。我在JSFiddle上试过了，它似乎起作用了。当我在我的网站上尝试时，它返回“未定义”。
HTML：
<tr>
<form action="editline.php" method="POST" class="editline">
<input type="hidden" name="editID" class="form-control id" value="123456">
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</form>
</tr>
<tr>
<form action="editline.php" method="POST" class="editline">
<input type="hidden" name="editID" class="form-control id" value="987654">
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</form>
</tr>JS：
$('.editline').submit(function(e) {
e.preventDefault();
var id = $(this).find('input.id').val();
var name = $(this).find('textarea.name').val();
var address = $(this).find('input.address').val();
var colour = $(this).find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});表单都在表格中，这是一个问题吗？有没有其他方法可以只获取表单的输入值，并按下submit按钮？
提前谢谢。
编辑://好的，既然这个问题是由表格中的表单引起的，有什么解决办法吗？我想用一张桌子来吃这个。
Edit2://当表单在一个表中(FSFiddle)时，这个JS工作得很好：
$('.editline').submit(function(e) {
e.preventDefault();
var tr = $(this).closest('tr');
var id = tr.find('input.id').val();
var name = tr.find('textarea.name').val();
var address = tr.find('input.id').val();
var colour = tr.find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-25 01:19:46
您只能使用一个表单，然后将操作设置为按钮，并获得与其输入最接近的行。然后，在click函数中，您可以调用表单的ajax post。
$('.editline button').click(function(e) {
e.preventDefault();
var tr = $(this).closest('tr');
var id = tr.find('input.id').val();
var name = tr.find('textarea.name').val();
var address = tr.find('input.address').val();
var colour = tr.find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="editline.php" method="POST" class="editline">
<table>
<tr>
<td data-label="Name"><input type="hidden" name="editID" class="form-control id" value="123456"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</tr>
<tr>
<td data-label="Name">
<input type="hidden" name="editID" class="form-control id" value="987654">
<textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea>
</td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
</tr>
</table>
</form>
Stack Overflow用户
发布于 2018-10-25 01:16:37
只需在表单中包装整个表格即可。这将解决无效HTML的问题。
$('.editline').submit(function(e) {
e.preventDefault();
var id = $(this).find('input.id').val();
var name = $(this).find('textarea.name').val();
var address = $(this).find('input.address').val();
var colour = $(this).find('input.colour').val();
alert(id + ' ' + name + ' ' + address + ' ' + colour);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="editline.php" method="POST" class="editline">
<table>
<tr>
<td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
<td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
<td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
<td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button> </td>
</tr>
</table>
<input type="hidden" name="editID" class="form-control id" value="987654">
</form>
Stack Overflow用户
发布于 2018-10-25 01:14:19
例如：
function geti() {
var i = document.getElementById('i').value;
var iv = document.getElementById('iv');
iv.innerHTML = i;
}<input type="text" id="i">
<button onclick="geti();">Click Me</button>
<p id="iv"></p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52974410
复制相关文章
相似问题