I have sign up form. how can I make select and option form for '<%=' format. can you please help me.
<%= form_for(#patient, url: signup_path, :html => {class: 'register-form', :style => "display: inherit"}) do |f| %>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">İsim</label>
<div class="input-icon">
<i class="fa fa-font"></i>
<%= f.text_field :name, class: 'form-control placeholder-no-fix', :placeholder => "İsim" %>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Ülke</label>
<select name="country" id="select2_sample4" class="select2 form-control">
<option value="">Ülke Seçiniz...</option>
<option value="Türkiye">Türkiye</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
</select>
</div>
<button type="submit" id="register-submit-btn" class="btn green-haze pull-right"> Kayıt ol </button>
Your question is kind of vague; however, I think I get what you're asking. It looks like your data for the select field is static, so you may try it like this:
Then use the following instead of the HTML you have there:
<%= select_tag(:country, options_for_select([['Select Country', '0'], ['Albania', 'Albania']], '0'))%>
This will generate the following:
<select name="country" id="country">
<option value="0" selected="selected">Select Country</option>
<option value="Albania">Albania</option>
</select>
If you wanted to have a different default selected, just specify it at the end. For example:
<%= select_tag(:country, options_for_select([['Select Country', '0'], ['Albania', 'Albania']], 'Albania'))%>
Generates:
<select name="country" id="country">
<option value="0">Select Country</option>
<option selected = "selected" value="Albania">Albania</option>
</select>
Hope that helps.
Related
in _form.html.erb file I wrote:
<%= f.number_field :tov_id %>
and that code produce this html :
<input type="number" value="3" name="price[tov_id]" id="price_tov_id" />
this code:
<%= select_tag(:tov_id, options_for_select(#tovs,2), :prompt => "select tov" ) %>
make this html
<select name="tov_id" id="tov_id">
<option value="">select tov</option>
<option value="1">brake pad</option>
<option selected="selected" value="2" >nut</option>
<option value="3">bolt</option></select>
as we can see : the second parameter to option_to_select respond to selected option
But when I wrote this:
<%= select_tag(:tov_id, options_for_select(#tovs , :tov_id ), :prompt => "Select tov" ) %>
no any selected appear :(
<select name="tov_id" id="tov_id"><option value="">Select tov</option><option value="1">brake pad</option>
<option value="2">nut</option>
<option value="3">bolt</option></select>
How can I get the value from :tov_id and put it to options_for_select ?
I want to fill in some options which trigger the downloading of a file, using the Mechanize gem.
The HTML is the following.
<div>
<form action="" id="label_selectors" method="post">
...
...
<div class="source form_options">
<select name="source" id="source">
<option value="btce" selected="selected">Btc-e</option>
<option value="cryptsy">Cryptsy</option>
<option value="796">796</option>
<option value="bitstamp">Bitstamp</option>
<option value="formulas">Altcoin Indexes</option>
</select>
</div>
<div class="label form_options">
<select name="label" id="label">
</select>
</div>
<div class="period form_options">
<select name="period" id="period">
<option value="15m">15 minute</option>
<option value="1h" selected="selected">1 hour</option>
<option value="1d">1 day</option>
</select>
</div>
<div class="presense form_options">
CSV: <input type="radio" name="presence" value="csv"> Chart: <input type="radio" name="presence" value="chart" checked="checked">
</div>
<div class="submit form_options">
<input type="submit" name="submit" value="OK">
</div>
</form>
</div>
I tried to do something like this:
form = page.forms.first
form.source = "btce"
form.label = "BTC/USD"
form.period = "1d"
form.presense = "csv"
form.submit
However, it doesn't work:
NoMethodError: undefined method `presense=' for #<Mechanize::Form:0x007fb878dc7f98
(the typo presense rather than presence appears in the page)
How could I fill in this form correctly?
It looks like the presence input is a radio button.
To select a radio button with mechanize you'll want something like:
form.radiobuttons_with(name: 'presence')[0].check
There's other ways to select radio buttons with mechanize - you can see them here: http://docs.seattlerb.org/mechanize/GUIDE_rdoc.html
I have a rails form new.html.erb.
When I go to this link manually I get 200 OK on its get request.
But when I come to this page from another page,lets say my root page, I get 304-not modified http status code because of which I think some of my document.ready code is not getting executed properly.
Here is my new.html.erb file
<div class="ui padded page grid">
<div class="ui eight wide column">
<%=form_for #listing, :html=> { class:'ui form centered teal segment'},remote: true do |f|%>
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<a class="ui teal ribbon label">
New Listing</a>
<h2 class="ui header">
<i class="settings icon"></i>
<div class="content">
Create New Listing
<div class="sub header">Manage your preferences</div>
</div>
</h2>
<div class="required field">
<label>Title</label>
<%=f.text_field :title,placeholder:'Title of the listing'%>
</div>
<div class="two fields">
<div class="required field">
<label>Pet</label>
<%= f.select(:pet_type,options_for_select([['Dog',1,{class:'item'}],['Cat',2,{class:'item'}],['Bird',3,{class:'item'}]]),{prompt:'Pet'},class:'ui dropdown pet_type')%>
</div>
<div class="field">
<label>Breed</label>
<%= f.select(:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.id,class:'item']}),{prompt:'Breed'},class:'ui dropdown disabled breed_type')%>
</div>
</div>
<div class="two fields">
<div class="required field">
<label>Gender</label>
<%= f.select(:gender,options_for_select([['Male',1,{class:'item'}],['Female',2,{class:'item'}]]),{prompt:'Gender'},class:'ui dropdown gender')%>
</div>
<div class="field">
<label>State</label>
<select class="ui search dropdown">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="required field">
<label>Tell everyone in short about your pet</label>
<%=f.text_area :love_for_pets%>
</div>
<h4 class="ui dividing header">Additional Info</h4>
<div class="two fields">
<div class="required field">
<label>Price</label>
<div class="ui icon input">
<%=f.text_field :price,placeholder:"Price"%>
<i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Phone Number</label>
<div class="ui icon input">
<%=f.text_field :phone_no,placeholder:"Phone_no"%>
<i class="call icon"></i>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hot-deals">
<label>I agree to the Terms of Service.</label>
</div>
</div>
<div class="ui error message">
<div class="header">We noticed some issues</div>
</div>
<%=f.submit 'Register',class:'ui button'%>
<div class="ui error message"></div>
<%end%>
</div>
<div class="ui eight wide column">
<div class="ui teal segment dropzone" id="media-dropzone">
<!--p class="dz-default dz-message"><span>Drop files here to upload</span>
</p-->
<h2 class="ui center aligned icon header dz-message">
<i class="upload icon"></i>
<div class="content">
Upload File
<div class="sub header">Drop your images here</div>
</div>
</h2>
</div>
</div>
</div>
Because of this my dropzone does not get initialized.Also the semantic ui dropdown fail to display.
I am assuming the reason behind this is that the document.ready is not getting hit, because of which the dom elements initialization is not happening.
/listing.js.erb/
$(document).ready(function()
{
/*Dropzone.options.mediaDropzone=false;*/
Dropzone.autoDiscover = false;
mediaDropzone=new Dropzone('div#media-dropzone',
{
url:"/listings/media",
headers:
{
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
autoProcessQueue:false,
addRemoveLinks:true,
parallelUploads: 10
});
mediaDropzone.on("success",function(file,responseText)
{
console.log(responseText.file_name.url);
console.log(responseText);
});
});
/ListingController/
class ListingsController < ApplicationController
def new
#breeds=Breed.all
session[:listing].destroy
#listing=Listing.new
end
def create
#listing=Listing.new(listing_params)
if #listing.save
session[:listing]=#listing.id
respond_to do |format|
format.js
end
end
end
def media
#listing=Listing.find(session[:listing])
puts params
#photo=Photo.new(file_name:params[:file],listing:#listing)
if #photo.save!
respond_to do |format|
format.json{render :json=>#photo}
end
end
end
private
def listing_params
params.require(:listing).permit!
end
end
/routes.rb/
Rails.application.routes.draw do
root 'prime_petz#home'
get 'prime_petz/home'
get 'prime_petz/about'
get 'prime_petz/contact'
post 'listings/media'
resources :listings
resources :prime_petz
end
The 304 status code doesn't imply there is an error. It means that the asset files match with that of browsers. In Rails 3.2.3 server I get error 304 Not Modified (5ms)
http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#3xx_Redirection
This looks like it's an issue with turbolinks.
Turbolinks in Rails disables the document.ready() when navigating inside the app. Either you will have to disable it in the link option:
<%= link_to('foo', #foo, 'data-no-turbolink' => true) %>
Or you will have to install the turbolinks jquery gem:
https://github.com/kossnocorp/jquery.turbolinks
I have a model (Listing) that has many, many attributes (say 25).
I would like to create an AJAX form that is dynamic based on the input in the form.
Meaning that if a user chooses type=b, they will see other fields that they should see and not ones they shouldn't.
Ideally they should load immediately, with the right content from the db - i.e. in an AJAXy way.
What's the best way to approach this?
Thanks.
Edit: Here is an example of my _form.html.erb. You will notice that I have included 2 if statements that indicate which fields should show if the property_type value chosen is one of those specified:
<%= simple_form_for(#listing) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :headline %>
<%= f.input :price %>
<%= f.association :property_type %>
If property_type == "coop"
<%= f.input :maintenance %>
<%= f.input :coop_deductible %>
<%= f.input :flip_tax %>
if property_type == "condo"
<%= f.input :common_charges %>
<%= f.input :taxes %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
Edit 2:
This is the Rails form helper that I used - powered by the gem Simple_Form:
<%= simple_form_for #listing, :defaults => { :wrapper_html => { :class => 'form-horizontal' } } do |f| %>
<%= f.error_notification %>
<fieldset>
<%= f.association :listing_category, :label => "Category: ", :label_html => { :class => "control-label"}, :wrapper_html => { :class => "controls"} %>
<div style="display: none;" data-show-for="Exclusive">
<%= f.association :listing_type %>
<%= f.association :user %>
<%= f.association :boro %>
</div>
<div style="display: none;" data-show-for="Open">
<%= f.association :neighborhood %>
<%= f.association :building %>
<%= f.association :term %>
<%= f.association :property_type %>
</div>
<div class="form-actions">
<%= f.button :submit, :class => "btn btn-primary" %>
<!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
<button type="reset" class="btn">Cancel</button> -->
</div>
</fieldset>
<% end %>
This is the HTML it produced:
<form accept-charset="UTF-8" action="/listings" class="simple_form new_listing" id="new_listing" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="1oDfg41Wx/SiPCsvf4qTAcxhFUGSNlhlLfkMy8nHW1E=" /></div>
<fieldset>
<div class="control-group select optional controls"><label class="select optional control-label control-label" for="listing_listing_category_id">Category:</label><div class="controls"><select class="select optional" id="listing_listing_category_id" name="listing[listing_category_id]"><option value=""></option>
<option value="1">Exclusive</option>
<option value="2">Open</option></select></div></div>
<div style="display: none;" data-show-for="Exclusive">
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_listing_type_id">Listing type</label><div class="controls"><select class="select optional" id="listing_listing_type_id" name="listing[listing_type_id]"><option value=""></option>
</select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_user_id">User</label><div class="controls"><select class="select optional" id="listing_user_id" name="listing[user_id]"><option value=""></option>
<option value="1">First User</option>
<option value="2">Second User</option>
<option value="3">Third User</option>
<option value="4">Fourth User</option>
<option value="5">Fifth User</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_boro_id">Boro</label><div class="controls"><select class="select optional" id="listing_boro_id" name="listing[boro_id]"><option value=""></option>
<option value="1">Brooklyn</option></select></div></div>
</div>
<div style="display: none;" data-show-for="Open">
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_neighborhood_id">Neighborhood</label><div class="controls"><select class="select optional" id="listing_neighborhood_id" name="listing[neighborhood_id]"><option value=""></option>
<option value="1">Prospect Heights</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_building_id">Building</label><div class="controls"><select class="select optional" id="listing_building_id" name="listing[building_id]"><option value=""></option>
<option value="1">Trump Towers</option></select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_term_id">Term</label><div class="controls"><select class="select optional" id="listing_term_id" name="listing[term_id]"><option value=""></option>
</select></div></div>
<div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_property_type_id">Property type</label><div class="controls"><select class="select optional" id="listing_property_type_id" name="listing[property_type_id]"><option value=""></option>
<option value="1">Coop</option></select></div></div>
</div>
<div class="form-actions">
<input class="btn btn btn-primary" name="commit" type="submit" value="Create Listing" />
<!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
<button type="reset" class="btn">Cancel</button> -->
</div>
</fieldset>
</form>
This is the JS that I included in my listing.js - which corresponds to the file that this form is on app/views/listings/new.html.erb
$(document).ready(function({
$('#listing_listing_category_id').on('change', function(){
var option = $(this).find(':selected');
$('[data-show-for]').hide(); //And maybe reset?
$('[data-show-for="+ option.text +"]').show()
});
});
When I chose the option I want, it doesn't show me the fields I want to see.
Personally I wouldn't use AJAX, just straight JS/JQuery to show/hide on click using data attributes.
See fiddle: http://jsfiddle.net/XnPZF/
First, add the data attributes to the sections you want to hide/show:
<div style="display: none;" data-show-for="coop">
<%= f.input :maintenance %>
<%= f.input :coop_deductible %>
<%= f.input :flip_tax %>
</div>
<div style="display: none;" data-show-for="condo">
<%= f.input :common_charges %>
<%= f.input :taxes %>
</div>
Then create a change event on the select:
$('#listing_property_type').on('change', function(){
var option = $(this).find(':selected');
$('[data-show-for]').hide(); //And maybe reset?
$('[data-show-for='+ option.text() +']').show()
});
For data-show-for, you can use Option text or value, just be sure to make sure the event knows which. If you plan to use this a lot of times, you could generalize it, but that would mean building your options.
A few days ago, my signup form for an app I'm building was working fine. The 'create my account' button would work even if no form fields were filled, and an error message would be displayed right away. Now, when I try to submit the form, the form only will submit or show error messages when all of the fields have been filled. If I try to submit the form without filling all of the fields, nothing happens. The signup button doesn't work correctly.
The only significant change that I made that I can think of is switching the stripe plan I was using to a free trial plan instead of a plan where the purchaser of the application pays up-front. I have no idea what could be causing this problem, so I don't know what code I should post. Any help you can provide would be appreciated.
The signup form I have in rails is as follows(minus some javascript that I'm using for Stripe):
<div class="row">
<div class="span6 offset4">
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Password confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.label :morning_meds, "Do you take medications in the morning?" %>
<%= f.select :morning_meds, [['Yes'], ['No']] %>
<%= f.label :lunch_meds, "Do you take medications at lunch?" %>
<%= f.select :lunch_meds, [['Yes'], ['No']] %>
<%= f.label :night_meds, "Do you take medications in the evening?" %>
<%= f.select :night_meds, [['Yes'], ['No']] %>
<%= f.label :time_zone, "Choose your time zone" %>
<%= f.select :time_zone, [['Eastern'], ['Central'], ['Mountain'], ['Pacific']] %>
<%= f.label :phone_number, "Your cell phone number" %>
<%= f.text_field :phone_number %>
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<%= select_month nil, {add_month_numbers: true}, {name: nil, class: 'card-expiry-month' } %>
<span> / </span>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, class: 'card-expiry-year' } %>
</div>
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
<div class="row">
<div class="span6 offset4">
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="QqrFVykfeY1+9jImvp8VjTzrQxq8VlBF+vC6V85klw0=" /></div>
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Password confirmation</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<label for="user_morning_meds">Do you take medications in the morning?</label>
<select id="user_morning_meds" name="user[morning_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_lunch_meds">Do you take medications at lunch?</label>
<select id="user_lunch_meds" name="user[lunch_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_night_meds">Do you take medications in the evening?</label>
<select id="user_night_meds" name="user[night_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_time_zone">Choose your time zone</label>
<select id="user_time_zone" name="user[time_zone]"><option value="Eastern">Eastern</option>
<option value="Central">Central</option>
<option value="Mountain">Mountain</option>
<option value="Pacific">Pacific</option></select>
<label for="user_phone_number">Your cell phone number</label>
<input id="user_phone_number" name="user[phone_number]" size="30" type="text" />
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<select class="card-expiry-month" id="date_month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<span> / </span>
<select class="card-expiry-year" id="date_year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select>
</div>
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
It'd be helpful to see the HTML source your view generates, but you likely have 1+ fields with the HTML5 required attribute that you are leaving blank.
By default, newer browsers like Chrome will not allow the form to submit until all fields flagged with the required attribute have a value. To stop this you can add the novalidate attribute to the <form ... tag.
<%= form_for(#user, { :novalidate => true }) do |f| %>