Copy data from one input to another using jQuery bind

Question

I have 2 fields on a form that I need to be filled with the same data.

when you type here:

<?php $value = (isset($lead) ? $lead->name : ''); ?>
        <?php echo render_input('name','lead_add_edit_name',$value); ?>

this is us updated with the same info:

<?php $value = (isset($lead) ? $lead->company : ''); ?>
        <?php echo render_input('company','lead_company',$value); ?>

I found this code but, I can't get it to work:

    $("#thing1").bind('input', function () { var stt = $(this).val(); $("#thing2").val(stt); });

Any Ideas? Thanks

Answer 1

you would need to bind the right DOM event on the form field.

First of all, in this case, identify the two field (origin and destination) you would like to copy data over. In your case, you seem to be using a sort of PHP framework (a wordpress theme?), that use the render_input function to render a form input field.

Supposing the first parameter of that function represents the name of the field, you would select the fields by following selectors:

$("input[name=name]")
$("input[name=company]")

by knowing this, you now will need to intercept the DOM event on the first field that occours when you change the value, so the correct event would be 'change'. And as @Rahul said, the correct listener would be 'on', no more 'bind'.

$("input[name=name]").on('change',function(){...});

Lastly, when the event triggers, you would just have to copy the value of the element to the other one.

$("input[name=name]").on('change',function(){
    var fieldValue = $(this).val();
    $("input[name=company]").val(fieldValue);
});

Real finally, as @Quasimodo's clone said, encapsulate all the code inside a document ready triggered function so you'll be sure that it'll be executed after the form fields will be actually avalaible in page.

$(document).ready(function(){
    $("input[name=name]").on('change',function(){
        var fieldValue = $(this).val();
        $("input[name=company]").val(fieldValue);
    });
});