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

---

注意：不要将自己放在<form>有多个submit按钮的位置，可以通过使用value属性来区分它们，但我认为仍然最好保持简洁的设计，每个表单一个提交。

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

Answer 3

现在，您尝试调用名为show_element和hide_element变量。 这些不存在。

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

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

Answer 4

我建议您使用<button type="button" class="hide">Hide</button>

并且，在js文件中：

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

显示按钮也一样。

Answer 5

您必须替换“ 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”可以存储函数本身（例如，存储在变量中），但是您不执行它。

Answer 6

这是伪代码吗？

如果没有，我会像这样重写它：

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

我删除了类型提交，因为有多个提交是不好的。 实际上两者都在表格之外。 如果您要提交，我会这样说：

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