I'm using an inline three checkbox components in a form, my problem is that when they are not disabled I click on them and they are not checked. Also the disabled is not working .
Any idea?
This is my code
<Form #onsubmit="HandleSubmit">
<InlineField>
<Check TValue="bool" id="#Checkbox1" Inline="true" #bind-Checked="Person.Check1" disabled=#(Action == ActionType.View)>Check 1</Check>
<Check TValue="bool" id="#Checkbox2" Inline="true" #bind-Checked="Person.Check2" disabled=#(Action == ActionType.View)>Check 2</Check>
<Check TValue="bool" id="#Checkbox3" Inline="true" #bind-Checked="Person.Check3" disabled=#(Action == ActionType.View)>Check 3</Check>
</InlineField>
</Form>
Thanks in advance. Guillermo.
Change from id to ElementId and change from disabled to Disabled.
Related
I have a LoginComponent in vue js. I want to add remember me in my login form.
I have a remember me checkbox and if checked sending status true else false.
<input type="checkbox" class="custom-control-input remember" id="customCheck" name="example1">
On controller
$remember_me = $request->has('remember_me') ? true : false;
I want my checkbox checked on login page if i select remember me as checked
My blade template contains a form where data can be inserted like name, mail, etc.
One input field is a toggle checkbox where you can check whether you are an intern or not.
Intern => toggle checked and "Yes" is visible (equals in database 1)
Not intern => toggle is not checked and "No" is visible (equals in database 0)
The checking of the box is working but the status intern or extern isn't sent to the database. Bellow, you will find my code. I don't know if this is the correct way to this.
<input checked data-toggle="toggle" data-on="Yes" {{$person->intern_extern == '1' ? 'checked' : ''}}
data-off="No" {{$person->intern_extern == '0' ? 'checked' : ''}} data-onstyle="primary"
data-offstyle="info" type="checkbox"
name="intern_extern">
As discuss with #N69S , I will suggest you a solution that will require less code.
Your yes/no on the client-side equal 1/0 on server-side.
By default, checkbox into form is not send to server-side if it's not checked.
So, using how request work within Laravel, you can create a checkbox like this one:
<input name="intern_extern" type="checkbox" {{$person->intern_extern == 0 ? 'checked' : ''}}>
Into your controller, when updating a person model, do this:
$person->intern_extern = $request->input('intern_extern', 0);
This is what N69S explain about the $request->input():
yes, by default it is null but you can set it like that when you recover the input trait InteractsWithInput # public function input($key = null, $default = null)
In this case, if the checkbox inter_person is checked, the form will post the input with the value true. If not checked, it will not be send and the value will be 0.
In case you are using this to create your model: $model = Model::create($request->all());, you will have to set the default value into your migration $table->boolean('intern_extern')->default(0); to make all this work.
EDIT - Simple suggestion
When I use boolean, I like to name them like "isSomething". In your case, isIntern or isExtern. So when you have to refer to it, it's simple to read it. isIntern (yes or no) or isExtern (yes/no).
Try it.
<input data-toggle="toggle" data-on="Yes" data-off="No" #if(!empty($person) && $person->intern_extern) {{ 'checked' }} #endif data-onstyle="primary" data-offstyle="info" type="checkbox" name="intern_extern">
here #if(!empty($person) && $person->intern_extern) it'll check $person->intern_extern == 1;
You need to have value="Yes" for this to work which is currently absent from your code.
<input
name="intern_extern"
type="checkbox"
value="Yes"
{{ $person->intern_extern == '1' ? 'checked' : '' }}
data-toggle="toggle"
data-on="Yes"
data-off="No" {{$person->intern_extern == '0' ? 'checked' : ''}} data-onstyle="primary"
data-offstyle="info"
>
BUT, if my memory serves me correctly, you cannot have a "No" value sent to the backend when submitting the form unless you're using some JS to handle this.
Why? Because checkboxes can only really represent one value, in your example if it's checked it will show up as intern_extern = Yes in the request, however, if the checkbox is unchecked it will be absent from the request.
Considering this you may want to switch to a different form control: <select> for example to represent Yes/No. Or continue using the checkbox but just handle it appropriately in PHP code, i.e. if it's not in the request then fill out the DB with No/0
A checkbox input is not sent with the form submission if not checked. You can counter it like this:
<input type="hidden" name="intern_extern" value="0"/>
<input checked data-toggle="toggle" data-on="Yes" #if(isset($person->intern_extern) && $person->intern_extern)checked="checked"#endif
data-onstyle="primary" data-offstyle="info" type="checkbox" value="1" name="intern_extern">
if the checkbox is checked, it will override the hidden input value since it has the same name
I want to show a button if checkbox gets checked and if not checked button will not appear in laravel 5.4. How can I do this.
Suppose you html
<input type="checkbox" name="checkbox" id="checkbox">
In front-end you can check using jQuery
if ($('#checkbox').is(':checked')){
//
}
In back-end you can check using:
if (isset($request->checkbox) {
//
}
you can do this by using jquery
$('#checkbox').change(function(){
if($('#checkbox').is(':checked')){
console.log("asdad");
$('#button').css('display','inline');
}else{
$('#button').css('display','none');
}
})
Or you can verify if checkbox is checked in BackEnd
if($request['checkBoxName'])
return "Checkbox is checked";
else
return "Checkbox is not checked";
Having issue with form validation .
i want to submit the form only when form is valid.
but with the empty inputs and clicking on submit button is submitting the form although the inputs are empty.
<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && addEquipment()" validate>
Inputs be like this.
<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only.">
I cant post the whole code although.
this
f.form.valid is true from form initialization
wanted to acheive something like this
<div *ngIf="!model.equipmentModel && f.submitted" class="text-danger">
Please enter Equipment Model
</div>
So on submit i want to show this message instead of default browser's.
but this f.form.valid is goddamn true from default.
You should add required attribute to your input tags to, then as #Cobus Kruger mentioned, form will not be submitted untill it is filled.
However you can also give a try to pristine, dirty options, which allow you to check if the user did any changes to the form so in this case your condition may look like this:
<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && f.form.dirty ? addEquipment() : ''" validate>
and the input:
<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only." required />
In this case it will check if any changes were applied to the input, and submit the form if both conditions are met.
If you specify the required attribute on the input, then the form will not be submitted unless a value is filled in. But that only covers values that were not supplied and you may want to check for invalid values as well.
The usual way is to disable the submit button unless the form is valid. Like this:
<button type="submit" [disabled]="!f.form.valid">Submit</button>
The Angular documentation about form validation also shows this. Look near the bottom of the "Simple template driven forms" section
In function which you call on submit you can pass form as parameter and then check. In html you will need to pass form instance:
<form name="equipmentForm" #f="ngForm" (ngSubmit)="addEquipment(f)" validate>
In typescript:
addEquipment(form){
if(form.invalid){
return;
}
//If it is valid it will continue to here...
}
I am using
$('#AffiliatedContractorLookup').dataTable().makeEditable
I want to give user the ability to add a new record , so for that purpose I used,
<div class="add_delete_toolbar" />
But this toolbar displays both Add and delete button. I want to hide the delete button. How can I acieve that ?
I know this is an old topic, but I had the same problem. I tried some solutions and here's one that worked for me:
in the file databled-editable you have this line:
if (oDeleteRowButton == null && properties.sDeleteRowButtonId != "") {
oAddDeleteToolbar.append("<button id='" + properties.sDeleteRowButtonId + "' class='delete_row'>Delete</button>");
oDeleteRowButton = $("#" + properties.sDeleteRowButtonId);
oDeleteRowButton.click(_fnOnRowDelete);
}
place it in comment, and the button won't be added
Even easier:
#btnDeleteRow
{
display:none;
}
To have only the "Add" button simply replace
<div class="add_delete_toolbar" />
with
<button id="btnAddNewRow">Add</button>