Отобразить значение поля ввода сразу после «результата» div

Question

Я хочу, чтобы значение отображалось на div class="result" сразу после ввода любого значения в поле ввода для каждого элемента.

<form action=""> 
    <input type="text" value="" name="nomin" id="text"> 
<!-- Radio Button --> 
    <label>Radio Button :</label> 
    <input type="radio" name="radio" value="Radio 1">Radio 1 
    <input type="radio" name="radio" value="Radio 2">Radio 2 
    <input type="radio" name="radio" value="Radio 3">Radio 3 
    <input type="radio" name="radio" value="Radio 4">Radio 4 


<!-- Textarea --> 
    <label>Textarea :</label> 
    <textarea id="textarea" ></textarea> 


    <select class="form-control" name="property-type"> 
     <option value="one">1</option> 
     <option value="two">2</option> 
     <option value="three">3</option> 
     <option value="four">4</option> 
    </select> 


    <div class="result">  
     Now Your Typed In :<br> 
     For nome fill : INPUT VALUE FOR TEXT FIELD 
     For Radio Field : VALE SELECTED RADIO FIELD 
     For Textarea Filled : DISPLAYT VALUE TEXTAREA 
    </div> 

Спасибо!

Answer 1

Используйте событие keyup/change, чтобы обновить значение при вводе/изменении значений.

Вы можете попробовать написать код jQuery.

$(document).ready(function() { 
 
    $(document).on('keyup', '#txt', function() { 
 
    $('#autofill_txt').text($(this).val()); 
 
    }); 
 
    $(document).on('change', 'input[name=radiobtn]', function() { 
 
    $('#autofill_radio').text($(this).val()); 
 
    }); 
 
    $(document).on('keyup', '#txtarea', function() { 
 
    $('#autofill_txtarea').text($(this).val()); 
 
    }); 
 
});

.result { 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="text" value="" name="nomin" id="txt"> 
 
    <!-- Radio Button --> 
 
    <br> 
 
    <label>Radio Button :</label> 
 
    <input type="radio" name="radiobtn" value="Radio 1">Radio 1 
 
    <input type="radio" name="radiobtn" value="Radio 2">Radio 2 
 
    <input type="radio" name="radiobtn" value="Radio 3">Radio 3 
 
    <input type="radio" name="radiobtn" value="Radio 4">Radio 4 
 

 
    <br> 
 
    <!-- Textarea --> 
 
    <label>Textarea :</label> 
 
    <textarea id="txtarea"></textarea> 
 
    <br> 
 
    <select class="form-control" name="property-type"> 
 
    <option value="one">1</option> 
 
    <option value="two">2</option> 
 
    <option value="three">3</option> 
 
    <option value="four">4</option> 
 
    </select> 
 
</form> 
 

 
<div class="result"> 
 
    Now Your Typed In : 
 
    <br>For nome fill : 
 
    <span id="autofill_txt">INPUT VALUE FOR TEXT FIELD</span> 
 
    <br>For Radio Field : 
 
    <span id="autofill_radio">VALE SELECTED RADIO FIELD</span> 
 
    <br>For Textarea Filled : 
 
    <span id="autofill_txtarea">DISPLAY VALUE TEXTAREA</span> 
 
</div>

Answer 2

У меня есть два вопрос 1, когда я обновить страницу вводимого значения держать на поле, но не отображается в области достижения результатов

2 - как отобразить значение поля выпадающего спасибо