Using Jquery Keyup function to pass variable from one input field to another

Question

I am trying to autopopulate an input field (location-name) with the value entered in another field (location-address). I have looked online everywhere and managed to make the JS snippet work on a straightforward example, but for some reason this is not working with the following php code.

Just to clarify, I would like the value entered in "location-address to be passed to "location-name".

<script>
    $('#location-address')
        .keyup(function() {
            var value = $(this).val();
            $('#location-name').text(value);
        })
        .keyup();
</script>

<tr class="em-location-data-name">
    <th style="padding-top: 14px;">
        <?php _e ( 'Event unique identifier:', 'dbem' )?>
    </th>
    <td>
        <input id="location-name" type="text" name="location_name" />
    </td>

</tr>
<tr class="em-location-data-address">
    <th style="padding-top: 14px;">
        <?php _e ( 'Address:', 'dbem' )?>&nbsp;</th>
    <td>
        <input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
    </td>
</tr>

Thanks Satpal. I just added it, but it still doesn't work ... $(document).ready(function() { $( '#location-address' ) .keyup(function() { var value = $( this ).val(); $( '#location-name' ).text( value ); }) .keyup(); }); — Yvan Nasr
– Yvan Nasr, Commented Apr 15, 2016 at 13:11

Rory McCrossan · Accepted Answer · 2016-04-15 13:09:00Z

2

Firstly your code needs to be placed in a document.ready handler. Secondly, you need to use val() not text() to set the value of an input field.

$(function() {
    $('#location-address').keyup(function() {
        var value = $(this).val();
        $('#location-name').val(value);
    }).keyup();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="em-location-data-name">
    <th style="padding-top: 14px;">
      <?php _e ( 'Event unique identifier:', 'dbem' )?>
    </th>
    <td>
      <input id="location-name" type="text" name="location_name" />
    </td>
  </tr>

  <tr class="em-location-data-address">
    <th style="padding-top: 14px;">
      <? php _e( 'Address:', 'dbem') ?>&nbsp;
    </th>
    <td>
      <input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
    </td>
  </tr>
</table>

answered Apr 15, 2016 at 13:09

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yvan Nasr Over a year ago

this worked ... Thank you so much Rory !!! i am a newbie ... i spent hours on this ... and couldn't figure it out ... thanks so much!

Rory McCrossan Over a year ago

No problem, glad to help

Pupil · Accepted Answer · 2016-04-15 13:11:37Z

0

You need to wrap your jQuery code in $(document).ready(); so that jQuery binds all HTML elements.

Corrected code:

<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
    var value = $(this).val();
    $('#location-name').val( value );
  });
}).keyup();
</script>

edited Apr 15, 2016 at 13:11

answered Apr 15, 2016 at 13:08

Pupil

24k6 gold badges49 silver badges71 bronze badges

1 Comment

Pupil Over a year ago

@RoryMcCrossan, thanks for the comment. I have updated my answer.

Brijal Savaliya · Accepted Answer · 2016-04-15 13:14:29Z

0

Use this

<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
    var value = $(this).val();
    $('#location-name').val( value );
  });
});
</script>

answered Apr 15, 2016 at 13:14

Brijal Savaliya

1,0919 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using Jquery Keyup function to pass variable from one input field to another

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related