通过单击将值传递给单行文本框

时间:2014-06-25 18:42:46

标签: javascript php

我有一张表格。

<form name="form1" method="post" action="">
    Please enter address:  
    <input type="text" name="address" id="address" value="Some Address" style="width:350px">
    <input type="submit" name="GO" id="GO" value="GO!">
</form>

1: address 1

2: address 2

3: address 3

4: address 4

默认情况下,单行文本框的值为“Some Address”。

但是在上面的表格中还有其他地址。如:

1:地址1

2:地址2

3:地址3

4:地址4

... ETCS

我想点击地址1并将“某些地址”替换为新的值“地址1”,依此类推其他地址。

这些地址是使用php从mysql数据库生成的。

我该如何处理?

2 个答案:

答案 0 :(得分:0)

如果您选择使用jQuery,则可以使用click事件,然后获取值并更改文本框值。请考虑以下示例:Sample Fiddle

<?php

$result = array();
// sample select pseudo code since you didn't provided the db fetching
// $con = new msqli('host', 'username', 'password', 'database');
// $query = mysqli_query($con, 'SELECT address_name FROM table_blah_blah_blah_address');
// while($row = $query->fetch_assoc()) {
//  $result[] = $row;
// }
// lets save it contains addresses fetched from db (SAMPLE!)
$result = array(
    array('name' => 'address 1'),
    array('name' => 'address 2'),
    array('name' => 'address 3'),
    array('name' => 'address 4'),
);

?>

<form name="form1" method="post" action="">
    Please enter address:
    <input type="text" name="address" id="address" value="Some Address" style="width:350px" />
    <input type="reset" value="Revert" />
    <input type="submit" name="GO" id="GO" value="GO!">
</form>

<div class="addresses">
<?php foreach($result as $line_num => $address): ?>
    <a href="#" class="clickable_address" data-value="<?php echo $address['name']; ?>" style="cursor: pointer;"><?php echo ++$line_num.'. '. $address['name']; ?><br/></a>
<?php endforeach; ?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.clickable_address').on('click', function(){
        $('#address').val($(this).data('value'));
    });
});
</script>

答案 1 :(得分:0)

您可以将数据库中的项目调用为链接,并将javascript与onclick属性一起使用;

//A mock of your php code - the actual db call is not shown in your question
<?php while($row = db::getline()): ?>
    <a href="#" onclick="yourfunc('<?php echo $row['col'];?>');return false;"><?php echo $row['col'];?></a>
<?php endwhile; ?>

<script type="text/javascript">
yourfunc(val){
    document.getElementById("address").value = val;
}
</script>