Ryzal Yusoff
Reputation: 1047
Remove required attribute from rails form when submit?
I have a rails form that have radio buttons with required attribute. I need that required attribute for the "Check" button. But when somebody click "Mark as absent" button, it will remove this required attribute from all those radio buttons. Here is what the form looks like:
This is My form looks like. Its mixed with rails code, so it wont be confusing you.
<table class="listing table table-striped" style="margin-bottom:50px;">
<thead>
<tr class="header">
<th><span style="color:#F5F5F5;"><%= checkins_counter %>.</span> <%= company.name %></th>
<th colspan="2">
<div style="float:right;">
<% if checkin.checked == true %>
<%= link_to "#",:class => "minus_toggle btn btn-link", :style => "display:none;" ,:id => "minus_#{company.id}" do %>
<span class="glyphicon glyphicon-minus" style="color:#fff"></span>
<% end %>
<%= link_to "#",:class => "plus_toggle btn btn-link", :id => "plus_#{company.id}" do %>
<span class="glyphicon glyphicon-plus" style="color:#fff"></span>
<% end %>
<% else %>
<%= link_to "#",:class => "minus_toggle btn btn-link" ,:id => "minus_#{company.id}" do %>
<span class="glyphicon glyphicon-minus" style="color:#fff"></span>
<% end %>
<%= link_to "#",:class => "plus_toggle btn btn-link", :style => "display:none;" ,:id => "plus_#{company.id}" do %>
<span class="glyphicon glyphicon-plus" style="color:#fff"></span>
<% end %>
<% end %>
<%= hidden_field_tag :week, @week %>
<%= hidden_field_tag :company_id, company.id %>
<%= hidden_field_tag :checkins_size, @checkins.size %>
<%= hidden_field_tag :previous_target_content, previous_target %>
<%= f.submit "Check", :class => "btn btn-success btn-sm" %>
<% if checkin.absent == true %>
<span id="undo_btn_<%= company.id %>">
<%= f.submit "Undo", :class => "btn btn-danger btn-sm" %>
Marked as absent
</span>
<%= f.submit "Mark as absent", :class => "btn btn-danger btn-sm absent_btn", :id => "hihi", :style => "display:none;" %>
<% else %>
<span id="absent_btn_<%= company.id %>" style="display:none;">
<%= f.submit "Undo", :class => "btn btn-danger btn-sm" %>
Marked as absent
</span>
<%= f.submit "Mark as absent", :class => "btn btn-danger btn-sm absent_btn", :id => "absent_btn_#{company.id}" %>
<% end %>
</div>
</th>
</tr>
</thead>
<% if checkin.checked == true %>
<tbody id="tbody_<%= company.id %>" style="display:none;">
<% else %>
<tbody id="tbody_<%= company.id %>">
<% end %>
<tr>
<td>Target</td>
<td>
<b>Previous target: </b><br/>
<% if previous_target != "" && !previous_target.blank? %>
<i><%= previous_target %></i>
<% else %>
N/A
<% end %>
<br/>
<% if @week != "1" %>
<% if checkin.previous_target == false && checkin.checked == false %>
Done <%= f.radio_button :previous_target, 'true', :checked => 'false', :required => true %>
Not Done <%= f.radio_button :previous_target, 'false', :checked => 'false', :required => true %>
<% else %>
Done <%= f.radio_button :previous_target, 'true', :required => true %>
Not Done <%= f.radio_button :previous_target, 'false', :required => true %>
<% end %>
<br/>
<% end %>
<br/>
<b>New target: </b><br/>
<%= f.text_area :target, :class => "form-control", :id => "target_#{company.id}" %>
<br/>
</td>
<td></td>
</tr>
<tr>
<td>Comment</td>
<td><%= f.text_area :comment, :class => "form-control" %></td>
<td></td>
</tr>
<tr>
<td>Points</td>
<td>
1 <%= f.radio_button :point1, '1', :required => true %>
2 <%= f.radio_button :point1, '2', :required => true %>
3 <%= f.radio_button :point1, '3', :required => true %>
4 <%= f.radio_button :point1, '4', :required => true %>
5 <%= f.radio_button :point1, '5', :required => true %>
Execution<br/><br/>
1 <%= f.radio_button :point2, '1', :required => true %>
2 <%= f.radio_button :point2, '2', :required => true %>
3 <%= f.radio_button :point2, '3', :required => true %>
4 <%= f.radio_button :point2, '4', :required => true %>
5 <%= f.radio_button :point2, '5', :required => true %>
Team<br/><br/>
1 <%= f.radio_button :point3, '1', :required => true %>
2 <%= f.radio_button :point3, '2', :required => true %>
3 <%= f.radio_button :point3, '3', :required => true %>
4 <%= f.radio_button :point3, '4', :required => true %>
5 <%= f.radio_button :point3, '5', :required => true %>
Initiative<br/><br/>
1 <%= f.radio_button :point4, '1', :required => true %>
2 <%= f.radio_button :point4, '2', :required => true %>
3 <%= f.radio_button :point4, '3', :required => true %>
4 <%= f.radio_button :point4, '4', :required => true %>
5 <%= f.radio_button :point4, '5', :required => true %>
Prompt communication <br/><br/>
1 <%= f.radio_button :point5, '1', :required => true %>
2 <%= f.radio_button :point5, '2', :required => true %>
3 <%= f.radio_button :point5, '3', :required => true %>
4 <%= f.radio_button :point5, '4', :required => true %>
5 <%= f.radio_button :point5, '5', :required => true %>
Coachability<br/>
</td>
<td></td>
</tr>
</tbody>
</table>
And here is my javascript that I have tried to do:
$(".absent_btn").click(function()
{
$(this).parent().parent().parent().parent().parent().find('tbody :input').each(function(){
$(this).removeAttr('required');
});
});
p/s: I need to level up because I have multiple forms on the page like you can see on the picture above.
Upvotes: 1
Views: 620
Answers (3)
DinoMyte
Reputation: 8858
You don't really need to level up. Just apply the selector on the tbody.
$(".absent_btn").click(function()
{
$(this).closest('form').find('tbody input').each(function(){
$(this).removeAttr('required');
});
});
For toggling:
$(".absent_btn").click(function()
{
if($(this).is(":checked"))
{
$(this).closest('form').find('tbody input').each(function(){
$(this).removeAttr('required');
});
}
else
{
$(this).closest('form').find('tbody input').each(function(){
$(this).attr('required','required');
});
}
});
Upvotes: 0
Ryzal Yusoff
Reputation: 1047
I dont know why .removeAttr is not working for me. I have tried to inspect it and the browser gave me "Uncaught SyntaxError: Unexpected token ILLEGAL" error which is not useful at all.
Anyway, this is the solution that finally works for me:
$(".absent_btn").click(function()
{
$(this).parents('table').find('tbody input').prop('required', false);
});
Upvotes: 0
VanXD
Reputation: 61
code is work:
$(".absent_btn").click(function()
{
$(this).parents("table").find("input[type=radio]").each(function(){
$(this).removeAttr('required');
});
});
Upvotes: 1
Related Questions
- Rails 5 simple_form mark radio button as required & prevent form submit if not filled
- Having fields be conditionally required in rails model?
- Disabling form default behavior rails
- jQuery / Rails: Fire JS event on submit; only when validation is passed
- Rails/jQuery prevent form submission
- How to keep a form from submitting using javascript in rails?
- Disabling and Reenabling Form Submit with JQuery in Rails
- how to disable a submit button if text_field is empty in ruby on rails?
- Validations not done while submitting rails form via jquery
- Prevent submission of a field with the default value