在html提交按钮中调用javascript函数

我有一个表单，我想根据用户的决定隐藏或显示它。我在一个外部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>

show
隐藏
...

---

不幸的是，这不起作用。你有什么线索可以解释这种情况吗？

用show\u element（）替换show\u element&用hide\u element（）替换hide\u element，如下所示：

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

show
隐藏

现在您尝试调用名为

show\u element

和

hide\u element

的变量。这些都不存在

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

（）

show
隐藏

我建议您使用

隐藏

在js文件中：

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

显示按钮也是一样。

这是伪代码吗

如果不是，我会像这样重写它：

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

show
隐藏
...

我删除了submit类型，因为有多个submit是不好的。实际上，两者都在形式之外。如果你想提交，我会这样说：

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

show
隐藏
...

您必须将“show_element；”替换为“show_element（）；”

---

使用“show_element”可以存储函数本身（例如在变量中），但不能执行它

由于我们使用的是

jQuery

，我想提出这种方法：

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

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

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

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>

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

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

此处测试：

---

注意：不要把自己放在一个

中有多个

提交

按钮的位置，您可以使用

值

属性来区分它们，但我仍然认为最好保持干净的设计，每个表单提交一次

不要重复

jQuery

获取调用。创建元素的句柄：

var myForm=$（'myForm'）然后像这样使用它，例如：
myForm.show（）

替换此show_元素；使用show_element（）&隐藏_element；使用hide_element（）你在HTML中包含jQuery库了吗？我在这里找到了类似的东西：希望它有帮助吗？这个
$（“表单”）
表示你正在使用
jQuery
我的朋友：），但我看到你的问题已经解决了。@Zedwhatshed说你标记为解决的答案是糟糕的做法。这很糟糕。每个表单执行一次
submit
操作是一种良好的做法。您还不必要地调用
$（“#form_id”）
4次，而不是对对象进行句柄处理。是的，对。一个训练员会让它变得更好。我编辑它。我不明白你为什么这么说提交人。我说每个表单提交一次以上不是一个好主意。
var myForm       = $('#myForm');
var toggleMyForm = $('#toggleMyForm');

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