javascript subscribe form change

我有这个代码的表单输出，但我想改变结果，以便它会加载两个按钮，将订阅和取消订阅，我该怎么做？尝试javascript subscribe form change

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

来源

2013-10-23 fob

该代码是非常繁忙的阅读。您应该在jQuery中使用单击事件处理程序，而不是内联onclick属性。你好1998. –

猜你是对的，我应该重构它，但需要改善我的JS。 – fob

替换此...

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

有了这个...

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

您需要:radio选择器，因为您也有一个具有相同名称的隐藏表单输入。请记住这个事实可能会对非JavaScript用户的表单产生什么影响。

来源

2013-10-23 15:53:45

以及它仍然无法正常工作，我猜我需要改善js。你能帮我取得正确的结果吗？ – fob

@fob我用一个更彻底的例子添加了一个新的答案。 –

以及我需要使它没有无线电选择器只有2个按钮 - 订阅和unscribe。它实际上是一个订阅模块的tpl文件。虽然很老，但工作。 – fob

按照要求，这是一个更彻底的答案。我无法帮助您修复所有代码，因为这超出了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()

希望这有助于:)

来源

2013-10-24 09:20:28

javascript subscribe form change

回答

相关问题