Использование функции Jquery Keyup для передачи переменной из одного поля ввода в другое

Question

Использование функции Jquery Keyup для передачи переменной из одного поля ввода в другое

Я пытаюсь автоматически заполнить поле ввода (location-name) значением, введенным в другом поле (location-address). Я везде посмотрел онлайн и смог заставить JS-фрагмент работать на простом примере, но по какой-то причине это не работает со следующим php-кодом.

Просто чтобы уточнить, я бы хотел, чтобы значение, введенное в «location-address», передавалось «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>

2

javascript jquery keyup php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Во-первых, ваш код должен быть помещен в обработчик document.ready. Во-вторых, вам нужно использовать val() не text() установить значение input поле.

$(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>

2

Другие решения

Вы должны обернуть свой код JQuery в $(document).ready(); так что jQuery связывает все элементы HTML.

Исправленный код:

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

0

Использовать этот

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

0

Источник