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' )?> </th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
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>
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') ?>
</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>
</div>
Use this
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
});
</script>