I have an AJAX powered form which is more like a 5 step wizard. There are no page refreshes until the data is submitted at the very end.

On an earlier step a value is entered into a HTML text field and I would like to have those same values present in another text box on the last page as they review the final details of their submission before they hit send..

I think it needs to be done with an onChange event but I cannot seem to get it to work fully, I am a PHP developer so am still working on my jQuery skills. Here is the code I wrote with no success:

<script type="text/javascript">
$(document).ready(function() {
$("#textbox1").change(function()
        {
    var text = $("#textbox1").val(); 
    $("#textbox2").html(text);
        }); 
});
</script>   

Thanks in advance gents.

I have an AJAX powered form which is more like a 5 step wizard. There are no page refreshes until the data is submitted at the very end.

On an earlier step a value is entered into a HTML text field and I would like to have those same values present in another text box on the last page as they review the final details of their submission before they hit send..

I think it needs to be done with an onChange event but I cannot seem to get it to work fully, I am a PHP developer so am still working on my jQuery skills. Here is the code I wrote with no success:

<script type="text/javascript">
$(document).ready(function() {
$("#textbox1").change(function()
        {
    var text = $("#textbox1").val(); 
    $("#textbox2").html(text);
        }); 
});
</script>   

Thanks in advance gents.

• javascript
• jquery
• textinput

2 Answers 2

You're almost there. You just need to use val method to set the value, and not html method:

<script type="text/javascript">
$(document).ready(function() {
$("#textbox1").change(function()
        {
    var text = $("#textbox1").val(); 
    $("#textbox2").val(text);
        }); 
});
</script>   

.val is used for both getting and setting a input's value:

• .val() returns the value
• .val(something) sets the value

So:

$("#textbox2").val(text);

.html is used to get/set an element's HTML contents, but for input elements that does not make sense. The following is bogus (which is what .html is trying):

<input>some html</input>