0

我有这个用于表单输出的代码，但我想更改结果，以便它加载两个订阅和取消订阅的按钮，我该怎么做？试过了

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

2 回答 2

0

换这个...

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

有了这个...

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

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

于 2013-10-23T15:53:45.897 回答
0

根据要求，这是一个更彻底的答案。我无法帮助您修复所有代码，因为这超出了 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 代码应位于您的 html 的单独文件中，并使用脚本标记包含在头部中。

<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 完成加载时运行，因此，您的表单绝对可以使用。还有一种订阅document ready的简写方式，就是传递一个匿名函数给jQuery，它知道在DOM ready上运行

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

然后它订阅click表单的事件。这段代码使用了一个称为事件委托的原则，值得一读。对于这个简单的示例，它并不是真正需要的，但如果您需要绑定到同一 div 中的多个事件，例如，它是有利的。在这种情况下，代码可以简化为...

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

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

然后代码使用我原来的解决方案（减去:radio选择器，因为只有一组名称为“订阅”的输入，所以不需要它）来提醒选定的值。

在您的情况下，您正在尝试调用外部脚本以订阅或取消订阅用户。一种方法是使用 AJAX 请求。您可以使用多种方法中的任何一种来执行此操作。您正在使用load上面的方法，它将向提供的 url 发送请求，并将响应插入到选定的元素中。

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

在此处的示例中，来自 test.html 的响应将插入到具有 id 的元素中result。如果你想对响应做一些更复杂的事情，你可以使用 jQuery 的 AJAX 方法之一，例如$.ajax()或$.get()

希望这可以帮助 ：）

于 2013-10-24T09:20:28.187 回答