在HTML提交按钮中调用JavaScript函数

Question

我有一个表单，我想根据用户的决定隐藏或显示它。我在外部JavaScript文件中有以下函数：

function hide_element() { 
    $("form").hide(); 
};

function show_element() {
    $("form").show();
};

以下是我如何调用这些函数：

<button type="submit" onclick="show_element;">show</button>
<button type="submit" onclick="hide_element;">hide</button>
<form>
...
</form>

很遗憾，这个方法不起作用。你有任何线索可以解释为什么会出现这种情况吗？

- ZedsWhatSheSaid

---

将此代码中的 "show_element;" 替换为 "show_element();"，并将 "hide_element;" 替换为 "hide_element()"。 - stanze

你在HTML中是否已经引入了jQuery库？ - Piotr Dajlido

我在这里找到了类似的东西：https://dev59.com/12gu5IYBdhLWcg3wln4O希望能有所帮助？ - TOmmy.Jidex

这个 $("form") 表示你正在使用 jQuery 哦，我的朋友 :) 但是我看你的问题已经解决了。 - Piotr Dajlido

@ZedWhatSheSaid 你标记为解决方案的答案很糟糕，是不好的实践。 - Piotr Dajlido

@ZedWhatSheSaid 你应该认真考虑一下...我在下面写了一个不错的答案，强调了一些不良实践。 - Piotr Dajlido

Answer 1

将show_element替换为show_element()，将hide_element替换为hide_element()，如下所示：

  <button type="submit" onclick="show_element();">show</button>
  <button type="submit" onclick="hide_element();">hide</button>

- Vivek Gupta

Answer 2

由于我们正在使用jQuery，我想提出以下方法：

HTML：

<button id='toggleMyForm'>hide</button>
<form id='myForm'>First name:
    <br>
    <input type=" text " name="firstname " />
    <br>Last name:
    <br>
    <input type="text " name="lastname " />
    <br>
    <input type="submit" value="Submit"/>
</form>

jQuery:

var myForm       = $('#myForm');
var toggleMyForm = $('#toggleMyForm');

toggleMyForm.on('click', function(){
    myForm.toggle();
    myForm.is(":visible") ? $(this).html('hide') : $(this).html('show');
});

点击这里进行测试: http://jsfiddle.net/urahara/obm39uus/

---

注意: 不要在表单中放置多个 submit 按钮，可以使用 value 属性来区分它们，但在我看来，最好每个表单只有一个提交按钮以保持界面整洁。

不要重复调用 jQuery 获取元素。可以使用变量来存储元素的引用，例如：var myForm = $('myForm'); 然后像这样使用： myForm.show()

- Piotr Dajlido

Answer 3

现在你试图调用名为show_element和hide_element的变量。但这些变量并不存在。

函数必须使用括号进行调用。如果没有参数，请使用()。

<button type="submit" onclick="show_element();">show</button>
<button type="submit" onclick="hide_element();">hide</button>

- pavel

Answer 4

我建议您使用<button type="button" class="hide">隐藏</button>。

而在js文件中：

$('button.hide').click(function() {
    $('form').hide();
}

显示按钮也是同样的事情。

- ThibaultV

Answer 5

这是伪代码吗？

如果不是，我会重写它，如下：

$form = $('#form_id');

function hide_element() {
    $form.hide();
    $form.submit();
}

function show_element() {
    $form.show();
    $form.submit();
}

然后：

<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>

我移除了type为submit的元素，因为拥有多个submit并不好。实际上两者都在表单之外。如果您想要提交它，我会这样放置：

<button onclick="show_element();">show</button>
<button onclick="hide_element();">hide</button>
<form>
...
</form>

- Borja

---

这很糟糕。每个表单只有一个“submit”操作是一种好的实践。您还不必要地4次调用$('#form_id')而不是创建对象的句柄。 - Piotr Dajlido

是的，没错。使用一个处理程序会更好。我已经编辑了它。我不明白你为什么要这样说提交按钮。我说过在一个表单中有多个提交按钮不是一个好主意。 - Borja

Answer 6

你需要将 "show_element;" 替换为 "show_element();"

 <button type="submit" onclick="show_element();">show</button>
 <button type="submit" onclick="hide_element();">hide</button>

为什么？ ()操作符调用函数。 以上例为例，show_element是指函数对象，而show_element()指的是函数结果。

示例：

不使用()访问函数将返回函数定义：

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

http://www.w3schools.com/js/js_functions.asp

使用“show_element”可以将函数本身存储在变量中，但不会执行它。

- OddDev