0

jQueryを使用するために、以下のフォームタグを変更しようとしています。すでに、ボタンをクリックすると表示が行から列に、またはその逆に変更されますが、ページの更新を避けたいです。私は jQuery を初めて使用するので、自分で変更しようとしたときに自分の間違いが何であるかを正直に言うことはできません。

<form id="rowsToColumns" action="index.php?main_page=specials&disp_order=1" method="POST">
    <input type="hidden" name="style_changer" value="columns"/>
    <button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>

<form id="columnsToRows" action="index.php?main_page=specials&disp_order=1" method="POST">
    <input type="hidden" name="style_changer" value="rows"/>
    <button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>

また、クリック時にボタンが別のスタイルシートを呼び出すようにしています。このスタイルシートは、上で述べたように、表示を行/列から/へ変更するためには必要ありません。実際のページは、以下に示すように php を使用して記述されます。

<?php $this_page =  zen_href_link($_GET['main_page'], zen_get_all_get_params()); ?>
<div id="style_changer">
    <?php if($current_listing_style == 'rows') {?>
    <form id="rowsToColumns" action="<?php echo $this_page;?>" method="POST">
        <input type="hidden" name="style_changer" value="columns"/>
        <button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
    </form>
    <?php } else { ?>
    <form id="columnsToRows" action="<?php echo $this_page;?>" method="POST">
        <input type="hidden" name="style_changer" value="rows"/>
        <button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
    </form>
    <?php } ?>
</div>
4

3 に答える 3

0

質問が「jQuery を使用してページの更新を回避するためにフォームを変更する方法」である場合は、jquery フォーム プラグインが役立ちます。これは、任意の html フォームを ajax を利用したフォームに変換するためです。

彼らの指示に従うだけで、すぐに機能するようになります (フォームが既にそのまま機能している場合)。

于 2012-10-03T19:57:06.733 に答える
0

送信ボタンのデフォルト アクションを防止することで、デフォルト フォームの送信を防止できます。

 $('button[type=submit]').submit( function(e){

       e.preventDefault(); // Stops the form from submitting 
  });
于 2012-10-03T19:57:24.080 に答える
0

非常にあいまいな方法の場合、の既存の属性を使用$.ajaxして読み取ることを利用して、送信方法を決定し、要素の値を送信データとして読み取ることができます。<form>

$('form').on('submit',function(e){
  var $form = $(this);
  // submit the form, but use the AJAX equiv. instead of a full page refresh
  $.ajax({
    'url'     : $form.attr('action'),
    'method'  : $form.attr('type'),
    'data'    : $form.serialize(),
    'success' : function(response){
      // process response (make CSS changes or whatever it is
      // a form submission would normally do)
    }
  });
  // prevent the normal submit and reload behavior as AJAX is now
  // handling the submission
  e.preventDefault();
});

ただし、これが機能するためには、AJAX 要求のためだけに、単純化された PHP 応答のバリエーションが必要になります (ヘッダー、スクリプト タグなどの再送信を避け、jQuery が使用できる生データを返すだけです)。 UI決定）。

于 2012-10-03T19:58:01.930 に答える