Как показать выбранное значение type = "radio" для населения?

Question

При нажатии на кнопку «Заполнить значения» div под кнопкой должен заполнить значения выбранных переключателей предпочтительного и исходного местоположений соответственно

Я хочу сделать это незаметно без встроенного JavaScript

<div id="form_block">
    <div class="home-location">
        <ul>
            <li>Home Location</li>
            <li>
                <input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
                    for="home-india">India</label></li>
            <li>
                <input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
                    for="home-usa">USA</label></li>
        </ul>
    </div>
    <div class="prefer-location">
        <ul>
            <li>Preferred Location</li>
            <li>
                <input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
                    for="preferred-india">India</label></li>
            <li>
                <input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
                    for="preferred-usa">USA</label></li>
        </ul>
    </div>
    <div class="result">
        My Home Location is: <span class="home-location-result"></span>and my preferred
        location is: <span class="home-location-result"></span>
    </div>
    <input type="submit" value="Populate Values" id="ss" class="submit" />

Answer 1

изменил ваш HTML.Предоставлен атрибут id для вашего диапазона результатов

$(function(){
    $("#ss").click(function(){
        // Find all input elements with type radio which are descendants of element with id `form`
        var filt = $("#form_block input:radio");
        // Apply a filter to the above object with `name='home-location'` and checked and get the value
        var homeVal = filt.filter("[name='home-location']:checked").val();
        // same as above
        var preferredVal = filt.filter("[name='home-preferred']:checked").val();
        // Set the text of the element width id `home-location-result' with the computed value
        $("#home-location-result").text(homeVal);
        // same as above
        $("#preferred-location-result").text(preferredVal);

        return false;
    });
});

См. рабочая демонстрация

Answer 2

используйте это, это работает для меня

  <script>
function test()
{
    var home= $('input:radio[name=home-location]:checked').val();
    document.getElementById("h1").innerHTML=home;
    var preferred= $('input:radio[name=home-preferred]:checked').val();
   document.getElementById("h2").innerHTML=preferred;
   return false;

}


</script>
<form onsubmit="return test();">
<div id="form_block">
    <div class="home-location">
        <ul>
            <li>Home Location</li>
            <li>
                <input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
                    for="home-india">India</label></li>
            <li>
                <input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
                    for="home-usa">USA</label></li>
        </ul>
    </div>
    <div class="prefer-location">
        <ul>
            <li>Preferred Location</li>
            <li>
                <input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
                    for="preferred-india">India</label></li>
            <li>
                <input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
                    for="preferred-usa">USA</label></li>
        </ul>
    </div>
    <div class="result">
        My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
        location is: <span class="home-location-result" id='h2'></span>
    </div>
    <input type="submit" value="Populate Values" id="ss" class="submit" />
</form>