使用jQuery在表单提交中存储var值

Question

我看了很多答案，似乎没有人适合这个问题。我有一个简单的搜索框和提交按钮，并希望将输入字段的值存储在变量中。它似乎首先存储，然后消失。代码：

的的JavaScript

$(document).ready(function(){

    $('form').submit(function(){
        var input = $('#search').val();
        $('p').append(input);
    });
});

HTML

 <form>
    <input id='search' class='form-control' type='text' name='search'>
    <input id='submit' type='submit' value='Submit' class='btn btn-lg btn-primary'>
 </form>
 <p></p>

变量将显示一秒钟并消失，大概是当搜索框再次变空时。

Answer 1

发生这种情况的原因是，当您提交表单时，浏览器会向服务器发送新的HTTP请求并重新加载您的页面。您可以通过从提交处理程序返回false来阻止此行为：

$('form').submit(function() {
    var input = $('#search').val();
    $('p').append(input);
    return false;
});

或者：

$('form').submit(function(e) {
    e.preventDefault();
    var input = $('#search').val();
    $('p').append(input);
});

这将阻止页面重新加载，并且您对DOM所做的更改将保留。

Answer 2

$(document).ready(function(){

    $('form').submit(function(){
        var input = $('#search').val();
        $('p').append(input);
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input id='search' class='form-control' type='text' name='search'>
    <input id='submit' type='submit' value='Submit' class='btn btn-lg btn-primary'>
 </form>
 <p></p>

Answer 3

为了获得结果，你可以做这样的事情

在HTML代码中

<form action="" method="get" id="search_form">
    <input id='search' class='form-control' type='text' name='search'>
    <input id='submit' type='submit' value='Submit' class='btn btn-lg btn-primary'>
 </form>
 <p></p>
<div id="search_result"></div>

Javascript代码

$('#search_form').submit(function(){
    var input = $('#search').val();
    $('p').text(input);
    $("#search_result").load($(this).attr("action")+ " #search_result", function(){
        alert("result loaded for "+ input)
    })
    return false;
});