Using Ruby on Rails tag in JavaScript

Question

I have an html button in html.erb file. This button generates html controls and appends in table. It was working fine when there was no ruby on rails script involved. But now i have select_tag of RoR. This submits my page. My complete code as asked in comments is as follows:

 <script type="text/javascript">

     $(document).ready(function() {
          $("#AddSch").click(function() { 
            var hidval = $('#valEdu').val();
            if(hidval == 0)
            {
             hidval = 1;
            }
            else
            {
              //$('#valEdu').val(++hidval);
             hidval++;
            }  

            var rownum=$("#Controls > tbody > tr").length;
            var updated_row_num;
            if (rownum == 0)
            {
                updated_row_num=0;
            }
            else {
                updated_row_num=rownum/2;
            }
            var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>" + input1 + " <%= select_tag('university', options_from_collection_for_select(@Universites, 'id', 'University'),{:prompt => 'University'}) %></td></tr>";
            var control = "<tr><td align='center'><button type='button' class='btn_rmv'>Remove</button></td></tr>";

        $('#Controls').append(newRow);
        $('#Controls').append(control);
        return false;
      });

          $('#Controls').on('click', '.btn_rmv', function() {
                var index = $(this).closest('tr').index() + 2
                $('#Controls tr:nth-child(n+' + (index - 3) + ')').remove();
                return false;
          });

    });
</script> 

<h2 class = "subtitle">
    Education
</h2>
<%= form_for (:Educations) do |f| %>
<table width="100%">
      <tr style = "text-align:center;">
         <td>
            <%= f.select :chapter,options_from_collection_for_select(@Chapters, "id", "Chapter"), :include_blank => "Chapter",:id => "DDL_Students",:style => "margin-top: 10px" %>

            <%= f.select :University,options_from_collection_for_select(@Universites, "id", "University"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px" %>
         </td>
      </tr>
      <tr>
         <td align="center">
            <table id="Controls">
            </table>

            <div><input id="AddSch" value="Add" type="button" /></div>
            <input id="valEdu" type="hidden" value="0" />

         </td>
      </tr>
</table>
<table width="92%">
      <tr>
         <td align="center">
            <div class="button" style="margin-left:60px;">
                <%= f.submit "Next", { :class => "buttonSearch"} %>
            </div>
         </td>
      </tr>
</table>
<% end %>

Removing type="submit" changes it to textbox and if I use type="button" it never calls that javascript. How can I make it work?

Answer 1

there's two pointers that I can give you, I can't really reproduce as I dont have your model and controller action setup.

1. You do not want to randomly up or downcase your variables as in:

f.select :University,options_from_collection_for_select(@Universites, "id", "University"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px"

Instead you want:

f.select :university, options_from_collection_for_select(@universities, "id", "university_name"), :include_blank => "University",:id => "DDL_Students",:style => "margin-top: 10px"

Ideally you wouldn't want the inline styles too, but we'll let that slip for now ;-)

2. I could the variable "input1" is not defined, have a look into your devtools console (F12) and check if there are any JS errors over there.

Hope that helps, Jan