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