I have a div with checkboxes, and everytime before checking any of them I want to make sure they are cleared first. Any input on how I can do it?
The HTML code for the div consisting of checkboxes is
<div class="row_bus_groups cuke_business_group">
<div class="row">
<input class="field_checkbox cuke_partners" type="checkbox" id="SelectedBusinessGroups[0]" name="SelectedBusinessGroups[0]" value="Partners">
<label for="SelectedBusinessGroups[0]"><span class="translated_text" rel="BusinessGroups.Partners">Partners</span></label>
<input type="hidden" name="SelectedBusinessGroups[0]" value="">
</div>
<div class="row">
<input class="field_checkbox cuke_press" type="checkbox" id="SelectedBusinessGroups[1]" name="SelectedBusinessGroups[1]" value="Press">
<label for="SelectedBusinessGroups[1]"><span class="translated_text" rel="BusinessGroups.Press">Press</span></label>
<input type="hidden" name="SelectedBusinessGroups[1]" value="">
</div>
</div>
I tried doing
#browser.div(:class, "cuke_business_group").checkbox.each{ |all| all.clear }
You were close. Try this:
#browser.div(:class => "cuke_business_group").checkboxes.each {|checkbox| checkbox.clear}
Related
I'm using Laravel and Bootstrap 4.2.1 and would like to display a form label over two required in-line text fields. I can get the label over the two fields by placing the form label outside of a form group but I am unable to get the red asterisk (*) display next to the form label. I've placed my code here in jsfiddle.
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Try adding a span tag with class="text-danger" or style="color:red" inside the label tag and the * in it. Either way, you will get an * sign with the label.
Below, I have used the bootstrap approach of adding class="text-danger" to the span tag.
<label for="contact_first_name" class="form-label required">Contact Name
<span class="text-danger">*</span>
</label>
<div class="form-group mb-3">
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name" name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
Here is the link to the Jsfiddle.
#AhmadKarimi Thank you for your comment and solution. I just figured it out (by accident) while working on a different form. I needed to drop the label form control down one level inside of the form-group. It doesn't appear to work in jfiddle though.
<div class="form-group mb-3">
<label for="contact_first_name" class="form-label required">Contact Name</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="contact_first_name"
name="contact_first_name" type="text"
placeholder="First Name" value="" required>
</div>
<div class="col-md-6">
<input class="form-control" id="contact_last_name"
name="contact_last_name" type="text"
placeholder="Last Name" value="" required>
</div>
</div>
</div>
I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;
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 want to use select and option in laravel 5.3 in simple HTML form. How to use select and option in laravel 5.3 in HTML form?
My coding:
#extends('layout.navigation')
<html>
<head>
</script>
</head>
<div class="row" id="contact_form">
<div class="col-sm-4">
<form action="{{route('online_form')}}" method="post" enctype="multipart/form-data">
{!!csrf_field()!!}
<br/><br/>
<div class="panel panel-default" id="form_panel">
<div class="panel-body">
<p>fill the form </p>
<input type="text" name="username" class="form-control" placeholder="Name" required>
<br/>
<input type="text" name="email" class="form-control" placeholder="Email" required><br/>
<p style="margin-top:20px;font-size:14px">Gender :     <label
class="radio-inline"><input type="radio" style="margin-top:1px" name="gender"
value="Male">Male</label>
<label class="radio-inline"><input type="radio" style="margin-top:1px"
name="gender" value="female">Female<br/></label>
<p style="margin-top:20px;font-size:14px"> Select Language
:    <label class="checkbox-inline"><input type="checkbox"
name="language" value="english">English</label>
<label class="checkbox-inline"><input type="checkbox" name="language"
value="hindi">Hindi</label>
<br/><br/>
<select id="state">
<option value="rajasthan">Rajasthan</option>
<option value="madhya pradesh">Madhya Pradesh</option>
</select>
<input type="submit" name="submit" value="Enter" class="btn btn-primary" >
</form>
</div>
</div>
To get the state value in the controller method, you can use Input facade.
$state = Input::get('state');
You can include the following as a dependency in composer "laravelcollective/html": "~5.0" and then include it in your config/app
Now, you can create your select dropdown using:
echo Form::select('gender', array('Male', 'Female'));
echo Form::select('language', array('English', 'Hindi'));
and so on.
For more information on this collective,
check this out.
I have two sets of radios:
<div class="form-row">
<div class="field-label">
<label for="part"><span class="style37">Participated</span></label><p class="aste">*</p>
<input type="radio" name="particip" id="particip-yes" value="on" checked> Yes
<input type="radio" name="particip" id="particip-no" value="off">No
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="trav"><span class="style37">Traveled?:</span></label>
<input type="radio" name="traveled" id="traveled-yes" value="on" checked>Yes
<input type="radio" name="traveled" id="traveled-no" value="off">No
</div>
</div>
When I click on particip-no, I need to select traveled-no and disable both travel-yes and travel no. I tried:
Event.observe('particip-no', 'click', function() {
$$('travel-no').checked=true
$$('travel-no').disabled=true
$$('travel-si').disabled=true
alert('no travel');});
The alert shows up, but there are no changes in the radios. Any hints ? Thanks.
If you're selecting by id you just want $ not $$
$('travel-no').checked=true;
$('travel-no').disabled=true;
$('travel-si').disabled=true;
...assuming the id's are correct. You're missing the semicolons too btw