Put html param into Rails array parameter - javascript

Ruby on Rails 4.1
The form is placing the parameters into an array when POST is done. I am making a script to auto fill the billing address the same as the shipping address. When the script runs it is assigning the values as html values.
How do you put these values into the payment array being sent?
The log where cc_name and ship_name are outside the payment array, I want them inside:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"x", "cc_name"=>"Bobby", "payment"=>{"telephone"=>"555", "email"=>"drfernandez1#yahoo.com", "address1"=>"641 W Rt 66", "address2"=>"", "city"=>"Glendora", "state"=>"CA", "postal_code"=>"91740", "country"=>"USA", "cc_type"=>"Visa", "cc_number"=>"5555555588884444", "ccv"=>"321", "expires_on(1i)"=>"2014", "expires_on(2i)"=>"9", "expires_on(3i)"=>"1", "ship_address1"=>"641 W Route 66", "ship_address2"=>"", "ship_city"=>"Glendora", "ship_state"=>"c", "ship_postal_code"=>"91740", "ship_country"=>"u", "card_holder_auth"=>"1", "charge_auth"=>"1", "name_auth"=>"David Duke", "date_auth"=>"7"}, "billingtoo"=>"on", "ship_name"=>"Bobby", "commit"=>"Send Payment"}
The form (minus clutter):
<%= form_for #payment do |f| %>
<%= render 'shared/payment_error_messages' %>
<h1>Fill in all blank areas with payment information:</h1>
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Applicant Information</h3>
</div>
<div class="panel-body">
<%= f.label :cc_name, "Name as it appears on credit card:" %><br>
<%= f.text_field :cc_name, class: "input-lg", :name => "cc_name" %> <%#= #payment.errors.get(:cc_name) %>
<%= f.label :telephone, "Telephone Number:" %><br>
<%= f.text_field :telephone, class: "input-lg" %>
...
<div class="panel-body">
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)"><em>Shipping Address is the same as the Billing Address</em>
<p>Please Note: This cannot be a P.O box address</p>
<%= f.label :ship_name, "Name:" %><br>
<%= f.text_field :ship_name, class: "input-lg", :name => "ship_name" %>
<%= f.label :ship_address1, "Address 1:" %><br>
<%= f.text_field :ship_address1, class: "input-lg" %>
...
<%= f.submit "Send Payment", class: "btn btn-lg btn-primary", id: "commit" %>
</div>
</div>
</div>
<% end %>
<br/>
<%= link_to 'Back', session[:last_page] %>
</div>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.ship_name.value = f.cc_name.value;
}
}
</script>

You are overwriting the field's name:
:name => "cc_name"
That's the reason why it is sent outside of the array. Try removing the :name assigning:
<%= f.text_field :cc_name, class: "input-lg" %>
and
<%= f.text_field :ship_name, class: "input-lg" %>

Related

Multiple Summernote text area fields

