キーアップでSerializeArray

Question

私は送信する前にレビューページを持つ部品注文フォームを持っています。私はすべての入力値を表示して、ユーザーが送信前にフォームを再確認できるようにします。以下のコードは、ボタンクリックで動作しますが、私は、keyUpイベントでそれをやってみたい：試してみてください

<form action=""> 
    Field1: <input type="text" name="test1" value="test1" class="displayvalues"><br> 
    Field2: <input type="text" name="test2" value="test2" class="displayvalues"><br> 
    Field3: <input type="text" name="test3" value="test3" class="displayvalues"><br> 
</form> 

<div id="results"></div> 

<button>Serialize form values</button> 

のjQuery

$(document).ready(function(){ 
    $(".displayvalues").keyup(function(){ 
    var x = $("form").serializeArray(); 
    $.each(x, function(i, field){ 
     $("#results").append(field.name + ":" + field.value + " "); 
     }); 
    }); 
}); 

Answer 1

この

<form action=""> 
 
    Field1: <input type="text" name="test1" value="test1" class="displayvalues"><br> 
 
    Field2: <input type="text" name="test2" value="test2" class="displayvalues"><br> 
 
    Field3: <input type="text" name="test3" value="test3" class="displayvalues"><br> 
 
</form> 
 

 
<div id="results"></div> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $(".displayvalues").keyup(function(){ 
 
\t $("#results").html(''); 
 
    $(".displayvalues").each(function(){ 
 
     $("#results").append(this.name + ":" + this.value + " "); 
 
     }); 
 
    }); 
 
}); 
 
    
 
</script>