I am trying to do model binding for checkbox using angular js. Checkbox value are binding properly but its not showing as selected even value are true for check box.
Below are the code
<input type="checkbox" id="checkboxDontKnowWaistSize" required value="True" ng-value="True" name="ServiceObject.DontKnowWaistSize" data-ng-model="BodyMassIndexForm.DontKnowWaistSize" class="checkbox" data-ng-init="BodyMassIndexForm.DontKnowWaistSize=True" >
Try the attribute ng-checked:
Extract from the angular 1.2.1 sourcecode:
#description
* The HTML specification does not require browsers to preserve the values of boolean attributes
* such as checked. (Their presence means true and their absence means false.)
* This prevents the Angular compiler from retrieving the binding expression.
* The `ngChecked` directive solves this problem for the `checked` attribute.
* #example
<doc:example>
<doc:source>
Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">
Related
I am rendering a form with Blade, Laravel's server-side templating language. The default values for the form elements are assigned by Blade. There is no JavaScript involved until now. Now I want to implement a reset button.
When a user presses the reset button the form should be cleared. A simple HTML reset button is not sufficient as it would not reset the "value=something" default values to "null".
In other words:
<input type="text" name="fullname" value="John Doe">
is supposed to be
<input type="text" name="fullname" value="">
after the user pressed the reset button.
With JQuery I would do something like this:
$("body").find('form').find('input').val('');
How can I do it with vue.js? Adding av-model and setting the v-model properties to null interferes with the server side default values...
In general: would you suggest to add a DOM manipulating lib to the application for such "hybrid" use cases where vue.js does not control the data?
If you plan on using vue, forget about altering the dom, vue works around states so imagine your input is like this
<input type="text" v-model="test_input">
and when you change the variable test_input the input automaticly changes its value, so just set it to empty in a method.
<button #click="clear_form"> Clear </button>
<script>
export default {
data() {
return {
test_input : ''
}
},
methods:{
clear_form(){
this.test_input = '';
}
}
}
</script>
I ended up writing a reset-form button component. In this component I use plain Javascript to get all input, select, ... fields of the form identified by an id and reseted the values to ''.
I took this option as it was the fastest way to reset the form and I don't have to change anything (e.g. add props, change ajax calls) if my form changes.
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'm trying to create an edit page, which brings all of the original values from the database in at first, then let's the form_validation library take over afterwards. I have managed to get everything working as intended but checkboxes and radio buttons.
Here's an example of my form, pretty generic...
<input type="checkbox" name="protocols[]" value="online" <?php echo set_checkbox('protocols[]', 'online');?> />
<input type="checkbox" name="protocols[]" value="network" <?php echo set_checkbox('protocols[]', 'network');?> />
<input type="checkbox" name="protocols[]" value="splitscreen" <?php echo set_checkbox('protocols[]', 'splitscreen');?> />
The database values return as a comma separated string (online,splitscreen).
I also have another 3 field checkbox array to populate, a 9 field checkbox field, and a 3 field radio section to fill.
Any help would be greatly appreciated, thanks.
Remove the brackets from the field name in your call to set_checkbox():
<input type="checkbox" name="protocols[]" value="online" <?php echo set_checkbox('protocols', 'online');?> />
<input type="checkbox" name="protocols[]" value="network" <?php echo set_checkbox('protocols', 'network');?> />
<input type="checkbox" name="protocols[]" value="splitscreen" <?php echo set_checkbox('protocols', 'splitscreen');?> />
The form validation library will take care of checking the box or not, but it responds to the $_POST array only, so you'll have to use the third parameter to get the inputs checked by default:
set_checkbox()
Permits you to display a checkbox in the state it was submitted. The
first parameter must contain the name of the checkbox, the second
parameter must contain its value, and the third (optional) parameter
lets you set an item as the default (use boolean TRUE/FALSE).
Not a great explanation, but here's an example. First get your values from the comma separated string:
The database values return as a comma separated string (online,splitscreen).
// Something like this
$values = explode(',', $my_data); // Now it's an array
Then check if each checkbox's value is in that array:
<?php echo set_checkbox(
'protocols',
'splitscreen',
in_array('splitscreen', $values) // TRUE checks the box, FALSE does not
);?>
I'd do this in a loop for convenience reasons if nothing else. It's also worth looking at form_checkbox() which will make this a good deal easier.
See user guide for details: http://ellislab.com/codeigniter/user_guide/helpers/form_helper.html
I've read through a lot of questions addressing similar question but I can't get a grip on it, yet.
I have a simple HTML form just like
<form id="edit-items" name="edit-items" onsubmit="saveItems();">
<input type="submit" value="Save">
<input class="item" id="ei81" type="hidden" name="i[81]" value="1">
<input class="item" id="ei124" type="hidden" name="i[124]" value="1">
</form>
The two existing hidden inputs could be set upon document loading due to a prior save.
Now I have images (kind of a menu). If they are clicked a corresponding hidden input is appended to the form:
<img id="i37" class="clickable-item" src="items/i37.gif" title="item name" onclick="addItem(37,1)" />
The addItem function:
function addItem(id,n) {
var zitem = $("#e"+id);
if ( 0 in zitem ) {
if ( zitem.val() > 0 ) {
var newcnt = parseInt(zitem.val()) + n;
if ( newcnt <= 0 ) {
zitem.remove();
}
else {
zitem.val(newcnt);
}
}
}
else if(n == 1) {
var iform = $("#edit-items");
iform.append("<input class=\"item\" id=\"e"+id+"\" type=\"hidden\" name=\"i["+id+"]\" value=\"1\">");
}
}
This part all works correct, after clicking the image, my form looks like
<form id="edit-items" name="edit-items" onsubmit="saveItems();">
<input type="submit" value="Save">
<input class="item" id="ei81" type="hidden" name="i[81]" value="1">
<input class="item" id="ei124" type="hidden" name="i[124]" value="1">
<input class="item" id="ei37" type="hidden" name="i[37]" value="1">
</form>
which is exactly what I want. But then when hitting the submit button only the first two elements are submitted (the ones which have not been added dynamically).
Now, I read a lot about .bind and .live handlers but I am missing some point obviously. I tried to delete the onclick attribute on the images and to bind the .live to them since they are causing the new inputs:
$(".clickable-item").live("click", function() {
addItem($(this).attr("id"),1);
});
However, the ID is not transferred which is needed, though (hence no correct input is added). I learned that .live doesn't bind the handler to any elements but to the event.
Is it even possible to pass the element which has been clicked to the live handler?
Should the images even be watched by .live or should it be bound to something else?
The last thing I learned form another question here is that the inputs should be watched by .live, since they are dynamically added. But what kind of event I would attach? The inputs themselves are not clicked.
I would really appreciate any help as I am cracking my head and starting to get lost on that one.
Thanks in advance,
Paul
Regarding live() [docs]: this refers to the clicked element, so you can pass it to addItem with addItem(this, 1). This part of your code should work.
If you don't add or remove images dynamically then there is no reason to use live. You can just use click() [docs] (and yes, don't use onclick in the HTML).
But I see another problem:
The image id is i37. $(this).attr("id") will return this value.
In your addItem function you then take this value and perform string concatenation. The result will be $("#ii37") (note the two is).
The input element you create will have the id ii37 and not i37.
If you correct this to match it with the other elements like in your example (i.e. i37) , you will have problems because you have several elements with the same id (the input element and the image). If the image comes before the input field in the hierarchy, then $("#i37") will always select the image and you cannot call .val() on an image.
As I don't know what is the overall purpose of the code and what you want to do, I cannot give any suggestion how to improve this. Maybe it is enough to just change the prefix of the image and input field ids.
I learned that .live doesn't bind the handler to any elements but to the event.
That is not correct. .live() binds the event handler to the document root. Events, if not cancelled, bubble up the DOM tree, so they reach the root eventually. There, the event.target [docs] property is examined to determine the element that was clicked.
I have a simple form in codeigniter that I wish to use for the editing or records.
I am at the stage where my form is displayed and the values entered into the corresponding input boxes.
This is done by simply setting the values of said boxes to whatever they need to be in the view:
<input type="text" value="<?php echo $article['short_desc'];?>" name="short_desc" />
But, if I wish to use form_validation in codeigniter then I have to add thos code to my mark-up:
<input value="<?php echo set_value('short_desc')?>" type="text" name="short_desc" />
So not the value can be set with the set_value function should it need to be repopulated on error from the post data.
Is there a way to combine the two so that my edit form can show the values to be edited but also re-populate?
Thanks
set_value() can actually take a second argument for a default value if there is nothing to repopulate (At least looking at CI versions 1.7.1 and 1.7.2). See the following from the Form_validation.php library (line 710):
/**
* Get the value from a form
*
* Permits you to repopulate a form field with the value it was submitted
* with, or, if that value doesn't exist, with the default
*
* #access public
* #param string the field name
* #param string
* #return void
*/
function set_value($field = '', $default = '')
{
if ( ! isset($this->_field_data[$field]))
{
return $default;
}
return $this->_field_data[$field]['postdata'];
}
So, with that in mind you should be able to simply pass your default value to set_value like this:
<input value="<?php echo set_value('short_desc', $article['short_desc'])?>" type="text" name="short_desc" />
If there is no value to repopulate, set_value() will default to $article['short_desc']
Hope that helps.