[英]call javascript a function in html submit button
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? 您有任何线索为什么会这样吗?
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>
Since we are using jQuery
I 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
submit
buttons in a<form>
, you can distinguish between them by usingvalue
attribute, but still in my opinion it's better to keep clean design with one submit per form. 注意:不要将自己放在<form>
有多个submit
按钮的位置,可以通过使用value
属性来区分它们,但我认为仍然最好保持简洁的设计,每个表单一个提交。don't repeat
jQuery
fetching calls. 不要重复jQuery
提取调用。 make a handle of a element:var myForm = $('myForm');
制作元素的句柄:var myForm = $('myForm');
then use it like this eg:myForm.show()
然后像这样使用它,例如:myForm.show()
Now you try to call variables named show_element
and hide_element
. 现在,您尝试调用名为show_element
和hide_element
变量。 These doesn't exist. 这些不存在。
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>
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. 显示按钮也一样。
You've to replace "show_element;" 您必须替换“ show_element;” with "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”可以存储函数本身(例如,存储在变量中),但是您不执行它。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.