i'm trying to load a payment form within a modal within a rails form. As it is right now, when I click "Buy Now" the modal will load, but the form will submit. How do I have it not submit until, the someone clicks "Submit" in the modal.
= form_tag foo_path, id: 'payment-form' do
-if #store.products == nil
Test
- #store.products.each_with_index do |product, index|
.row
.col-lg-2
- if current_user
- if store.user_id == current_user.id
= link_to "Delete", product_path(product), data: { method: "delete", confirm: "Are you sure?"}
.col-lg-8
.panel.panel-default
.panel-body
.row
.col-lg-2
%input{:type => "checkbox", :id => "switchName#{index}", :class => "check"}/
%label{:for => "switchName#{index}"}
.col-lg-8
= hidden_field_tag("order_products[][product_id]", product.id)
= product.name
%br
.subheader= number_to_currency(product.cost_in_cents.to_f / 100)
.col-lg-2
= select_tag("order_products[][quanity]", options_for_select([0,1,2,3,4,5,7,8,9,10,11,12,13,14,15]), "data-cost-per-unit" => product.cost_in_cents, id: product.name, class: "drop", :prodindex => index)
.col-lg-2
-if current_user
-else
%span.payment-errors
.text-center
%h2.total-amount
Total:
$0.00
%hr
.text-center
%button.btn.btn-primary.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal"}
Buy Now
By default, when clicking on a <button> element, the containing form is submitted: source.
If you use {"data-target" => "#myModal", "data-toggle" => "modal", "type" => "button"} when creating your button, it should display your modal without submitting the form.
Then, you'll have to handle submitting the form in your modal if that's what you want to happen.
Related
I have a recipe website made with rails and some haml on c9.io. On the show page, I'd like to display the price that the user inputted in a simple form with a dollar sign next to it. I tried using a <p> tag, however the dollar sign appears on another line.
Here is my show.html.haml file:
#post_show
%h1= #post.title
%p.username
Shared by
= #post.user.name
about
= time_ago_in_words(#post.created_at)
.clearfix
.post_image_description
= image_tag #post.image.url(:medium)
.description= simple_format(#post.description)
%h6 Notes:
.notes= simple_format(#post.notes)
%h6 Price:
%p
.price= (#post.price)
.post_data
= link_to "Visit Link", #post.link, class: "button", target: "_blank"
= link_to like_post_path(#post), method: :get, class: "data" do
%i.fa.fa-thumbs-o-up
= pluralize(#post.get_upvotes.size, "Like")
= link_to dislike_post_path(#post), method: :get, class: "data" do
%i.fa.fa-thumbs-o-down
= pluralize(#post.get_downvotes.size, "Dislike")
%p.data
%i.fa.fa-comments-o
= pluralize(#post.comments.count, "Comment")
- if #post.user == current_user
= link_to "Edit", edit_post_path(#post), class: "data"
= link_to "Delete", post_path(#post), method: :delete, data: { confirm: "Are you sure?" }, class: "data"
#random_post
%h3 Check this out
.post
.post_image
= link_to (image_tag #random_post.image.url(:small)), post_path(#random_post)
.post_content
.title
%h2= link_to #random_post.title, post_path(#random_post)
.data.clearfix
%p.username
Share by
= #random_post.user.name
%p.buttons
%span
%i.fa.fa-comments-o
= #random_post.comments.count
%span
%i.fa.fa-thumbs-o-up
= #random_post.get_likes.size
#comments
%h2.comment_count= pluralize(#post.comments.count, "Comment")
- #comments.each do |comment|
.comment
%p.username= comment.user.name
%p.content= comment.content
%h2 Share your opinion:
= render "comments/form"
And here is my posts' form.html.haml:
%div.container
= simple_form_for #post do |f|
= f.input :image
= f.input :title
= f.input :link
= f.input :description
= f.input :notes
= f.input :price
%br
= f.button :submit, class: "btn btn-info"
Help would be greatly appreciated.
EDIT:
So now, I have added the following:
%span .input-group-addon $ .price= (#post.price)
However, the dollar sign is on the top line, and the price is on the bottom.
p is block content so will cause a new line by default in html. You can either handle this with CSS or use something that is inline like a span tag
Haml input with preceding dollar sign just include in your code as you want to:
Or just use classes:
.input-group
%span.input-group-addon $
%input.form-control{:placeholder => "Price", :type => "text"}/
Looks like: http://jsfiddle.net/s6Xu6/1/
I am developing a rails application and i am having a drop down submit form as below,
#container
= form_tag({:controller => "r4d", :action=> "result" }, remote: true, method: :get) do
= label_tag(:q, "Trip Type: ")
= select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
The problem here is, the drop down label appears in an line followed by drop down and submit button in an another line. How can i make this appear in same line. I am using bootstrap scss.
Thanks for your help.
Based on the below answer, i have changed the code to
= form_tag({:controller => "r4d", :action => "result", :class => "form-inline"}, remote: true, method: :get) do
.row
.col-sm-12
.col-sm-4
= label_tag(:q, "Trip Type: ")
.col-sm-4
= select_tag(:q, options_for_select(r4d_options), class: "form-control")
.col-sm-4
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
but there are too much spacing between the form elements and it doesn't looks good.
If you are using haml please try below format for set content in one row
.row
.col-sm-12
.col-sm-6
= label_tag(:q, "Trip Type: ")
= select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
.col-sm-6
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
I have product and order models. Product has many orders and order belongs to product. There is a button 'Order' on product's page, when a user clicks on it, a bootstrap modal opens up. On this modal I render order's form to create a new one.
I want to know, how to pass a product's id to this form on modal?
Currently my button to open modal look like this:
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Order
And the modal itself:
#myModal.modal.fade{:role => "dialog"}
.modal-dialog
.modal-content
.modal-header
%button.close{"data-dismiss" => "modal", :type => "button"} ×
%h4.modal-title Order form
.modal-body
= render 'orders/form'
.modal-footer
%button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
I need this product's id to create a new order, which will belong to the product. If I think in wrong direction, please, correct me.
Many thanks in advance for help!
UPDATE Solved!! Many-many-many thanks to Arup Rakshit (#ArupRakshit)!!!
- #products.last(3).each do |product|
%h4= product.name
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: product.id}} Order
#myModal.modal.fade{:role => "dialog"}
.modal-dialog
.modal-content
.modal-header
%button.close{"data-dismiss" => "modal", :type => "button"} ×
%h4.modal-title Order Form
.modal-body
#new_order
= render 'orders/form', product: product
.modal-footer
%button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
orders/form:
= form_for Order.new do |f|
= f.hidden_field :product_id
= f.text_field :user_name, placeholder: 'Name', class: 'form-control'
= f.submit 'Order', class: 'btn btn-primary'
application.js:
$( document ).ready(function() {
$('body').on('shown.bs.modal', '#myModal', function (e) {
var product_id = $(e.relatedTarget).data('product-id');
$('#order_product_id').val(product_id);
});
});
Keep the product in the modal button using data attribute. Like
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: #product.id}} Order
Inside the form add the hidden field:
= form_for Order.new do |f|
.form-group
= f.text_field :user_name, placeholder: 'Name', class: 'form-control'
= f.hidden_field :product_id
You need to use below JS, to populate the hidden field value.
$('body').on('shown.bs.modal', '#myModal', function (e) {
var product_id = $(e.relatedTarget).data('product-id');
$('#order_product_id').val(product_id);
});
#new_order is the form ID, change it to yours one. Bootstrap modal events.
I'm struggling with haml not injecting the content at the right place, here is part of the haml :
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
The problem is that the holder or holder thick are not inside my container but outside. Why is this? What am I not aligning properly?
Yes, the if should be indented if its content is meant to go into #container.
#container.form-group
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
.holder
= image_tag '/assets/missing_image.png'
if your container is %div.form-group then you have just to indent the rest so that haml understands it's inside that div that your content should go
so it'll look like that
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
I'm trying to follow this post How can I unobtrusively disable submit buttons with Javascript and Prototype? but I can't get it to work. The form triggers an RJS function, so I need to keep the helpers' onclick events intact. The RJS returns/reloads the same forms along with two new texts. I'm really confused. Here is my rails code for the forms:
.span-20#comparison
/ new comparison . . .
/ voting forms (also reloaded)
.span-4.prepend-3.append-6
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 1
= submit_tag "Vote for me", :disabled => false, :disable_with => 'Vote for me', :class => "compare"
.span-4.append-3.last
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 2
= submit_tag "Vote for me", :disable_with => 'Vote for me', :class => "compare"
.span-4.prepend-8.append-8.prepend-top.last
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 'draw'
= submit_tag "Declare Draw", :disable_with => 'Declare Draw', :class => "compare"
RJS
page.replace_html :comparison, :partial => 'poems', :object => #poems
page.insert_html :top, :previous, :partial => 'comparison', :object => #comparison
page << "Effect.ScrollTo($('top'));"
Here's one way you could do it using Prototype:
<script type="text/javascript">
document.observe("dom:loaded" function() {
$$("input .compare").each(function(submit) {
submit.observe("click", function() {
submit = true;
});
});
});
</script>
This adds an onclick event handler to every input element with a compare CSS class (i.e. your submit buttons) when the DOM is loaded. The onclick event handlers disables each button when it's clicked. Note that adding event handlers using Prototype this way does not replace any existing event handlers on the elements.