0

我有一个 HTML 表单。我想添加一个按钮，通过该按钮，特定的关键字将自动输入到某个输入字段（就像 Twitter 的回复一样）
然后它也会跳转到某个链接。

如何使用 jQuery 或 Javascript 实现它？

HTML（表单部分）

<a name="comment_part"></a>
<form accept-charset="UTF-8" action="/users/John/comments" class="new_comment" data-remote="true" enctype="multipart/form-data" id="new_comment" method="post">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="vvwHbqyiDXv0Sv5NrbPP5kfdwhovbHkkOUm2/2uJdNs=" />
    <input class="chat_input" id="body_input" name="comment[body]" type="text" />  
    <button type="submit" class="btn">Submit</button>   
</form>

HTML（按钮部分）

keyword = "@John "
(here, I want to show a button. If a user click on it, `@John ` will be automatically input into the input field above `input class="chat_box" id="body_input"` then jump to a link `<a name="comment_part"></a>`)

如何使用 jQuery 或 Javascript 存档？

4

2 回答 2

1

创建一个按钮并为其分配一个唯一id属性：

<button type="button" id="username" value="#{@keyword}">Populate the chat box</button>

然后，在 jQuery 中，监听该按钮的点击；单击它时，传递value属性并将其分配给input.chat_input#body_input：

$(document).ready(function(e) {
     $('button#username').click(function () {
         e.preventDefault();
         $(".chat_input#body_input").val($(this).attr('value'));
     });
});

编辑：

如果您希望单击按钮跳转到名称链接，则可以使用 Rails 的button_tohelper：

<%= button_to "Populate the chat box", "#name", :id => :username, :value => @keyword %>
于 2013-06-16T02:47:58.620 回答
0

根据该关键字的来源，只需将其作为数据属性附加到您的按钮...

  <button class='yourbutton' data-keyword="@john">YOUR BUTTON</button>

然后 Jquery 进入您的文档就绪代码...

$('.yourbutton').click(function(e){
e.preventDefault();    
$('#body_input').val($(this).data('keyword'));
  $('html, body').animate({scrollTop: $('a[name="comment_part"]').offset().top -100 }, 'slow'); 
});
于 2013-06-16T02:49:36.743 回答