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

call javascript a function in html submit button

提问by ZedsWhatSheSaid

I have a form which I want to hide or show dependent on the users decision. I got following functions in an external javascript file:

我有一个表单，我想根据用户的决定隐藏或显示它。我在外部 javascript 文件中获得了以下功能：

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

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

and this is how I call those functions:

这就是我调用这些函数的方式：

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

Unfortunately this does not work. Do you have any clues why this is the case?

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

回答by Vivek Gupta

replace show_element with show_element() & hide_element with hide_element() like below:

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

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

回答by Piotr Dajlido

Since we are using jQueryI would like to propose this approach:

由于我们正在使用jQuery我想提出这种方法：

HTML:

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:

jQuery：

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

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

Test here: http://jsfiddle.net/urahara/obm39uus/

在这里测试：http: //jsfiddle.net/urahara/obm39uus/

---

---

NOTE: don't put yourself in the position where you have multiple submitbuttons in a <form>, you can distinguish between them by using valueattribute, but still in my opinion it's better to keep clean design with one submit per form.

don't repeat jQueryfetching calls. make a handle of a element: var myForm = $('myForm');then use it like this e.g: myForm.show()

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

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

回答by panther

Now you try to call variables named show_elementand hide_element. These doesn't exist.

现在您尝试调用名为show_elementand 的变量hide_element。这些都不存在。

Function has to be called with brackets. If you have no params, use ().

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

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

回答by ThibaultV

I recommend you to use <button type="button" class="hide">Hide</button>

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

And, in the js file :

并且，在 js 文件中：

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

Same thing for the show button.

显示按钮也是如此。

回答by OddDev

You've to replace "show_element;" with "show_element();".

你必须替换“show_element;” 用“show_element();”。

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

But why? The () Operator Invokes the Function. Using the example above, show_element refers to the function object, and show_element() refers to the function result.

但为什么？() 运算符调用函数。使用上面的示例，show_element 指的是函数对象，而 show_element() 指的是函数结果。

Example:

例子：

Accessing a function without () will return the function definition:

访问没有 () 的函数将返回函数定义：

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

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

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

With "show_element" you are able to store the function itself (in a variable for example), but you don't execute it.

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

回答by Borja

is this pseudo-code?

这是伪代码吗？

If not I would rewrite it like:

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

$form = $('#form_id');

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

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

And then:

进而：

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

I removed the type submit because it is not good to have more than one submit. Actually both are outside the form. In case you want to submit it I would put it like this:

我删除了提交类型，因为提交不止一个是不好的。其实两者都在形式之外。如果你想提交它，我会这样写：

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