I am new to angular js. and I have a situation.
I want to bind data to an input element from another input element based on a condition (checking a checkbox). I am trying to achieve this using the
ng-if angular directive. But it's not working,
So when I type something into input1 and check the checkbox, I want the value of input1 to be reflected in input2.
<input ng-model="value.one" type="text" />
<input ng-model="checked" ng-change="isChecked(value.one)" type="checkbox" />
<input ng-model="value.selected" />
in your controller:
$scope.isChecked(val) {
if($scope.checked) {
$scope.value.selected = val;
} else {
$scope.value.selected = null;
}
}
Related
I want to find the default tab index of the form.
I have not given but still all the control has the tab index. I want to find that default tab index through the j query. How can i find that?
Jquery and tab-index
The way tabindexing works is that it goes trough your html markup and looks for tabable elements.
So say you have this code:
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The text input will be tabbed first, and then the submit input.
Yes i know this how do it get the tabbing?
$(function() {
$firstinput = $("form").find("input")
console.log($firstinput.first()); //prints the first element thats an input.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The code above will only work if you only have input elemtns and add not trickery to the markup like hiding your elements etc.
In the code below im using the jquery UI :focusable selector.
With this you should get the first tabbable element in your form
//:focus selector from jquery UI
$.extend($.expr[':'], {
focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
}
});
//actual code
$(function() {
$form = $("form");
$first = $form.find(":focusable").first();
console.log($first);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label tab-index="0">Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
You can search for 'tabindex' attribute with jquery.
var tabindexVal = $('selector').attr('tabindex');
I Want to make radio buttons from form with one choose only. Single Options with
A. Exemple One
B. Exemple Two
C. Exemple Three
D. Exemple Four
If you choose one questions A, you cant to change your opinion. Thanks for help.
http://preview.ipanelthemes.com/fsqm/form-with-latex-options/
Here you have exemple.
The easiest way to do this would be using JavaScript to add an event listener so that when a user clicks on one of the radio options, the script then will set the "disabled" attribute in place.
Given the following HTML:
<form>
<input type="radio" name="creditcard" id="visa">Visa
<input type="radio" name="creditcard" id="mstrcrd">MasterCard
<input type="radio" name="creditcard" id="amex">American Express
<input type="radio" name="creditcard" id="dscvr">Discover
</form>
You could use the following JavaScript:
var radioInputs = document.getElementsByName("creditcard");
function toggleDisable() {
for (i=0; i<radioInputs.length; i++) {
radioInputs[i].disabled = true;
}
}
for (i=0; i<radioInputs.length; i++) {
radioInputs[i].addEventListener('click', toggleDisable, false);
}
Keep in mind that the .addEventListener method will not work in IE8 or prior. You will either need to write an if statement checking for the .addEventListener or use jQuery.
Can I change an input field value using CSS when user clicks it?
Like:
<input type=text name=username>
<input type=password name=password>
So, when the user click into this field, the text will go away and he will be able to write something.
I have tried:
input[value="Input desired username here"] {
styles...
}
Any clues?
There's no need to use css for this. You can use placeholder attribute for your input tag, it will show a default value in input boxes:
<input type="text" name="username" placeholder="Username" />
Please consider that placeholder attribute is not supported in all browsers and if you want to make it cross-browser you can write a javascript code to put a default value in your input-boxes or use this simple and quick fix:
<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />
This is called a placeholder. Modern browsers will allow you to use a placeholder attribute like this:
<input type="text" name="username" placeholder="Input desired username here" />
and it will appear as you would like. Then you will need to utilize Modernizr to back port that functionality to older browsers. Something like this JavaScript will help:
$(document).ready(function () {
if(!Modernizr.input.placeholder) {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
})
I'm currently doing the following to compensate for boolean's not mapping well to radio buttons. I am stuck binding 1 and 0 to the value (instead of true and false) because of how the fields are read out of the observables. The value of Pref1/Pref2 come as true/false boolean values from the server. The key here is I want to not only data-bind the checked value of the radio button to match the true/false in the object, but I also want the boolean value of true/false to be written back into the GraduationClass object. My compensation code is not only ugly, but not scalable.
<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No
Save
function SiteSettingsViewModel() {
var self = this;
this.saveGraduationClass = function(graduationClass) {
// hack until i get a custom radio button binding
if (graduationClass.Pref1() == 1) {
graduationClass.Pref1(true);
} else {
graduationClass.Pref1(false);
}
if (graduationClass.Pref2() == 1) {
graduationClass.Pref2(true);
} else {
graduationClass.Pref2(false);
}
// ...ajax call to save graduationClass to the server
}
function GraduationClass(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
}
Here is example from knockoutJs website, that demonstrate how to use radio buttons with
"checked" attribute:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
};
// ... then later ...
viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>
But I dont understand why you use two objects - "Pref1" and "Pref2" fro one radiobutton group "radioGroup"? In this case you just could use one object as in an example used "spamFlavor".
So, please, describe more ditaily what you want to bind: one radiobuttons group by one selected value, or something else.
Also you could use computed observables to calculate different values, please see example.
I am trying save the disabled property value of a hidden field to track the disabled state of a button between postbacks, with the following javascript
function TrackState(buttonID)
{
var trackingField = document.getElementById("_tracking" + buttonID);
return false; // prevent default action
}
HTML
<input type="hidden" name="_trackingButton1" value="true" />
but trackingField seems to be null each time, what is going wrong here
You need to assign the id property of your element (not just name) and it should work like this:
<input type="hidden" id="_trackingButton1" name="_trackingButton1" value="true" />
I hope this helps.
In your function
function TrackState(buttonID)
{
}
what is the buttonID value exactly. I hope it is "Button1".
And as the function says getElementById the input has the property id with the same value.
The getElementById() method specifically looks for id values:
<input type="hidden" id="_trackingButton1" name="_trackingButton1" value="true" />