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
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'm having trouble binding a Boolean view model property to a radio button in .NET Core using tag helpers.
<fieldset class="form-group">
<div class="row">
<label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
<div class="col-sm-10">
<div class="mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" asp-for="AffectsUsers" type="radio" value="true" />
<label class="form-check-label" asp-for="AffectsUsers">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" asp-for="AffectsUsers" type="radio" value="false" />
<label class="form-check-label" asp-for="AffectsUsers">No</label>
</div>
</div>
<span asp-validation-for="AffectsUsers" class="text-danger"></span>
</div>
</div>
</fieldset>
I have a jQuery change event bound to the radio buttons based on ID.
$('#AffectsUsers').change(function() {
if (this.value === 'true') { ... } else { ... }
});
The event only being called for the first radio button. I assume it's because I'm using radio button tag helpers, which are creating multiple inputs with the same ID.
How can I bind the Boolean in my view model to the radio buttons so that the change event will respond appropriately based on the value of the control?
I first overrode the ID like Stephen suggested to ensure valid HTML. Also, I set the "for" tag instead of the "asp-for" tag and changed the ID to reference the specific radio button it links to.
<fieldset class="form-group">
<div class="row">
<label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
<div class="col-sm-10">
<div class="mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" id="AffectsUsersYes" asp-for="AffectsUsers" type="radio" value="true" />
<label class="form-check-label" for="AffectsUsersYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="AffectsUsersNo" asp-for="AffectsUsers" type="radio" value="false" />
<label class="form-check-label" for="AffectsUsersNo">No</label>
</div>
</div>
<span asp-validation-for="AffectsUsers" class="text-danger"></span>
</div>
</div>
</fieldset>
Then I used the name of the radio button instead of the ID in my jQuery:
$('input[type=radio][name=AffectsUsers]').change(function() {
if (this.value === 'true') { ... } else { ... }
});
i have two tables in my database one is notifications another one is notification_expire_types..in notification form i created expire types as radio buttons..how to store those radio button expire_types values in notifications form in codeigniter..please help me
<div class="col-md-12 not_margin">
<div class="form-group">
<label class="col-md-3 control-label txt_view">Expires By</label>
<div class="col-md-9">
<div class="ui-radio ui-radio-pink">
<label class="ui-radio-inline">
<input type="radio" checked name="expire_type_id">
<span>1 Day</span>
</label>
<label class="ui-radio-inline">
<input type="radio" name="expire_type_id">
<span>1 Week</span>
</label>
<label class="ui-radio-inline">
<input type="radio" name="expire_type_id" >
<span>15 Days</span>
</label>
<label class="ui-radio-inline">
<input type="radio" name="expire_type_id" >
<span>1 Month</span>
</label>
</div>
</div>
</div>
// Pass boolean value to third param
// Example:
$radio_is_checked = $this->input->post('expire_type_id') == '1 Day';
echo form_radio('expire_type_id', 'F', $radio_is_checked, 'id=expire_type_id');
Something like above please build your radio buttons
im using bootstraps 3.0.1 and im trying to validate a multiple checkbox, I need to validate one at least. Is there no any way to do this bootstraps? Its hard to believe, but I couldn't find the way.
Here is my html,
<div class="form-group">
<label class="control-label col-lg-4 text-right" for="interes">Categoría:</label>
<div class="controls col-lg-8">
<label class="checkbox inline col-lg-6" for="interes-0">
<input type="checkbox" name="interes" id="interes-0" value="Gastronomía">
Gastronomía
</label>
<label class="checkbox inline col-lg-6" for="interes-1">
<input type="checkbox" name="interes" id="interes-1" value="Moda">
Moda
</label>
<label class="checkbox inline col-lg-6" for="interes-2">
<input type="checkbox" name="interes" id="interes-2" value="Cuidado Personal">
Cuidado Personal
</label>
<label class="checkbox inline col-lg-6" for="interes-3">
<input type="checkbox" name="interes" id="interes-3" value="Espectáculos">
Espectáculos
</label>
</div>
</div>
Thanks.
Twitter Bootstrap doesn't do validation. You can easily Google for a solution.
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}