javascript subscribe form change

Question

我有這個代碼的表單輸出，但我想改變結果，以便它會加載兩個按鈕，將訂閱和取消訂閱，我該怎麼做？ 嘗試

<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val(1) + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Subscribe</span></a></div> 

和

<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val(0) + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Unsubscribe</span></a></div> 

但沒有效果

<div class="box"> 
    <!-- <div class="box-heading"><?php echo $heading_title; ?></div> --> 
    <h3><?php echo $heading_title; ?></h3> 
    <div class="box-content"> 
    <div id="newsletter_message" class="content" style="display:none; background: #FFFFCC; border: 1px solid #FFCC33; padding: 10px; margin-top: 2px; margin-bottom: 15px;"></div> 
    <form action="<?php echo $action; ?>" method="post" id="module_newsletter" name="module_newsletter"> 
     <div style="text-align: left;"> 
     <span class="required">*</span><b><?php echo $entry_email; ?></b><br /> 
     <input style="width:90%;" type="text" name="newsletter_email" required placeholder="<?php echo $entry_email; ?>"/><br /> 
     <?php if ($name == 'optional') { ?> 
     <b><?php echo $entry_name; ?></b><br /> 
     <input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/> 
     <?php } elseif ($name == 'required') { ?> 
     <span class="required">*</span><b><?php echo $entry_name; ?></b><br /> 
     <input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/> 
     <?php } else { ?> 
     <input type="hidden" name="name" value="" /> 
     <?php } ?> 
     <br /> 
     <input name="subscribe" value="1" type="hidden" /> 
     </div> 
     <table style="align:left;"> 
     <tr> 
      <td style="width: 100%;"> 
      <table> 
       <tr> 
       <td><input type="radio" style="vertical-align: middle;" id="subscribe" name="subscribe" value="1" checked="checked"/><label style="font-size:10px; vertical-align: middle;" for="subscribe"><?php echo $text_subscribe; ?></label></td> 
       </tr> 
       <tr> 
       <td><input type="radio" style="vertical-align: middle;" id="unsubscribe" name="subscribe" value="0" /><label style="font-size:10px; vertical-align: middle;" for="unsubscribe"><?php echo $text_unsubscribe; ?></label></td> 
       </tr> 
      </table> 
      </td> 
      <td></td> 
     </tr> 
     </table> 
     <div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val() + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;"><?php echo $button_go; ?></span></a></div> 

    </form> 
    </div> 
</div> 

Answer 1

替換此...

$('input[name=\'subscribe\']:checked').val() 

有了這個...

$('input[name=subscribe]:radio:checked').val() 

您需要:radio選擇器，因爲您也有一個具有相同名稱的隱藏表單輸入。請記住這個事實可能會對非JavaScript用戶的表單產生什麼影響。

Answer 2

按照要求，這是一個更徹底的答案。我無法幫助您修復所有代碼，因爲這超出了Stack Overflow的範圍，但是這裏有一些可以幫助您入門的東西。

基本工作示例：http://jsfiddle.net/jeb2x/

假設你有一個表格...

<form id="SubscribeForm"> 
    <input type="radio" name="subscribe" value="1" checked="checked" /> 
    <input type="radio" name="subscribe" value="0" /> 
    <a href="#" id="alert">Alert selected value</a> 
</form> 

您可以訂閱與ID alert鏈接的點擊事件，並將它提醒選定的單選按鈕值。這個Javascript代碼應該放在一個單獨的文件中，並使用腳本標籤包含在頭部。

<script type="text/javascript" src="/pathtofile/scripts.js"></script> 

...

$(document).ready(function(){ 
    $('#SubscribeForm').on('click', 'a#alert', function(){ 
     var selectedValue = $('input[name=subscribe]:checked').val(); 
     alert(selectedValue); 
    }); 
}); 

有您需要了解，以便了解這裏的代碼的一些原則。

首先，它訂閱文檔的ready事件。這確保代碼只在DOM加載完成時運行，因此，您的表單肯定可以使用。還有訂閱文件準備好了，這是一個匿名函數傳遞給jQuery的的簡寫方式，並且它知道在DOM準備運行

$(function(){ 
    //...code here 
}); 

它，然後訂閱到click活動形式。這段代碼使用了一個叫做事件委託的原則，值得一讀。這個簡單的例子並不是真的需要，但是如果你需要綁定到同一個div中的多個事件，例如它是有利的。該代碼可以在這種情況下，可以簡化爲...

$('a#alert').on('click', function(){ 
    var selectedValue = $('input[name=subscribe]:checked').val(); 
    alert(selectedValue); 
}); 

...甚至剛剛$('a#alert').click(function(){

然後，代碼使用我原來的解決方案（減去:radio選擇，這是不需要的，因爲只是名爲'subscribe'的一組輸入），以提醒選定的值。

對於您的情況，您嘗試調用外部腳本以訂閱或取消訂閱用戶。一種方法是使用AJAX請求。你可以使用任何一種方法來做到這一點。您正在使用上面的load方法，它將向所提供的url發送請求，並將響應插入到所選元素中。

$("#result").load("test.html"); 

在這裏的例子中，從的test.html的響應將被插入到與ID result的元素。如果你想做一些與響應更加複雜，你可以使用jQuery的AJAX方法之一，如$.ajax()或$.get()

希望這有助於:)