Rails：按钮标记提交未调用控制器操作

Question

我需要同时调用jquery函数和一个提交按钮来调用控制器动作，现在所有验证都在起作用，但未调用控制器动作。 我进行了搜索并尝试了很多，但找不到任何解决方案，我已经这样做了，请帮助。

这是我的看法

<%= form_tag({action: :create_table}, multipart: true, method: :post, :id => 'contactform') do%>  
  <div class="form-group">
    <label class=" control-label">Prefix</label>
    <select class="form-control" id="prefix" name="prefix">
      <option value=""></option>
      <option value="tmp">tmp</option>
      <option value="ref">ref</option>
      <option value="client">client</option>
    </select>
    <br>

    <label class=" control-label">Client</label>
    <select class="form-control" id="client" name="client">
      <option value=""></option>
      <option value="kapow">kapow</option>
      <option value="perfect_africa">perfect_africa</option>
      <option value="earth_class_mail">earth_class_mail</option>
      <option value="amzn_seller">amzn_seller</option>
    </select>  
    <br>
  </div>

  <input type="file" name="file" id="myFile">
  &nbsp;&nbsp;     
  <div id="temp_display" name="disp"></div>
  <br>
  &nbsp;&nbsp;       
  <input type="hidden" name="filename" id="my_file_name" value="">

  <div class="form-group">
    <label class=" control-label">Delimiter</label>
    <select class="form-control" id="delimiter" name="delimiter">
      <option value=""></option>
      <option value=";">;</option>
      <option value=",">,</option>
      <option value="/t">tab</option
    </select>
    <br>
  </div>

  <div class="container">
    <%= button_tag(type: 'submit', class: "btn btn-default", 'data-toggle' => 'modal', 'data-target'=>'#myModal', id: "concat") do %>
      Submit
    <% end %>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
          <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Intel</h4>
            </div>
           <div class="modal-body">
             <p>you have successfully created <p id="demo"></p> table.</p>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button
          </div>
        </div>
      </div>
    </div> 
  </div>
<% end %>

这是我的JS

$(document).ready(function() {
$('#concat').on('click', function(event) {
    $('#contactform')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                prefix: {
                    // The messages for this field are shown as usual
                    validators: {
                        notEmpty: {
                            message: 'The prefix is required'
                        },
                    }
                },
                client: {
                    // The messages for this field are shown as usual
                    validators: {
                        notEmpty: {
                            message: 'The client is required'
                        },
                    }
                },
                delimiter: {
                    // The messages for this field are shown as usual
                    validators: {
                        notEmpty: {
                            message: 'The delimiter is required'
                        },
                    }
                }                    

            }
        });

    if($("#prefix").val().length!=0 && $("#client").val().length!=0 && $("#delimiter").val().length!=0){
        event.preventDefault();
    }
    event.stopImmediatePropagation()

    concatenated_string = $("#prefix").val() + "_" + $("#client").val() + "_" + $("#myFile").val();
    $("#concatenated_string").val(concatenated_string);
    myvar = concatenated_string.replace(/C:\\fakepath\\/i, '');

    var filename = myvar;

    $("#temp_display").text(filename);
    document.getElementById("my_file_name").value = filename;
    alert(filename);
});
});

这是我的控制器动作

 def create_table
   filename = params[:filename]
   content = params[:file].path
   del = params[:delimiter]
 end

Answer 1

可能的原因是调用stopImmediatePropagation

https://api.jquery.com/event.stopimmediatepropagation/