当前位置: 首页 > 面试题库 >

JS / AJAX:使用计时器提交表单,而不是单击按钮或刷新页面

廖弘量
2023-03-14
问题内容

我正在尝试提交没有页面刷新或提交按钮的表单。但是我只实现了让JS函数提交输入框值。是否可以在不单击按钮和刷新页面的情况下提交整个表单?

JSFIDDLE

JS

            <script type="text/javascript">
                $(document).ready(function() {
                    var timer;
                        $('#yurl).on('keyup', function() {
                            var value = this.value;

                            clearTimeout(timer);

                            timer = setTimeout(function() {

                                //do your submit here

                                alert('submitted:' + value);
                            }, 2000);
                        });
                });
            </script>

html

                <form method="post" id="ytVideo" action="">
                <input id="yurl" type="text" value="<?php $url ?>" name="yurl">     
                </form>

问题答案:

您的小提琴似乎正在工作,但是问题是您没有真正将其提交到任何地方。

<script type="text/javascript">
 $(document).ready(function() {
                        var timer;
                            $('#yurl).on('keyup', function() {
                                var value = this.value;

                                clearTimeout(timer);

                                timer = setTimeout(function() {

                                    //do your submit here
                                    $("#ytVideo").submit()
                                    alert('submitted:' + value);
                                }, 2000);
                            });


     //then include your submit definition. What you want to do once submit is executed
      $('#ytVideo').submit(function(e){
           e.preventDefault(); //prevent page refresh
           var form = $('#ytVideo').serialize();
           //submit.php is the page where you submit your form
           $.post('submit.php', form, function(data){ 
              //do something with the data

           });
      });

});
</script>


 类似资料:
  • 问题内容: 我的表单类似于以下内容: 我是AJAX的新手,我要完成的工作是当用户单击“提交”按钮时,我希望脚本在后台运行而不刷新页面。 我尝试了类似下面的代码的方法,但是,它似乎仍然像以前一样提交表单,而不像我所需要的那样(在幕后): 如果可能的话,我想获得使用AJAX实施此功能的帮助, 提前谢谢了 问题答案: 您需要阻止默认操作(实际提交)。

  • 问题内容: 我想提交表单而不刷新页面,从我阅读的内容来看,它应该可以与Ajax一起使用,我在做什么错? 当我这样做时,一切都与php和其他东西一起工作: 但是我希望它提交而不刷新页面。 HTML的一部分: JavaScript的一部分: 提前致谢。 编辑:可能已修复它在提交但没有发送提交 问题答案: 解决了它只是替换了: 用这个代替

  • 问题内容: 有人可以告诉我使用 jquery来显示成功提交表单 而不刷新页面 的教程。传递邮件时,在gmail上会发生类似的事情,黄色的叠加层显示邮件已传递,然后淡出。 我希望根据表单提交的结果显示消息。 问题答案: 好的…类似这样的东西…但是我没有尝试过…所以像教程一样使用它。您也可以使用json js: HTML: form_process.php

  • 问题内容: 我是django的新手。我需要简单的例子。如何使用Django,Ajax,jQuery提交表单(发布)而不刷新页面? 这是我的表单,视图和模板: views.py forms.py(使用“ ModelForm”的表单) 模板(表单html代码) 问题答案: 如果您打算将ajax提交与jquery一起使用,则不应从视图中返回html。我建议您改为这样做: 的HTML: js views.

  • 问题内容: 在表单中使用按钮时出现问题。我希望该按钮调用功能。它确实可以,但是刷新页面的结果令人讨厌。 我的简单代码是这样的 单击该按钮后,该函数将在页面刷新时被调用,这会重置所有我先前的请求,这会影响到当前页面,这是先前请求的结果。 我应该怎么做才能防止页面刷新? 问题答案: 让我们返回false。这将解决它。

  • 问题内容: 我在Angular中有一个表单,其中有两个按钮标签。一键提交表单。另一个按钮仅用于使用进行导航。但是,当单击第二个按钮时,AngularJS导致页面刷新,从而触发404。我在函数中删除了一个断点,并触发了我的函数。如果我执行以下任何操作,它将停止: 如果删除,该按钮不会导致页面刷新。 如果我注释掉函数中的代码,则不会刷新页面。 如果我使用将按钮标签更改为锚标签(),则不会刷新。 后者似