来自用户输入变量的文本不保留在div元素

我从HTML form元素中获取一个变量，并尝试将其放入一个div，以便在单击按钮时显示在网站上。然而，它显示了一秒钟然后弹出。来自用户输入变量的文本不保留在div元素

我试着把它从document.ready()块中取出来，但没有奏效。当我在$(".output").html中放入字符串文字时，也会出现同样的问题。类似我的问题似乎是一个语法错误，但我似乎没有任何我能找到的。

$(document).ready(function(){ 
    $(".sub").on("click",function(){ 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val()); 
    }); 
});

这是我在codepen网站：http://codepen.io/arcjackson06/pen/NNeQvJ

来源

2016-05-16 Acacia Jackson

你<button>将提交周围的表单。您需要使用：

<button class="..." type="button"></button>

这将防止表单被点击时提交。

替代可以防止默认点击事件，有：

$('.sub').on('click', function(event) { 
    event.preventDefault(); 
    // ...

来源

2016-05-16 15:59:04 andlrc

的问题是，你的页面上的表单提交每有人点击搜索按钮的时间。为了防止这种情况，你需要使用event.preventDefault：

$(".sub").on("click",function(event){ 
    event.preventDefault(); 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val());

来源

2016-05-16 16:00:02

这应该做的伎俩：

$(".sub").on("click",function(e) 
{ 
    e.preventDefault(); 
    var searchstring = $("#searchfield").val(); 
    $(".output").html(searchstring); 
}

来源

2016-05-16 16:00:56

无需任何额外的JavaScript。

只要给你的按钮一个属性type="button"，这应该照顾它。

问题是按钮的默认类型是提交，因此您刷新页面。

来源

2016-05-16 16:01:26 haltersweb

当有人点击时，其提交表单和您的页面正在重新加载。如果你不想提交表格

你可以试试这个。

$(document).ready(function(){ 
    $(".sub").on("click",function(event){ 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val()); 
    event.preventDefault(); // This will prevent the form submission 
    }); 
});

来源

2016-05-16 16:01:27

这是令人耳目一新的形式。这就是为什么你没有看到价值。见更新codepen：http://codepen.io/anon/pen/vGwNJP

我加回假如下：

$(document).ready(function(){ 


    $(".sub").on("click",function(e){ 
    var searchstring = $("#searchfield"); 

    $("#output").html(searchstring.val()); 
    return false; 
    // Or e.preventDefault(); 



    }); 
});

或者，您可以添加e.preventDefault（）;以及。

来源

2016-05-16 16:04:45

正如您使用表单，它会尝试执行表单默认操作，即提交。

这里您需要在onclick处理函数中执行event.preventDefault。

来源

2016-05-16 16:06:31 Bkjain655

来自用户输入变量的文本不保留在div元素

回答

相关问题