将 onclick 事件上的父表单传递给 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13926395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing the parent form on the onclick event to javascript function
提问by user1051505
I am trying to pass variables on the onclickevent to a Javascript function. I am trying the following way, I can't get the input value in the Javascript function. (I am expecting an alert of 1.) Is it the right way of doing this? Please help.
我正在尝试将onclick事件的变量传递给 Javascript 函数。我正在尝试以下方式，我无法在 Javascript 函数中获取输入值。（我期待 1 的警报。）这样做是否正确？请帮忙。
<html>
<head>
<script>
function submit_value(form) {
alert(form.ip.value);
}
</script>
</head>
<table>
<tr>
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value(this)">Button</a>
</td>
</form>
</tr>
</table>
</html>
采纳答案by Faisal Sayed
Your script doesn't know what formis. You need to specify document.forms[0].ip.valueinstead.
你的脚本不知道是什么form。您需要改为指定document.forms[0].ip.value。
If there are more than one form on the document then it will be better if you store the form element in variable first. You can have an id on the form for that...
如果文档中有多个表单，那么最好先将表单元素存储在变量中。你可以在表格上有一个 id...
<form id="formID">
<form id="formID">
and in submit_value function you can have
在 submit_value 函数中，您可以拥有
var myForm = document.getElementById('formID');
alert(myForm.ip.value);
var myForm = document.getElementById('formID');
alert(myForm.ip.value);
Edit:
编辑：
You can use this.formfor onClick of anchor tag.
您可以this.form用于锚标记的 onClick。
回答by AlexLit
JQuery is everywhere. You do not need JQuery. Why do people forget about DOM object model? He made everything almost in right way:
JQuery 无处不在。您不需要 JQuery。为什么人们会忘记 DOM 对象模型？他几乎以正确的方式制作了一切：
<head>
<script>
function submit_value() {
alert(document.forms[0].ip.value);
}
</script>
</head>
<table>
<tr>
<form>
<td>
<input name="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value()">Button</a>
</td>
</form>
</tr>
</table>Or you can add Form ID
或者您可以添加表单 ID
<head>
<script>
function submit_value() {
alert(document.forms.formid.ip.value);
}
</script>
</head>
<table>
<tr>
<form id='formid'>
<td>
<input name="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value()">Button</a>
</td>
</form>
</tr>
</table>回答by Alex Nolasco
We can do it without given the form an Id and without JQuery. See FormDatafor details.
我们可以在不给表单 Id 和 JQuery 的情况下做到这一点。有关详细信息，请参阅FormData。
function test(frm) {
const formData = new FormData(frm);
for (var value of formData.values()) {
console.log(value);
}
}<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="button" value="Submit" onclick="test(this.form)">
</form> 回答by Ming-Tang
Change the function to this:
把函数改成这样：
function submit_value(form) {
alert(document.getElementById('ip').value);
}
When you write submit_value(this), the value of thisis actually the element <a>itself, not the form.
当您编写 时submit_value(this)， 的值this实际上是元素<a>本身，而不是表单。
回答by Pratik Mandrekar
I'll assume you can use jquery. Selectors are a lot simple with that.
我假设你可以使用 jquery。选择器非常简单。
Change the below form html from
将下面的表单 html 从
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value(this)">Button</a>
</td>
</form>
to
到
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="" class="mySubmitButton">Button</a>
</td>
</form>
And then your JS will look like
然后你的JS看起来像
$('.mySubmitButton').click(function() {
var inputBox = $(this).prev();
alert(inputBox.val());
return false; //This prevents the default function submit . Similar to event.preventDefault
});
