duanre4421
2012-08-16 18:55
浏览 64

如何在表单提交上停止页面刷新

I have a form which automatically refreshes the page on submit, I have tried adding:

onSubmit="return false;" to the form element, but then the form just stops and nothing happens when you click submit.

I wouldnt mind the page refresh so much but the form is at the bottom of the page and the refresh kicks you back to the top. So I tried this approach:

<form name='test' method='POST' action="index.php" onSubmit="window.scrollTo(5000,500);">

This works for a split second but then something else overrides it (not sure what)

I have also tried using php: header.location just to get a "headers have already been sent" error.

The site in question can be seen here, and the form is at the very bottom.

The only two jquery libraries I am using that I could foresee any conflicts with are nicescroll and (more likely) waypoints, but i dug through them both and couldn't find any conflicting issues.

If anyone knows of a way to keep the functionality of the form but stop the refresh of the page, that would be wonderful Thanks

EDIT: After reading the answers below, it looks like I will have to use ajax to acomplish this, I have absolutely no experience with ajax, so I will see how that goes.

图片转代码服务由CSDN问答提供 功能建议

我有一个表单会在提交时自动刷新页面,我尝试添加: \ n

onSubmit =“return false;”到表单元素,但是当你单击“提交”时表单就会停止并且没有任何反应。

我不会 请注意页面刷新,但表单位于页面底部,刷新会让您回到顶部。 所以我尝试了这种方法:

&lt; form name ='test'methation ='POST'action =“index.php”onSubmit =“window.scrollTo(5000,500 );“&gt;

这适用于瞬间但是其他东西会覆盖它(不确定是什么)

我有 也尝试使用php: header.location 只是为了得到“标题已经发送”错误。

可以看到有问题的网站此处,表格位于最底层。

唯一 我正在使用的两个jquery库我可以预见任何冲突都是nicescroll和(更可能的)航路点,但我挖掘它们两者并且找不到任何冲突的问题。

如果有人 知道一种保持表单功能但停止刷新页面的方法,这将是美妙的 谢谢

编辑:阅读下面的答案后,看起来我会有 使用ajax来实现这个,我有abs 我没有ajax的经验,所以我会看到这是怎么回事。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dqp10099 2012-08-16 18:57
    已采纳

    It seems you need to go through of way of AJAX submission in that case. In that case, you can use jQuery $.ajax() method to do that. A sample below:

    HTML

    <form name='test' method='POST' action="index.php">
    

    jQuery

    $('form[name=test]').submit(function(e) {
       e.preventDefault();
       window.scrollTo(5000,500);
    
       // a sample AJAX request
       $.ajax({
         url : this.action,
         type : this.method,
         data : $(this).serialize(),
         success : function(response) {
    
         }
       });
    });
    

    Here, .preventDefault() is for stop page refresh on form submit.

    已采纳该答案
    打赏 评论
  • douyue8685 2012-08-16 18:58

    What about using AJAX instead of a normal form submit?

    打赏 评论
  • douyi5157 2012-08-16 18:59

    Why not submit the form to a hidden IFRAME?

    <iframe name="myiframe" style="display: none;"></iframe>
    <form name='test' method='POST' action="index.php" target="myiframe">
      ...
    </form>
    
    打赏 评论

相关推荐 更多相似问题