Adding text on button click to simple form with jquery

Question

I'm starting out with jQuery, and I'm trying to add bootstrap buttons that add Spanish-accent vowels to the simple_form text field on click. I'm modeled the code after an answer to this question, but nothing is currently happening upon clicking the button--am I doing something wrong?

In the view, I'm using simple form and adding a wrapper id to the text field:

<%= simple_form_for @word, url: lesson_image_spelling_path(current_lesson, @word.word), method: :patch do |f| %>
    <%= f.input :spelling_attempt, wrapper_html: { id: 'txt' }, label: "Spell the word:" %>

    <br>

    <button type="button" class="btn btn-secondary btn-sm" id="a-accent">á</button>

    <%= f.button :submit, "Submit", class: 'btn btn-primary' %>
<% end %>

In application.js I have:

jQuery("#a-accent").on('click', function() {
  var $txt = jQuery("#txt");
  var caretPos = $txt[0].selectionStart;
  var textAreaTxt = $txt.val();
  var txtToAdd = "test";
  $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
});

Wrap your jquery in a document.ready(function(){...}) or or make the click event handler attached global $(document).on('click','#a-accent', function(){..}) — Rik
– Rik, Commented Sep 18, 2016 at 17:14

gmrash · Accepted Answer · 2016-09-18 16:46:55Z

1

Maybe use input_html instead of wrapper_html. Put console.log('btn clicked') into your click event and look in browser console if this event work.

answered Sep 18, 2016 at 16:46

gmrash

6707 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gonzalo2000 Over a year ago

A combination of input_html plus the document.ready(function) suggested by Rik did the trick :)

Collectives™ on Stack Overflow

Adding text on button click to simple form with jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related