I have two Rails forms (edit and new) that have multiple text areas. I'm trying to get all of them to use Summernote, but only one of them appears to use the javascript (the last text area if that makes a difference). How can I change it so all text areas use Summernote?
Here's the relevant code:
coffee javascript file:
$ ->
# to set summernote object
# You should change '#med_description' to your textarea input id
summer_note = $('#med_description')
summer_note2 = $('#med_reactions')
summer_note3 = $('#med_interactions')
summer_note4 = $('#med_implementation')
summer_note5 = $('#med_availability')
summer_note6 = $('#med_caution')
summer_note7 = $('#med_warnings')
# to call summernote editor
summer_note.summernote
summer_note2.summernote
summer_note3.summernote
summer_note4.summernote
summer_note5.summernote
summer_note6.summernote
summer_note7.summernote
# to set options
height:300
codemirror:
lineNumbers: true
tabSize: 2
theme: "solarized light"
# to set code for summernote
summer_note.code summer_note.val()
summer_note2.code summer_note.val()
summer_note3.code summer_note.val()
summer_note4.code summer_note.val()
summer_note5.code summer_note.val()
summer_note6.code summer_note.val()
summer_note7.code summer_note.val()
# to get code for summernote
summer_note.closest('form').submit ->
# alert $('#med_description').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note2.closest('form').submit ->
# alert $('#med_reactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note3.closest('form').submit ->
# alert $('#med_interactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note4.closest('form').submit ->
# alert $('#med_implementation').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note5.closest('form').submit ->
# alert $('#med_availability').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note6.closest('form').submit ->
# alert $('#med_caution').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note7.closest('form').submit ->
# alert $('#med_warnings').code()
summer_note.val summer_note.code()
true
edit.html.erb:
<%= form_for(#med) do |f| %>
<%= f.label :brand_name, "Name of the medicine:" %>
<div><%= f.text_field :brand_name, required: true %></div>
<%= f.label :generic_name %>
<div><%= f.text_field :generic_name, required: true %></div>
<%= f.label :description %>
<div><%= f.text_area :description, as: :summernote, :id => 'description' %></div>
<%= f.label :reactions %>
<div><%= f.text_area :reactions, as: :summernote, :id => 'reactions' %></div>
<%= f.label :interactions %>
<div><%= f.text_area :interactions, as: :summernote, :id => 'interactions' %></div>
<%= f.label :implementation %>
<div><%= f.text_area :implementation, as: :summernote, :id => 'implementation' %></div>
<%= f.label :availability %>
<div><%= f.text_area :availability, as: :summernote, :id => 'availability' %></div>
<%= f.label :caution %>
<div><%= f.text_area :caution, as: :summernote, :id => 'caution' %></div>
<%= f.label :warnings %>
<div><%= f.text_area :warnings, as: :summernote, :id => 'warnings' %></div>
<div><%= f.submit "Save changes", class: "btn btn-primary" %> </div>
<% end %>
new.html.erb:
<%= simple_form_for #med, class: "form-horizontal", method: :post do |f| %>
<div class="form-group">
<%= f.label :brand_name, "Name of the medicine:" %>
<%= f.input :brand_name, required: true %>
</div>
<div class="form-group">
<%= f.label :generic_name %>
<%= f.input :generic_name, required: true %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.input :description, as: :summernote, :id => 'description' %>
</div>
<div class="form-group">
<%= f.label :reactions %>
<%= f.input :reactions, as: :summernote, id: 'reactions' %>
</div>
<div class="form-group">
<%= f.label :interactions %>
<%= f.input :interactions, as: :summernote, id: 'interactions' %>
</div>
<div class="form-group">
<%= f.label :implementation %>
<%= f.input :implementation, as: :summernote, id: 'implementation' %>
</div>
<div class="form-group">
<%= f.label :availability %>
<%= f.input :availability, as: :summernote, id: 'availability' %>
</div>
<div class="form-group">
<%= f.label :caution %>
<%= f.input :caution, as: :summernote, id: 'caution' %>
</div>
<div class="form-group">
<%= f.label :warnings %>
<%= f.input :warnings, as: :summernote, id: 'warnings' %>
</div>
<%= f.button :submit, class: "btn btn-primary" %>
<% end %>
Thanks!
EDIT: The Summernote github page (https://github.com/summernote/summernote-rails) shows the following code. I think it might be the best way to fix my issue. It looks like it loops through any field that has as: :summernote:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
Is this the right answer? If so, how do I implement it?
The following code worked:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
I placed that code above everything else I had in the coffee file and it worked fine.

Submitting two forms with javascript, one submits one not. Cant figure out why?

I have this as Javascript code for my Ticket Model.
$(document).ready(function() {
$('#submitForm').click(function(e) {
$('#form1').submit();
$('#form2').submit();
});
});
On my ticket edit view, i have both ticket and its comments to update. Ticket form its named form1 and comment form is named form2. If I only have form1 on my javascript code, it updates perfectly, when I add form2 only form2 updates, so only the comment gets added, the Ticket Atributes (from form1) are not being updated.
Here is my Ticket View code (its actually a partial i'm loading on the edit view")
<%= form_for #ticket, :html => { :class => 'form-horizontal', :id => 'form1' } do |f| %>
<div class="control-group">
<%= f.label :subject, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :subject, :class => 'text_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :content, :class => 'control-label' %>
<div class="controls">
<%= f.text_area :content, :class => 'text_area' ,:style => 'height:190px; width:655px', disabled: true %>
</div>
</div>
<div class="control-group">
<%= f.label "Assigne", :class => 'control-label' %>
<div class="controls">
<%= f.collection_select(:user_id, User.all, :id, :email) %>
</div>
</div>
<div class="control-group">
<%= f.label :department_id, :class => 'control-label' %>
<div class="controls">
<%= f.collection_select(:department_id, Department.all, :id, :name) %>
</div>
</div>
<div class="control-group">
<%= f.label :status, :class => 'control-label' %>
<div class="controls">
<%= f.select :status, options_for_select(["Open", "In Progress", "Waiting-for-Info", "Closed"]), :class => 'from-control' %>
</div>
</div>
<div class="control-group">
<%= f.label :priority, :class => 'control-label' %>
<div class="controls">
<%= f.select :priority, options_for_select([ "Normal", "High", "Immediate", "Low"]), :class => 'from-control' %>
</div>
</div>
<div class="control-group">
<%= f.label :due_date, :class => 'control-label' %>
<div class="controls">
<%= f.date_select :due_date, :class => 'date_select' %>
</div>
</div>
<% end %>
<h4>Comments</h4>
<div id="comments">
<%= render :partial => #ticket.comments %>
</div>
<%= form_for [#ticket, Comment.new], :html => { :class => 'form-horizontal', :id => 'form2' } do |f| %>
<p>
<%= f.text_area :content, :class => 'text_area' ,:style => 'height:75px; width:600px' %></p></br>
<% end %>
<%= submit_tag nil, :class => 'btn btn-primary', :id => 'submitForm' %>
Am I doing something wrong?
When you call $('#form1').submit();, the page performs an http request. What this means is the page stops executing its javascript and begins performing the actions associated with said http request. (Usually this would be an http post to the form's target, where the data from the form is sent to the server.)
To bypass this, you need to look into ajax calls. An ajax call is an "Asynchronous JavaScript and XML" call, whereby you can perform http requests through your javascript code without interrupting anything else.
Ajax is a bit much to cover in an answer, so I will point you towards some ajax documentation, and the jQuery ajax documentation. You might also want to glance at the HTTP page on wikipedia just to get a better understanding of how the web works.

Rails 4 render js: redirecting to another page and displaying raw js

In my TestimoniesController I have written a render js: line in the event that #testimony.save is not successful.
if #testimony.save
redirect_to #testimony
else
render js: "alert('Please make sure you feel out every field of the Testimonial!');"
end
Instead of rendering the alert that I write, it redirects me to the /testimonies route and just displays the string that was supposed to be rendered as javascript and nothing else. Is my JS disabled somehow?
Here is my new.html.erb file:
<h1> New Testimonial</h1>
<%= form_for :testimony, url:testimonies_path do |f| %>
<p>
<%= f.label :first_name %><br>
<%= f.text_field :first_name %>
</p>
<p>
<%= f.label :last_name %><br>
<%= f.text_field :last_name %>
</p>
<p>
<%= f.label :email %><br>
<%= f.text_field :email %>
</p>
<p>
<%= f.label :contact_number %><br>
<%= f.text_field :contact_number %>
</p>
<p>
<%= f.label :country %><br>
<%= f.text_field :country %>
</p>
<p>
<!--bunch of the same stuff -->
<p>
<%= f.submit %>
</p>
<% end %>
In order tor respond with js, you have to add remote: :true in your form_for, and submit your request as ajax
<%= form_for :testimony, url:testimonies_path, remote: :true do |f| %>
but then your
redirect_to #testimony
will not work as it only works on html format, so in that scenario replace this line with
render js "location.href = '#{testimony_path}'";

Rails:In-place editing in edit form with submit button

I want to create my edit form such that it will display the current user information simply as text not in text filed and when user click on the text it will turn into text field and user can edit his information . Changes will be reflect in data base only when user click on submit button.
Simply it is not completely in place editing and not completely like default edit form it is mixture of the behaviour of both the features.
My form looks like following .it is not complete form these are some of the fields of form.
<%= form_for #contact, :html => { :multipart => true, :class => "contact_form"} do |f| %>
<% if #contact.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#contact.errors.count, "error") %> prohibited this contact from being saved:</h2>
<ul>
<% #contact.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :f_name, "First Name" %><br/>
<%= f.text_field :f_name %>
</div>
<div class ="field">
<%= f.label :experience, "Total years of experience "%><br/>
<%= f.select :experience, (0...30),{},{:class => 'select'} %>
</div>
<div class="field">
<%= f.label :l_name, "Last Name" %><br/>
<%= f.text_field :l_name %>
</div>
<div class = "field">
<%= f.label :primary_practice_area, "Primary practice area" %><br/>
<%= f.select :primary_practice_area , MetaPracticeArea.all.collect {|p| [ p.practice_area, p.id ] } %>
</div>
<div class = "field">
<%= f.label :phone, "Phone" %><br/>
<%= f.text_field :phone %>
</div>
<div class="actions">
<%= f.submit :class => "submit_btn" %>
</div>
<% end %>
and controller and model is default.
You can try the REST_in_place gem: https://github.com/janv/rest_in_place
Check below link for in_place_editing :
http://railscasts.com/episodes/302-in-place-editing?view=asciicast

Replace form index ID after clone

Within a Project form, a user can clone any specific task -- this is working fine. I now need to replace the copied task's index ID (which is a time stamp) with a new time stamp. My current code only replaces a single div.
How can I replace all form input/label field IDs with a timestamp? I current do a find() and then replace.
Any ideas greatly appreciated!
$(function() {
$('form').on('click', '.clone-task', function(event) {
event.preventDefault();
var time = new Date().getTime();
var taskCopy = $(this).parents(".dupForm").clone();
$("#dupTask").append(workoutCopy);
var attributes = taskCopy.find('input').attr('name').replace(/\[\d+]/g, time);
alert(attributes);
});
});
Task Form (ruby-on-rails):
<fieldset>
<div class="field">
<b><%= f.label :name, "Major Task" %></b> |
<%= f.text_field :name, :placeholder => "task name" %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</div>
<div class="field">
<%= f.label :time_start, "Scheduled Time" %><br />
<%= f.time_select :time_start, {:ampm => true, :minute_step => 15} %>
</div>
<div class="field">
<%= f.label :task_duration, "Task Duration(mins)" %>
<%= f.number_field :task_duration, size: 3 %>
</div>
<b>Add Supporting Actions to Your Task</b>
<%= f.fields_for :activities do |builder| -%>
<%= render 'activity_fields', f: builder %>
<% end %>
</div>
<%= link_to_add_fields "Add Action", f, :activities %>
</fieldset>
jQuery attr() method allows you to use a function as argument which will act as a loop to process all matched elements.
taskCopy.find('input').attr('name', function( idx, name){
return name.replace(/\[\d+]/g, time);
});
API refrence: http://api.jquery.com/attr/

Categories

Resources