dongluxin6711
dongluxin6711
2016-01-26 13:38

单击后将数据输入文本框

已采纳

I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.

My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.

This is the form I have so far:

<form method="POST" action="chat.php">
  <input type="text" name="message"></input>
  <input type="submit" />
</form>

This is the gallery:

<a href="#"><img src="cat.jpg"/></a>

So again, the question is how I could insert text into the text box once the user clicks the image of the cat?

Thank you for anyone who spends time on helping me solve this issue.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • dongluo1853 dongluo1853 5年前

    You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.

    function changeChatInput(value) {
      document.getElementById('chatInput').value = value;
    }
    <form method="POST" action="chat.php">
      <input type="text" name="message" id="chatInput" />
      <input type="submit" />
    </form>
    
    
    <a href="javascript: changeChatInput(':cat');">
      <img src="cat.jpg" />
    </a>

    </div>
    
    点赞 评论 复制链接分享
  • duanlaiquan8174 duanlaiquan8174 5年前

    I'd use

    $('a > img').click(function() {
        var imgName = retrieveImgName($(this).attr('src'));
        $('input[name="message"]').val(':' + imgName);
    });
    
    var retrieveImgName = function(imgPath) {
        return imgPath.substring(0, imgPath.indexOf('.'));
    };
    

    Doing that you can extract the logic for retrieving the name based on the src attribute of the img. So, if the logic changes for some reason, you can sobstitute it quite easily.

    点赞 评论 复制链接分享
  • douyuanqia665858 douyuanqia665858 5年前

    You can achieve your job by using this jQuery syntax.

    <script type="text/javascript">
    $('a > img').click(function(e){
       e.preventDefault();
       $('input[name="message"]').val(':cat');
    });
    </script>
    
    点赞 评论 复制链接分享
  • doupu1949 doupu1949 5年前

    Here is a solution in JS (without jQuery): http://jsbin.com/doqedodezo/3/edit?html,js,output

    The image triggers a JS function and passes the text which is supposed to be added to the input field. I added a id to the input to address it.

    点赞 评论 复制链接分享
  • doushan7077 doushan7077 5年前

    If you're using jQuery you could do something like this:

    $('a.cat').click(function()
    {
        $('input[name="message"]').val(':cat');
    });
    

    In this case you would need to update the link with the following:

    <a class="cat" href="#"><img src="cat.jpg"/></a>
    
    点赞 评论 复制链接分享