JS/Ajax:抓取输入字段值，无需刷新或点击按钮

JS/Ajax: grab input field value without refresh or button click

本文关键字：刷新 按钮 Ajax 抓取 字段 输入 JS      更新时间：2023-09-26

我目前使用js函数提交数据，无需刷新页面或点击按钮。输入字段位于选项卡#2内，一旦用户停止键入，该选项卡就会执行js。问题是js正在刷新页面，从而将我带回标签#1。如何防止页面刷新？我以为我已经在JS函数中包含了必要的代码来阻止这种情况。示例

<script>
$(document).ready(function() {
    var timer;
        $('#video-input1').on('keyup', function() {
            var value = this.value;
            clearTimeout(timer);
            timer = setTimeout(function() {
                //do your submit here
                $("#ytVideo").submit()

                //alert('submitted:' + value);
            }, 2000);
        });
    //submit definition 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('index.php#tab-2', form, function(data){ 
            var x = $(data);
            $("body").html(x);
        });
        return false;
    });
    return false;                                                         
});
</script>

尝试更改此行

//do your submit here
$("#ytVideo").submit()

至

$("#ytVideo").trigger("submit");

我认为问题在于你定义了表单提交后提交应该做什么，这会导致页面重新加载
编辑
试试这个改变

$('#ytVideo').submit(function(event){
        event.preventDefault(); //prevent page refresh
        event.stopPropagation(); //+
        var form = $('#ytVideo').serialize();
        //submit.php is the page where you submit your form
        $.post('index.php#tab-2', form, function(data){ 
            var x = $(data);
            $("body").html(x);
        });
        //- return false;
    });
    //- return false;

进行了一些更改

应该使用.submit()而不是.triggerHandler('submit')。文档和相关问题。

相关文章：