在 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>

不幸的是，这不起作用。你知道为什么会这样吗？

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>

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按钮的位置<form>，你可以通过使用value属性来区分它们，但我仍然认为最好保持简洁的设计，每个表单提交一个。

不要重复jQuery获取调用。制作一个元素的句柄： var myForm = $('myForm');然后像这样使用它，例如：myForm.show()