Anzeige Eingabefeld Wert sofort auf "Ergebnis" div

Question

Ich möchte den Wert auf der div class="result" sofort nachdem ich einen Wert in das Eingabefeld für jedes Element eingeben.

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

Dank!

Answer 1

Verwenden Sie das Ereignis keyup/, um den Wert beim Eingeben/Ändern der Werte zu aktualisieren.

Sie können versuchen, es mit jQuery zu codieren.

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

ich habe zwei Ausgabe 1-, wenn ich die Seite des Eingangswert hält auf dem Feld zu aktualisieren, aber nicht auf dem Ergebnisbereich angezeigt

2 - wie Dropdown-Feld Wert anzuzeigen danke