2010-10-14 50 views
1

我的網站上有兩種不同的表單:一種用於提交一般查詢,另一種用於訂購物品。通過單擊單選按鈕,用戶可以選擇他/她需要的表格。使用jQuery和Cookie的條件表單

我在內容管理系統中創建了表單,該表單在提交表單後會檢查textfield-data是否正確輸入。如果系統檢測到錯誤,則頁面重新加載並且表單再次顯示錯誤消息。

我想存儲用戶在頁面重新加載後自動顯示正確表單的選擇。關於Onextrapixel的教程解釋了類似的內容,我試圖根據自己的需要對其進行修改。以下代碼顯示了我正在使用的腳本。我試圖根據單擊哪個單選按鈕來隱藏()或。顯示()特定內容。隱藏正確的內容如果我禁用cookie的東西沒有任何問題。

$(document).ready(function() { 
    $("#parent2").css("display", "none"); 
    $("#parent3").css("display", "none"); 

    $(".aboveage2").click(function() { 
     if ($('input[name=age2]:checked').val() == "anfrage") { 
      $("#parent3").hide(); 
      $("#parent2").slideDown("fast"); 
      $.cookie('auswahl_radio', 'radio_allgemein'); 
     } else { 
      $("#parent2").hide(); 
      $("#parent3").slideDown("fast"); 
      $.cookie('auswahl_radio', 'radio_rezept'); 
     } 
    }); 

    var auswahl_radio = $.cookie('auswahl_radio'); 

    if (auswahl_radio == 'radio_allgemein') { 
     $("#parent3").hide(); 
     $("#parent2").show(); 
     $('#opt_29_0').attr('checked', 'checked'); 
    } else { 
     $("#parent2").hide(); 
     $("#parent3").show(); 
     $('#opt_29_1').attr('checked', 'checked'); 
    } 
}); 

如果啓用Cookie插件,我無法弄清楚什麼是錯誤,問題就開始了。請耐心等待,我對jQuery相當陌生。

這裏最重要的HTML源代碼:

<form action="kontakt.html" id="f3" method="post"> 
    <div id="ctrl_29" class="radio_container aboveage2"> 
     <input type="radio" name="age2" id="opt_29_0" class="radio" value="anfrage" /> 
     <label id="lbl_29_0" for="opt_29_0">radio1</label> 

     <input type="radio" name="age2" id="opt_29_1" class="radio" value="rezept" /> 
     <label id="lbl_29_1" for="opt_29_1">radio2</label> 
    </div> 
</form> 

<div id="parent2"> 
    <form action="kontakt.html" id="f1" method="post"> 
     <p>Name:</p> 
     <input type="text" name="Name" id="ctrl_1" class="text mandatory" value="" /> 
     <input type="submit" id="ctrl_99" class="submit" value="Absenden" /> 
    </form> 
</div> 

<div id="parent3"> 
    <form action="kontakt.html" id="f5" method="post"> 
     <p>E-Mail:</p> 
     <input type="text" name="Email" id="ctrl_56" class="text mandatory" value="" /><br /> 
     <input type="submit" id="ctrl_63" class="submit" value="Absenden" /> 
    </form> 
</div> 

我富爾德在這裏堆棧溢出一些類似的問題,但我無法弄清楚。

任何想法都會很棒,謝謝!

回答

1

經過一段時間的睡眠後,我發現它已經算了。整個代碼沒有很好的排序。下面是對我的作品的代碼:

$(document).ready(function() { 
    var auswahl_radio = $.cookie('auswahl_radio'); 

    if (auswahl_radio == 'radio_allgemein') { 
     $("#form_allgemein").show(); 
     $('#opt_29_0').attr('checked', 'checked'); 
    } else if (auswahl_radio == 'radio_rezept') { 
     $("#form_rezept").show(); 
     $('#opt_29_1').attr('checked', 'checked'); 
    } else { 
     $("#form_allgemein").css("display","none"); 
     $("#form_rezept").css("display","none"); 
    } 

    $(".kontakt_anliegen").click(function() { 
     if ($('input[name=anliegen]:checked').val() == "anfrage") { 
      $("#form_rezept").hide(); 
      $("#form_allgemein").slideDown("fast"); 
      $.cookie('auswahl_radio', 'radio_allgemein'); 
     } else { 
      $("#form_allgemein").hide(); 
      $("#form_rezept").slideDown("fast"); 
      $.cookie('auswahl_radio', 'radio_rezept'); 
     } 
    }); 
}); 

在我的CSS我設定的<div> s到display:none;