I want to change the value of a Ruby local parameter in my .erb file when a user clicks on a bit of text. (I am using Ruby with Sinatra, not Rails). The code looks like this:
<div class="modal-body">
<!-- Get ERB to work here -->
<p><i>No account? Register here</i></p> <!-- Should change new_user to true if clicked -->
<form class="input-group" style="margin: 0 auto" method="POST" action="/nanotwitter/v1.0/users/session">
<input class="form-control" type="text" name="username" placeholder="Username">
<br><br>
<input class="form-control" type="password" name="password" placeholder="Password">
<% if new_user %>
<br><br>
<input class="form-control" type="password" name="password2" placeholder="Repeat password">
<% end %>
<br><br>
<div class="input-group" style="margin: 0 auto">
<button type="button" class="btn btn-default form-control" style="width: 50%" data-dismiss="modal">Close</button>
<button class="btn btn-primary form-control" style="width: 50%" type="submit">
<% if new_user %>
Register
<% else %>
Log In
<% end %>
</button>
</div>
</form>
</div>
So obviously the Ruby code in the onlick attribute evaluates immediately, and I want it to only execute when the user clicks. I've searched this site and the internet, and I'm still not sure what the correct/standard implementation for this would be.
First, ruby dont interact with user events. Javascript does.
Second, what is new_user ? Simple variable? You want to use it to, say, swap forms for sign up\ sign in ? Or you want user to really register through this method?
If the case is to show sign in\ sign up form to user based oh his choice (new\registered), you should do it with only javascript.
In general, you should prepare markup for two different forms (register\login) and hide them according to some javascript variable, which user can choose.
Related
In my .nercore razor page project I have a number of forms with multiple onPost handlers - different buttons for different events (eg. add / copy / edit / delete)
My problem is - I do not understand how I can differentiate client-side validation depending on the button pressed.
EDIT
Let's assume, I have the following .cshtml which defines two input data fields and two buttons. By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B):
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
<button type="submit" value="Copy" class="btn btn-warning">Edit Record</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
at the end of my .cshtml page, but it runs always when onPost is called.
I need to run validation "in groups": for one button set of one fields and ignore others, for another - another set and so on like written above
Is there any way to achieve it without writing custom javascript or do it on server side?..
ANOTHER EDIT
The answer was provided for the case where we have clear separation of input fields / buttons. But how can we handle this if we have two input fields and one button. Validation should NOT be fire if either of them is filled in and should fire if both are null. I understand, this sounds a bit strange, but in my example I have one input field and one dropdown-list. So, either a field should be filled-in or an item should be selected from the list, but for code simplicity let's stay with two input fields (Filed A and Field B, one of them should be filled) and one button:
#page "{id:int}/{modeR:int}"
#model MyProject.Pages.MyProjectDB.AddRecordModel
#{
ViewData["Title"] = "Add Record";
}
<div class="row">
<div class="col-md-7">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" value="Add" class="btn btn-success">Add Record)</button>
</div>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Thanks in advance!
By pressing one button (Add) the first Field A should be validated, by pressing the second (copy) - another one (Field B) should be validated
You can try to put them in separate <form> and specify handler method via the asp-page-handler attribute, like below.
<h1>Go Add Handler</h1>
<form method="post">
<div class="form-group">
<label asp-for="myClass.FieldA" class="control-label"></label>
<input asp-for="myClass.FieldA" class="form-control" />
<span asp-validation-for="myClass.FieldA" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Add" class="btn btn-success" asp-page-handler="Add">Add Record</button>
</div>
</form>
<hr />
<h1>Go Copy Handler</h1>
<form id="myform" method="post">
<div class="form-group">
<label asp-for="myClass.FieldB" class="control-label"></label>
<input asp-for="myClass.FieldB" class="form-control" />
<span asp-validation-for="myClass.FieldB" class="text-danger"></span>
</div>
<div>
<button type="submit" value="Copy" class="btn btn-warning" asp-page-handler="Copy">Edit Record</button>
</div>
</form>
#section scripts{
#await Html.PartialAsync("_ValidationScriptsPartial")
}
Test Result
I am working on the live search of an HTML form in which if I type La, everything should show up related to La. For Example: La Man, La Fa etc.
The HTML code which I have used for that are:
<form autocomplete="off" id="search_form" method="GET" action="/search/helloWorld/{chars}">
<div style="padding-top:18%;margin-left:auto; margin-right:auto;">
<!--
<div class="dates">
<div class="start_date" style="width:50%;margin-right:3%;">
<input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
</div>
<div class="end_date" style="width:50%;margin-left:3%;">
<input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
</div>
</div>
-->
<button type="submit" class="btn btn-default start_search_button" style="padding-left:12%;padding-right:12%;background-color: rgb(247, 144, 99);" >start search</button>
</div>
</form>
The routing which I have done for the routes.php file is:
//helloworld routes
Route::get('search/helloWorld/{chars}','SearchController#helloWorld');
Problem Statement:
I am wondering if I have written action="/search/helloWorld/{chars}"> in the right way in the html code above. Do we write form action by seeing the routes in in Laravel (5) ?
If u are using laravel 5.4, try this:
Add name to your route for convenient mapping like so:
Route::get ('/search/helloworld/{id}', Controller#method)->name ('search');
Then in your form,map your action to the name of the route;
<form action="{{ route ('search', $char->id) }}">
etc..
Please replace my $char->Id with your real params
Sorry im sending this on a mobile.Hope it helps.
I'm trying to test a simple login form using cucumber / rspec / capybara. But I'm having trouble detecting elements on the page and doing any sort of test.
Unable to find field "username" that is not disabled (Capybara::ElementNotFound)
Feature File
Feature: Login
Scenario: correct login credentials
Given I am on the admin_login page
When I fill in "username" with "thomas"
ENV
require 'capybara'
require 'rspec'
require 'capybara/cucumber'
require 'rack'
require_relative '../../config'
ENV['RACK_ENV'] = 'test'
Capybara.ignore_hidden_elements = false
Capybara.app = Sinatra::Application
class Sinatra::ApplicationWorld
include RSpec::Expectations
include RSpec::Matchers
include Capybara::DSL
end
World do
Sinatra::ApplicationWorld.new
end
WEB STEP
When /^(?:|I )fill in "([^\"]*)" with "([^\"]*)"(?: within "([^\"]*)")?$/ do |field, value, selector|
with_scope(selector) do
fill_in(field,visible: false, :with => value)
end
end
HTML
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In To Pied Piper</h3>
</div>
<div class="panel-body">
<form role="form" action="/admin/login" method="post" label="form">
<fieldset label ="form" >
<div class="form-group">
<input label="username" class="form-control" placeholder="username" name="username" id="username" type="text" value="<%= params[:username] %>" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="<%= params[:password]%>">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<button type="submit"><a class="btn btn-lg btn-success btn-block">Login</a></button>
<button>Return to Main Site</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
I got the same problem with my rails appliction and the way I solved it was by giving an id to that field
<%= f.text_field :name, class: 'form-control',id:"name" %>
I'm having an issue where the form generated with ruby isn't included inside my #content div, is this because the form is generated after the html is read by the browser (sorry if I sound like a moron on this)
-- edit update - view source --
The code below generates with the email box and submit button outside of the content box
<div id="content">
<!-- text here -->
<form accept-charset="UTF-8" action="/password_resets" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="afmtpSAc93w1uMcnouhY9XmbVTM7fE1VNFvZKnp0kMs=" />
</div>
<div class="field">
<input id="email" name="email" placeholder="email#website.com" type="text" />
</div>
<div class="actions">
<input name="commit" type="submit" value="Reset Password" />
</form> </div>
</div>
I'm not sure I got the question right, but in the html above the last </form> </div> should be </div> </form>
figured it out after visiting this link
Is it correct to use DIV inside FORM?
once I removed the div's for field and action it cleared everything up
I've been trying to use the field-validation framework in Struts2 and have it implemented. The problem is when doing an AJAX call with jquery tags, it targets a resulting div when I want to reload the same page with the fielderror.
<div class="myform">
<s:form id="userForm" action="users" theme="simple">
<h1>Search for Users</h1>
<p><s:fielderror /></p>
<label>Username
<span class="small">Add your name</span>
</label>
<s:textfield id="username" name="username"/>
<label>Point Minimum
<span class="small">Min. 0 points</span>
</label>
<s:textfield name="pointMin"/>
<label>Point Maximum
<span class="small">Max. 5000 points</span>
</label>
<s:textfield name="pointMax"/>
<label>Rate Minimum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMin" name="rateMin"/>
<label>Rate Maximum
<span class="small">Percentage</span>
</label>
<s:textfield id="rateMax" name="rateMax"/>
<s:hidden name="searchButtonHit" value="%{true}"/>
<sj:a formIds="userForm"
targets="listingDisplay"
button="true"
validate="only"
type="submit"> Search
</sj:a>
<div class="spacer"></div>
</s:form>
</div>
<div class="spacer"></div>
<div id="listingDisplay"></div>
The <sj:a> tag targets the listingDisplay div so the fielderror as well as the same form is loaded underneath which looks very strange. Is there a better way of doing this? Thanks!
Have a look at the below validation link. It adds a string errorhere to the error message and checks for it after response. You can also do this to reload the page and the reload code can be written in 's onSuccessTopics.
Ajax Validation
Method 2
Very simple but may not work on all browsers.
Set the targets attribute of
<sj:a targets="myform">
to the same div, within which the form exists.