2017-08-07 338 views
0

我已经从BS3移到Materialise,所以我正在经历并更改我的表单 - 我有4个表单非常相似,但是当我将第一个表单切换为不再提交时。该按钮甚至不像点击,但我绑定了一个通用的'logMe'功能,并且确实如此。Rails Submit按钮不提交

我的路线是完全一样的两个,新形式

<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但我不看到任何东西。我浏览了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没有。

回答

0

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

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

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

通过删除id: disabled它解决了提交按钮无法提交。不幸的是,它也使MaterializeCSS回到突出显示该字段,当我选择它,但我的问题是提交按钮不起作用。