0

フォーム出力用のこのコードがありますが、結果を変更して、サブスクライブとサブスクライブ解除の 2 つのボタンをロードするようにしたいのですが、どうすればよいですか? 試した

<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

リクエストに応じて、ここにより完全な回答があります。スタック オーバーフローの範囲外であるため、すべてのコードを修正することはできませんが、ここに何かを始めるのに役立つものがあります。

基本的な作業例: 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 タグを使用して head に含める必要があります。

<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'subscribe' という名前の入力グループが 1 つしかないため不要なセレクターを除いて)、選択した値を警告します。

あなたの場合、ユーザーを購読または購読解除するために外部スクリプトを呼び出そうとしています。これを行う 1 つの方法は、AJAX 要求を使用することです。これを行うには、いくつかの方法のいずれかを使用できます。上記のメソッドを使用しています。このloadメソッドは、指定された URL にリクエストを送信し、選択した要素にレスポンスを挿入します。

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

この例では、test.html からの応答が id の要素に挿入されresultます。応答でもっと複雑なことをしたい場合は、jQuery の AJAX メソッドの 1 つを使用できます$.ajax()。$.get()

お役に立てれば ：）

于 2013-10-24T09:20:28.187 に答える