提交表單后如何保留選定的值-JQuery

Question

我有一個表格：

<form id="new_user" class="simple_form new_user" method="post" accept-charset="UTF-8" action="/admin/stats" novalidate="novalidate">
    <div class="col-lg-4">
        <h2>Stats by:</h2>
        <div class="col-md-10 col-sm-10">
            <div class="form-group country optional user_country">
                <select id="user_country" class="country optional wabi-form-control select form-control" name="user[country]">
            </div>
        </div>
        <div class="col-md-10 col-sm-10">
            <input class="btn btn-wabi btn-block" type="submit" value="Show Stats" name="commit">
        </div>
    </div>
</form>'

單擊“ Show Stats按鈕后，如何保留user_country的選定值？

Answer 1

使用PHP，將其放入選擇/輸入中：

value="<?php echo isset($_POST['user_country']) ? $_POST['user_country'] : '' ?>"

Javascript：

document.getElementById("user_country").value = localStorage.getItem("user_country");

function saveInput() {
    var country = document.getElementById("user_country").value;
    if (country == "") {
        alert("Please select a country first!");
        return false;
    }

    localStorage.setItem("user_country", country);
    alert("Your country has been saved!");

    location.reload();
    return false;
    //return true;
}

Answer 2

您始終可以使用AJAX（通過jQuery）。

$('.btn-wabi').on('click', function (evt) {
    evt.preventDefault():

$.post('/admin/stats')
   .success(function (result) {
        $('#somdivID').html(result);
   });
});

Answer 3

只需使用jquery訪問該值：

https://jsfiddle.net/voeo8j7p/

HTML：

<form id="new_user" class="simple_form new_user" method="post" accept-charset="UTF-8" action="/admin/stats" novalidate="novalidate">
    <div class="col-lg-4">
        <h2>Stats by:</h2>
        <div class="col-md-10 col-sm-10">
            <div class="form-group country optional user_country">
                <select id="user_country" class="country optional wabi-form-control select form-control" name="user[country]">
    <option value="1">USA</option>
    <option value="2">Mongolia</option>
    <option value="3">Egypt</option>
                </select>
            </div>
        </div>
        <div class="col-md-10 col-sm-10">
            <a id="showCountryLink" class="btn btn-wabi btn-block">Show Stats</a>
        </div>
    </div>
    <div id="current_country_div"></div>
    Current Country: <input id="current_country" val="">
</form>

JS：

 var current_country = "";

    $('#showCountryLink').click(function(evt) {
        evt.preventDefault();

         console.log("Showing country");
         current_country =  $( "#user_country" ).val();
         $("#current_country_div").html("Current Country: " + current_country);
         $("#current_country").val(current_country);
    });