Question

我从HTML form元素中获取一个变量，并尝试将其放入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

Answer 1

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

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

这会阻止表单在点击时提交。

备选方案您可以使用以下命令阻止默认点击事件：

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

Answer 2

这应该可以解决问题：

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

Answer 3

无需任何额外的JavaScript。

只需为您的按钮添加一个属性@RequestMapping(value = "/response/{query}", method = RequestMethod.GET,headers="Accept=application/json") public QueryRep getResponse(@PathVariable("query") String query) { QueryRep test=new QueryRep(); System.out.println(query); // code !! return test; }，就可以处理它。

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

Answer 4

问题是，每次有人点击该搜索按钮时，您的网页上的表单都会提交。为了防止您需要使用event.preventDefault：

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

Answer 5

当有人点击时，它会提交表单并重新加载您的页面。如果您不想提交表格

你可以试试这个。

type="button"

Answer 6

表格令人耳目一新。这就是你没有看到价值的原因。请参阅更新的codepen：http://codepen.io/anon/pen/vGwNJP

我添加了如下返回false：

$(document).ready(function(){


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

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



    });
});

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

Answer 7

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

在这里你需要在onclick处理程序中执行event.preventDefault。

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

7 个答案: