立即在“result”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进行编码。

＆＃13;

＆＃13;

$(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());
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我有两个问题  1-当我刷新页面时，输入值保持在字段上但不显示在结果区

2 - 如何显示下拉字段值 感谢