使用Jquery Keyup函数将变量从一个输入字段传递到另一个输入字段

Question

我想用另一个字段（位置地址）中输入的值自动填充输入字段（位置名称）。我在网上到处寻找，并设法使JS代码片段工作在一个简单的例子上，但由于某种原因，这不适用于下面的PHP代码。

只是为了澄清，我想在输入值“位置的地址将被传递到‘位置名’。

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

Answer 1

你需要用你的jQuery代码在$(document).ready();让jQuery的结合所有HTML元素

更正代码：

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

Answer 2

首先你的代码需要被放置在一个做cument.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>

Answer 3

使用此

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