I'm building an app using Laravel and Twitter Bootstrap. And now i've come to a point i where want to use checkboxes. Bootstrap styles the checkboxes automatically which is nice.
But in PHP i can't get the value of the checkbox to determine whether it's checked. Bootstrap seems to use "uniform" to style the checkbox. When i exclude that file i CAN get the value of the checkbox.
I do this to get the value:
$checkbox = Input::get('checkbox', function() {return 0;});
If the input has a value, use the value, else return 0.
It works fine, except when Bootstrap styles the checkbox. With jQuery it's possible to check if the span of the checkbox has the class "checked" but I want to check server-side. But Bootstrap/Uniform doesn't apply "checked" to the checkbox itself.
Are there more people that have the same problem? Or even better, does someone have the solution for this? Thanks!
On form submittal you can always check for the validation of the checkbox:
PHP Code:
<?php if(isset($_POST['$yourName'])){}; ?>
HTML Code:
<div class="form-group input-group-sm">
<label class="col-md-4 control-label" for="$yourName">Your Title</label>
<div class="col-md-1 input-group-sm">
<input id="$yourName" name="$yourName" type="checkbox" class="form-control">
</div>
</div>
Related
I'm having a trouble on how can I check the radio button when the v-models is empty, . If the value of my formfields.status is empty the radio button should automatically checked. Is there anyway trick how to implement it?
This is status value looks like in my dev tools extension when status value is empty
This is what I've tried but nothing works, thanks in advance!.
<div class="checkbox-inline">
<label class="radio mr-2">
<input class="details-input" type="radio" name="status_radio" value="1" v-model="formFields.status" :checked="formFields.status == null"/> Active
</label>
<label class="radio">
<input class="details-input" type="radio" name="status_radio" value="0" v-model="formFields.status"/> Inactive
</label>
</div>
V-model is working with the checked property of radio buttons, so setting that on your own as well might result in faulty behaviour.
When you're using V-model, you'd expect the UI to be always in sync with the data. Note that the "empty selection" state is invalid for radio buttons, there should be one always selected. If you wanted to allow empty selection using an optional select field would be better from UX perspective as well.
So, the easiest way to fix it is disallowing the empty state for your model by providing a default value to the status field, which would control which radio button should be checked by default.
In short:
use "status: 1" in your data to set the default value
remove the :checked bindings from the template
I ve created an edit form CRUD system. It all works well apart from when i want user to be able to edit the date in the form.
The code below is the only way i can get the whole thing working with jquery datepicker, bootstrap and php. At moment the php sits outside the field i want to edit.
So, the datepicker works fine (id=date2) . if i delete the datepicker and give the php a 'value' the date appears in the field ready to be edited but the datepicker obviously doesn't work as ive taken it out of the code.
If i mix the 2 then the php doesn't call the date value into the text field, but the date picker works.
JS file:
$(" #date2" ).datepicker({dateFormat:'yy-mm-dd'}); $("#date2").val('');
<div class="form-group">
<label class="col-md-4 control-label">Date Agent Instructed</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group" >
<span class="input-group-addon" style="cursor:pointer" > <i class="glyphicon glyphicon-calendar" ></i></span>
<input type="text" style="cursor:pointer" placeholder="Click Here To Edit" readonly="readonly" name="date_instructed" id="date2" class="form-control" > <?php echo $row[14];?>
$(".date2").val('');
This piece of code (which was in my js code) is emptying your input field. If you want to keep the original value you are echoing into the field via PHP, you will need to remove this piece of jquery code as it is setting the value to nothing.
Symeon Quimby answered it on a related question,
I have an AngularJs dropdown in witch i set a value selected based on some conditions.
The dropdown work as it should but the only problem is that, if i don't do any action on it, if i submit the form, i wont receive the default value that was selected dinamically.
<!-- Payment Page -->
<div class="form-group">
<label class="control-label">Payment Page *</label>
<select name="payment_page" class="form-control" ng-model="invoice_data.form_data.payment_page">
<option ng-repeat="p_page in invoice_data.data.payment_pages" value="{{ p_page.id }}" ng-selected="(p_page.id === invoice_data.form_data.payment_page || p_page.default)">
{{ p_page.name }}
</option>
</select>
</div>
<!-- /End Payment Page -->
In the inspect element, the dropdown looks good, the option has it's value and so on but, after submitting the form i don't receive the selected value.
If i change, the dropdown selection and submit the form, i receive the value but as for default one no.
I do not know about php. But i can guess, This is because when your drop-down stays untouched ngModel does not get any value. For that when you submit your form you does not get default value. For solution :
You can do 2 way at controller or at html:
1) At html use ng-init directive for initialize ng model to default value.
ng-init="invoice_data.form_data.payment_page = p_page.default ">
2)At controller when your form submit check for null value in ngModel or untouched of select dropdown, if it is null then add your default value.
Thanks Jenny for your time and response...
I have done this way in controller:
angular.forEach(response.data.payment_pages, function(value, key) {
if (value.default) {
$scope.invoice_data.form_data.payment_page = value.id;
}
});
I want to create a form in CakePHP whilst having the SecurityComponent active. So far so good, now I want to add custom input elements which I can't generate using the FormHelper. I do however to have these fields included in the security and validation checks.
The main problem is that I can't render radio buttons outside of their labels. So I render them myself like so:
<div class="radio radio-inline">
<input id="genderMALE" type="radio" name="data[User][gender]" value="MALE"/>
<label for="genderMALE">Male</label>
</div>
<div class="radio radio-inline">
<input id="genderFEMALE" type="radio" name="data[User][gender]" value="FEMALE"/>
<label for="genderFEMALE">Female</label>
</div>
Which in itself works perfectly. Yet the FormHelper has no notice of them so the SecurityComponent registers this as tampering with the form. Blackholing my request.
I tried to generate the inputs using the FormHelper but radio support is limited. The format option does not work here since:
Radio buttons cannot have the order of input and label elements controlled with these settings.
-- Cookbook
Next to that I couldn't find any way to render a plain detached radio button. And the only way I found to have the input accepted was through ignoring it in the SecurityComponent.
What is the Cake way to fix this?
Update 14-09 09:16
My current fix/hack would be to create the custom radio buttons in plain HTML as shown above. Then link the value of those radio inputs to an input field created using the FormHelper. Using CSS I can hide this input allowing it to be changed by JavaScript, as opposed to using type="hidden".
Are there any dangers/problems that could occur using this method?
side note: In the end this is a styling issue. Yet I'm forced to use Bootstrap and have only 2 days left to finish my task. And I don't feel like going down the path of writing custom CSS/JS to get this working.
At the point of getting content with the hack solution, I stumbled upon the FormHelper::$fields field. This field keeps track of all inputs created using the FormHelper and is later used by the SecurityComponent to check whether the form has been tampered with.
The solution does require some additional work as you need to implement the following steps:
Add custom form element the the fields array
Restore value from previous submit (if redirect back to form)
Add default option so field won't be omitted from post data
Working CTP
<div class="radio radio-inline">
<input id="genderMALE" type="radio" name="data[User][gender]" value="MALE"
<?= $this->request->data('User.gender') == 'MALE' ? 'checked' : ''?> />
<label for="genderMALE">Male</label>
</div>
<div class="radio radio-inline">
<input id="genderFEMALE" type="radio" name="data[User][gender]" value="FEMALE"
<?= $this->request->data('User.gender') == 'FEMALE' ? 'checked' : ''?> />
<label for="genderFEMALE">Female</label>
</div>
<input type="radio" name="data[User][gender]" value="" class="hidden"
<?= $this->request->data('User.gender') ? '' : 'checked'?> />
<?php $this->Form->fields[] = 'User.gender' ?>
It is far from pretty, yet I recon it is close to the internals of Cake itself. Might want to create a helper instead of manually implementing the inputs every time.
I'm using Twitter's Bootstrap. After the user enters data in my form, they click a button to register. This loads a modal with a summary of the data they entered for them to confirm. I want to validate the data after they click register, but before the modal loads. How do I do that?
This is one of my form elements
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input id="inputEmail" class = "span11" type="text" placeholder="Email" name = "inputEmail" maxlength="32">
</div>
This loads the modal
<div class="control-group">
<div class="controls">
Register
</div>
Thanks
try this, call function which validate your data. i mentioned how to call function rest you know how to put validation...
<script type="text/javascript">
function rest(){
alert('asdf');
}
</script>
Register
You can take control of how the Modal appears by doing it in javascript. Remove the data-toggle="modal" attribute and instead hook your button to a function that will eventually do:
$('#myModal').modal('show');
You may have to initialise it beforehand or not, depending on your bootstrap version. That would look like:
$('#myModal').modal();
For moar infos:
http://twitter.github.io/bootstrap/javascript.html#modals