2016-08-19 74 views
3

我有ID #image_tag_list_tokens的text_field並出現文本框作爲圖像形式如下:如何使用Javascript或ajax實時地在文本字段中注入或添加輸入字段的值?

= f.text_area :tag_list_tokens, label: "Tags (optional) ->", data: {load: @image_tags }, label: "Tags" 

我有一個輸入字段和一個按鈕如下:

<input type="text" name="myNewTag" id="my_new_tag"> 
<button name="meNewTagButton" type="button" id="createMy_new_tag">Create new tag</button> 

當用戶鍵入在輸入字段中添加一個新標籤,我想要抓住該新標籤並將其添加到tag_list_tokens的文本區域中,而無需重新加載頁面。在tag_list_tokens文本字段的值是以下格式:

"old_tag1,old_tag2,'new_tag1','new_tag2'" 
+0

僅供參考 - 如果您發佈呈現的HTML而不是你的軌道.erb模板,它通常是更有幫助:) – larz

回答

1

// add event listener for button click 
 
$("#createMy_new_tag").on("click", function(){ 
 
    // get the text in the input 
 
    var new_tag = $("#my_new_tag").val(), 
 
    // grab the textarea 
 
     textarea = $("#image_tag_list_tokens") 
 
    // append the input to the current text 
 
    textarea.val(textarea.val() + ", " + new_tag) 
 
    // reset the input 
 
    $("#my_new_tag").val("") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="image_tag_list_tokens">blah</textarea> 
 
<input type="text" name="myNewTag" id="my_new_tag"> 
 
<button name="meNewTagButton" type="button" id="createMy_new_tag">Create new tag</button>

相關問題