找出被點擊的項目屬於哪個表單

我在我的html中有一系列表單，意圖是當用戶點擊「繼續」按鈕時，當前人消失，下一個人出現。然而，我想知道是否有辦法獲得哪個「繼續」按鈕被按下（即，哪種形式），以便只有一段代碼基本上檢查並隱藏當前表單並顯示下一個表單而不需要身份證等。找出被點擊的項目屬於哪個表單

我試了幾件事情，但沒有工作，所以我不會在這裏張貼的代碼（它只是老老實實地「爆發」的網站反正。

來源

2010-08-09 Tsundoku

您的表單結構如何？你在一個頁面中有多個表單嗎？ – quantumSoup 2010-08-09 00:49:32

你使用任何類型的JavaScript庫？ – 2010-08-09 00:50:04

@quantumSoup：我在一個頁面中有多個表單 @Ben：我正在用原始javascript =）這樣做，但我不再使用任何框架 – Tsundoku 2010-08-09 03:14:45

這是一個相當微風如果你使用jQuery：

$(function() { 
    // Attach click handler to your buttons 
    $("button, input[type=submit]").click(function(e) { 
     e.preventDefault(); 
     // Hide the correct form 
     var thisForm = $(this).parents("form").hide(); 
     // Show the form after this one 
     thisForm.nextAll("form:first").show(); 
    }); 
});

這會處理隱藏和顯示形式爲你。它假設您的按鈕是<button>或<input type="submit">，並且您的表單元素在同一父級中。當然，如果頁面上的其他按鈕沒有這種行爲，那麼您需要添加一個類，如formContinue到您感興趣的按鈕，並將上面代碼中的第三行更改爲：

$("button.formContinue, input[type=submit].formContinue").click(function(e) {

來源

2010-08-09 02:48:33

快速問題，如果「form：first」讓我接下來兄弟姐妹，我怎麼能得到前一個？ – Tsundoku 2010-08-09 04:12:46

對不起，我的錯誤，兄弟姐妹（「form：first」）會爲您帶來系列中的第一個表格。要獲取上一個或下一個表單，請使用thisForm.prev（）和thisForm.next（）。如果表單之間有其他元素，則使用thisForm.prevAll（「form：first」）和thisForm.nextAll（「form：first」）。我已經更新了我的回答來證明這一點。 – 2010-08-09 04:30:53

最簡單的可能是給每個這樣的「繼續按鈕」一不同的id，這使得它很容易識別（例如，你可能有id是形式的id連接字符串'_cnt'或類似的）但如果你使用jQuery，.parent()方法可以輕鬆地找到一個對象的「父母「，所以在這種情況下，我建議只是讓繼續按鈕的各自的形式的兒童直接（如果你不使用一些去od JS框架，就像流行的jQuery一樣，可以跨瀏覽器不兼容性& c，考慮這樣做...他們真的有用！ - ）。

來源

2010-08-09 00:54:18

對於每個輸入元素，您可以通過element.form獲取父窗體。從每個元素內部可以找到element.nextSibling的下一個兄弟。

這裏的數學：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3436720</title> 
     <script> 
      function showNext(form) { 
       var next = nextSibling(form, 'FORM'); 
       form.style.display = 'none'; 
       if (next) next.style.display = 'block'; 
      } 
      function nextSibling(element, tagname) { 
       var next = element.nextSibling; 
       while (next && next.tagName != tagname) next = next.nextSibling; 
       return next; 
      } 
     </script> 
     <style> 
      .hide { display: none; } 
     </style> 
    </head> 
    <body> 
     <form>Form 1<button onclick="showNext(this.form)">next</button></form> 
     <form class="hide">Form 2<button onclick="showNext(this.form)">next</button></form> 
     <form class="hide">Form 3<button onclick="showNext(this.form)">next</button></form> 
     <form class="hide">Form 4<input type="submit"></form> 
    </body> 
</html>

你可能剛開始使用的JavaScript。但我建議最終使用一個JavaScript庫，它可以簡化DOM操作，如jQuery。下面是它如何能看起來像它的幫助：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3436720 with jQuery</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('button.next').click(function() { 
        $(this).closest('form').hide().next('form').show(); 
       }); 
      }); 
     </script> 
     <style> 
      .hide { display: none; } 
     </style> 
    </head> 
    <body> 
     <form>Form 1<button class="next">next</button></form> 
     <form class="hide">Form 2<button class="next">next</button></form> 
     <form class="hide">Form 3<button class="next">next</button></form> 
     <form class="hide">Form 4<input type="submit"></form> 
    </body> 
</html>

來源

2010-08-09 01:12:58 BalusC

找出被點擊的項目屬於哪個表單

回答

相關問題