Question

我有一张图片，每次点击它时我想将图片的name（或id）附加到输入字段中然后提交（如果可能的话，自动提交）。

<?php

?>
<!DOCTYPE HTML>
<html>
<head>
  <title></title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="jstophp.js"></script>
</head>
<body>
<a><img id="rar" src="images/5euro.jpg"></a> <br />
<a><img id="rar2" src="images/5euro.jpg"></a> <br />


<form action="form2.php" method="post">
    Name: <label><input id="inputF" type="text" name="name"></label><br>
    <input type="submit">
</form>

</body>
</html>

这是form2.php：

<?php

?>
<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<?php
echo "this is the name ". $_POST['name']
?>
</body>
</html>

这是javascript：

var check = null;
var x = $('#inputF');
$(document).ready(function(){
    $('img').click(function(){

        //gets attribute id from image
        check = $(this).attr("id");

        //puts image name into input field value (doesnt work)
        x.val(x.val() + check);

        //checks variable `check`
        console.log(check);
    });
});

当我打印到控制台时check正常打印，但当我实际提交表单时，它不起作用。

Answer 1

尝试

 $('img').click(function(){

    $('#inputF').val($('#inputF').val() +","+ this.id)

    $("input[type=submit]").trigger("click");
});

Answer 2

脚本运行正常。在表单标记中包含您的img标记，如下所示。

<html>
<head>
  <title></title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="jstophp.js"></script>
</head>
<body>
<form action="form2.php" method="post">
<a><img id="rar" src="images/5euro.jpg"></a> <br />
<a><img id="rar2" src="images/5euro.jpg"></a> <br />
    Name: <label><input id="inputF" type="text" name="name"></label><br>
    <input type="submit">
</form>

</body>

Answer 3

将x的赋值移动到click函数中，如下所示：

var check = null;
$(document).ready(function(){
    $('img').click(function(){

        var x = $('#inputF');

        //gets attribute id from image
        check = $(this).attr("id");

        //puts image name into input field value (doesnt work)
        x.val(x.val() + check);

        //checks variable `check`
        console.log(check);
    });
});

Answer 4

 $('img').click(function(){
   var test=$(this).attr("src");
   $('#inputF').val($('#inputF').val() +","+test)
});

Answer 5

这是jsfiddle - http://jsfiddle.net/DKL79/

和代码：

var $form = $('#formF');
var $input = $('#inputF', $form);

$('img').on('click', function(e) {
    $input.val(this.id);
    $form.submit();
});

如何在点击时将文字附加到输入字段？

5 个答案: