2015-08-15 17 views
1

我有一個網頁以下組複選框運行提交表單失敗時的函數

<form id="tagselect" action=""> 
<input id="tag" type="checkbox" value="*">Show all</input> 
<input id="tag" type="checkbox" value=".Name1">Name1</input> 
<input id="tag" type="checkbox" value=".Name2">Name2</input> 
<input type="button" value="submit"></input> 
</form> 

我想讓它這樣一個函數運行既可以當按下按鈕,提交,或刪除提交按鈕並讓它在任何時候任何複選框被改變時運行。

我已經試過幾乎每一個不同的方式來實現這一目標在這個老問題在這裏建議: run a function after checkbox checked and pushed submit button with jquery 與他們的幾個不同的調整隻是OA隨機預感一起,我不能得到任何情況發生時,一個複選框除了出現複選標記以外的其他選項。我用一個簡單的測試:

alert("This is working"); 

它工作得很好,當它在沒有條件的腳本塊只是運行,但是當我把它在某些腳本中,使其運行時一個複選框被選中或按下按鈕時,無論如何都不會顯示警報。

幾個我試過的東西:

<script> 
$("input[id='tag']:checked").each(
    function() { 
     alert("This is working"); 
    } 
); 
</script> 

嘗試2:

<script> 
$("input#tag :checked").each(
    function() { 
     alert("This is working"); 
    } 
); 
</script> 

嘗試3:

<script> 
$('#tagselect').submit(function(){ 
$('#tag:checked').each(function() 
     { 
     alert("This is working"); 
     }) 
}); 
</script> 

嘗試4:

<script> 
$('input[value=submit]').on('click', myFunction); 

那麼這在任何一個新的腳本塊或同一個腳本塊(試用過):

function myFunction() { 
alert("This is working"); 
} 
</script> 

我也試過同樣myFunction的,但

onclick="myFunction()" 

添加到提交按鈕HTML

除了按鈕點擊或複選框檢查任何這些運行之外,絕對沒有任何可見的事情發生。

我也嘗試將所有腳本放在一起放在頭部,一起放在身體中,分開放在他們將要使用的位置,廣告我有三重檢查拼寫和大寫在實際副本中是一致的。我已經刪除了提交按鈕,並嘗試了一些沒有它。如果是兼容性問題,我嘗試切換瀏覽器。我不知道JS甚至不知道從哪裏開始研究我做錯了什麼。

+1

您是否添加了jQuery? –

+0

我確實添加了jQuery ...並且我不知道如何添加JS小提琴,但它現在正在工作。 – Josh

回答

1

我不知道爲什麼你不能工作。有一件事是,你可能需要對錶單元素進行動作preventDefault。並沒有</input>。正確學習。下面有示例腳本。

所以,你需要的東西要注意:

  1. 阻止默認事件:event.preventDefault();
  2. </input>標籤。
  3. 封裝$(document).ready()事件中的所有內容。
  4. <input />的類型應該是submit而不是button
  5. 您的HTML包含重複的id s。 ID意味着獨特,否則它不起作用。

你試過的那些腳本只加載一次。提醒當按鈕被選中,你需要設置這樣的條件:

$(function() { 
    $("input:checkbox").click(function() { 
    if ($(this).is(":checked")) 
     alert("Yay! Checked"); 
    }); 
}); 

最終轉換爲運行在窗體的功能提交,你需要使用下面的代碼:

$("#tagselect").submit(function (e) { 
    e.preventDefault(); 
    alert("Submitted"); 
}); 

片斷

$(function() { 
 
    $("input:checkbox").click(function() { 
 
    if ($(this).is(":checked")) 
 
     alert("Yay! Checked"); 
 
    }); 
 
    $("#tagselect").submit(function (e) { 
 
    e.preventDefault(); 
 
    alert("Submitted"); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form id="tagselect" action=""> 
 
    <input name="tag" type="checkbox" value="*" /> Show all 
 
    <input name="tag" type="checkbox" value=".Name1" /> Name1 
 
    <input name="tag" type="checkbox" value=".Name2" /> Name2 
 
    <input type="submit" value="submit" /> 
 
</form>

+0

@Gacci謝謝你讓我知道。我已經添加了! ':'' –

+1

這對我來說很有用,謝謝,到目前爲止,所有東西現在都按照我的意圖工作。我實際上已經嘗試沒有,但我從某處複製了該部分,並且該版本中包含這些部分。 – Josh

0

首先,您的複選框沒有聽衆。如果您希望單擊複選框提交表單,則應將聽衆附加到複選框。否則,如果您希望單擊提交時提交表單,則該事件將附加到表單中。你有什麼不顯示你附加任何聽衆複選框 然後,ID應該是一個唯一的標識符,你不能給多個元素相同的ID。

最後,如果你包含jQuery庫,那麼這應該工作。

JQuery("input[type='checkbox']").on('click', function(event){ 
//your code here! 
});