将表单对象从超链接传递到javascript时遇到麻烦

<a href="javascript:SelectAll(this.form)">All </a>
<input type ="button" value ="test" onClick="SelectAll(this.form);" />


    <script ......>
    function SelectAll(form)
    {
        alert(form); 
    }
    </script>

method 1 produce an alert message 'undefined' while 2 method works fine by displaying form object . I'm very much aware that anchor elements don't have a form property, that references the form , unlike input elements,but is there any alternative way to pass form object using hyperlink or is there any way to style the button to look like an hyperlink

方法1生成警报消息'undefined',而2方法通过显示表单对象正常工作。我非常清楚锚元素没有引用表单的表单属性,与输入元素不同,但是有没有其他方法可以使用超链接传递表单对象,或者有任何方法可以将按钮设置为样式超链接

Thanks

3 个解决方案

#1

Try this...

onClick="SelectAll(getParentForm(this));"

function getParentForm(el) {
  while(el = el.parentNode) {
    if(el.tagName.toLowerCase() === "form")
      return el;
  }

  return null;
}

#2

Since the anchor is not a form control, it doesn't have a form property. You would need to find some other way to reference the form (or stick to a button, which is the right choice of control for something like this).

由于锚不是表单控件,因此它没有表单属性。你需要找到一些其他的方式来引用表单(或坚持一个按钮,这是这样的控件的正确选择)。

#3

Honestly? I think your best approach is to not use an anchor element at all. It's not really a link, so that's actually a misuse of HTML.

说实话?我认为你最好的方法是根本不使用锚元素。它实际上不是一个链接,所以实际上是滥用HTML。

Use a button element instead, which does have a form property. If you really want it to look like a link, slap on a little CSS to make it look like one.

请使用按钮元素,它具有表单属性。如果你真的希望它看起来像一个链接,打一个小CSS,使它看起来像一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
button.link {
  border: none;
  background-color: transparent;
  color: blue;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
</style>
<script type="text/javascript">

function SelectAll( f )
{
  alert( f );
}

</script>

</head>
<body>
  <form id="test">
    <button class="link" onclick="SelectAll(this.form)">All</button>
  </form>
</body>

But there are probably a dozen other ways to get a reference to the form element itself. If your form definition looked like this

但是可能还有十几种方法来获取对表单元素本身的引用。如果您的表单定义如下所示

<form id="test" name="tester">

and it's the only form on the page, here are some ways to obtain a reference to it

它是页面上唯一的表单,这里有一些获取引用的方法

document.forms.tester
document.forms['tester']
document.forms[0]
document.getElementById( 'test' )

#1