Question

我已经从BS3搬到了Materialise所以我正在经历并改变我的表格 - 我有4个形式非常相似，但是当我切换第一个时它不再提交。该按钮看起来似乎没有被点击，但我将一个通用的“logMe”功能绑定到它，确定它是。

我的路线两者完全相同，新形式是

<div class="row">
  <%= form_with(model: @statement, local: true) do |form| %>
    <% if @statement.errors.any? %>
      <% @statement.errors.full_messages.each do |message| %>
      <script>
        $(function() {
          Materialize.toast("<%= message %>", 3000);
        });
      </script>
      <% end %>
    <% end %>

    <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <!--<label for="icon_prefix">SoW Type:</label>-->
          <%= form.label :statement_type, 'Type:' %>
          <%= form.text_field :statement_type, :id => "disabled", :value => (params[:statement_type]), readonly: true, :disabled => true %>
        </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">contacts</i>
        <%= form.label :name, "Name:" %>
        <%= form.text_field :name,  :id => 'required_field1' %>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">contacts</i>
        <%= form.label :cost, "Cost:" %>
        <%= form.text_field :cost,  :id => 'required_field2' %>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">date_range</i>
        <%= form.label :start_date, "Start Date" %>
        <%= form.text_field :start_date, :class => 'datepicker', "data-provide" => 'datepicker', :id => 'required_field4', :placeholder => "YYYY-MM-DD" %>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">date_range</i>
        <%= form.label :end_date, "End Date" %>
        <%= form.text_field :end_date, :class => 'datepicker', "data-provide" => 'datepicker', :id => 'required_field5', :placeholder => "YYYY-MM-DD" %>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">perm_contact_calendar</i>
        <%= form.collection_select(:client_id, current_user.clients.order(:name),:id,:name, :class => "browser-default", :prompt => "Choose a client" ) %>   
      </div>
    </div>
    <div class="row">
      <div class="col s12">
        <%= form.submit 'Submit', :class =>'btn btn-default', :id => 'register', :onclick => "testMe()"%>    
      </div>
    </div>

  <% end %>
</div>

<script type="text/javascript">
$(document).ready(function (){
  $('select').material_select();
  validate();
  $('#required_field1, #required_field2').change(validate);
});

function testMe(){
  console.log('hi')
}

function validate(){
  if ($('#required_field1').val().length   >   0   &&
      $('#required_field2').val().length    >   0
      ){
      $("input[type=submit]").prop("disabled", false);
  }
  else {
      $("input[type=submit]").prop("disabled", true);
  }
}
var from_$input = $('#required_field4').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    closeOnSelect: true,
    format: 'yyyy-mm-dd'
  }),
  from_picker = from_$input.pickadate('picker')

var to_$input = $('#required_field5').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,
    clear: 'Clear',
    close: 'Ok',
    closeOnSelect: true,
    format: 'yyyy-mm-dd'
  }),
  to_picker = to_$input.pickadate('picker')


// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) {
  to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') ) {
  from_picker.set('max', to_picker.get('select'))
}

// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) {
  if ( event.select ) {
    to_picker.set('min', from_picker.get('select'))    
  }
  else if ( 'clear' in event ) {
    to_picker.set('min', false)
  }
})
to_picker.on('set', function(event) {
  if ( event.select ) {
    from_picker.set('max', to_picker.get('select'))
  }
  else if ( 'clear' in event ) {
    from_picker.set('max', false)
  }
})

</script>

我已经尝试评论所有JS，将其切换为常规按钮，使用Rubocop并使用Rubocop，但我没有看到任何关闭。我浏览了HTML以确保按钮位于表单内部，并且它是。

这不是我转型的第一种形式，但第一种形式我遇到了问题。

（我假设只有视图是相关的，因为此时它没有到达控制器。）

为了安全起见 - 呈现表单的视图是

<div class="row">
      <div class="col s12"><span class="flow-text" style="text-align: center;"><h1>New <%= params[:statement_type] %></h1></span></div>
</div>


<% if params[:statement_type] == 'Proposal' %>
    <%= render 'proposal_form' %>
<% elsif params[:statement_type] == 'Concept' %>
    <%= render 'concept_form' %>
<% elsif params[:statement_type] == 'SoW' %>
    <%= render 'sow_form' %>
<% elsif params[:statement_type] == 'Misc' %>
    <%= render 'misc_form' %>
<% end %>

<%= link_to 'Back', statements_path %>

SoW +提案工作。 SoW没有。

Answer 1

我的问题最终不是基于HTML，而是基于Rails。

由param填充的静态元素导致了问题。

<%= f.text_field :statement_type, :id => "disabled", :value => (params[:statement_type]), readonly: true %>

通过删除id: disabled，它解决了提交按钮无法提交的问题。不幸的是，当我选择它时，它也会使MaterializeCSS重新突出显示该字段，但我的问题是提交按钮无效。

Rails提交按钮未提交

1 个答案: