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();
});

但是，要使其正常工作，您将需要一些精简的 PHP 响应变体，仅用于 AJAX 请求（避免重新发送标头、脚本标签等，只返回 jQuery 可以用来制作的原始数据）用户界面决定）。

于 2012-10-03T19:58:01.930 回答