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（）＆amp; 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()

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();
}

show button也一样。

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>

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

6 个答案: