Angular directive to enable textbox - javascript

In the following if checkbox is clicked the readonly attribute from the textbox must be removed and on unclicking git should be added.Can this be done by angular directive
<div class="radio">
<label>
<input type="radio">Project</label>
<input type="text" name="project" id="project" readonly/>
</div>

You can just use the built-in directive ngReadonly:
<input type="checkbox" ng-model="readonly">Project</label>
<input type="text" name="project" id="project" value="" placeholder="Project" ng-readonly="!readonly"/>
Here's a working plunkr.

Take a look on https://docs.angularjs.org/api/ng/directive/ngReadonly:
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />

Related

required on radio buttons

i am using a single html5 required attribute for group of radio buttons as this
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" required value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" value="arabic" />
</td>
but its not working as per the expectaions
i am not able to submit the result until i select english i.e even when i select arabic "the reqired field message is prompted on english"
You need to add a name attribute for your Radio Button Group:
<input type="radio" ng-model="Customer.language" id="input1" value="english" name="language" required />
<input type="radio" ng-model="Customer.language" id="input2" value="arabic" name="language" required />
Note: i added the Required Statement for the second input as well.
I see some "ng-" in your component, so i think you use AngularJS.
So, you can try this one for your required :
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" ng-required="!Customer.language" value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" ng-required="!Customer.language" value="arabic" />
And name is not needed ;)
With that, your field will be required only if no value is selected ;)

Simple generate button with html and javascript and save after finish

I try to generate a simple button by HTML and JavaScript. Unfortunately, I don't know how to it with JavaScript to catch to value from input range HTML to apply for button. How could I use JavaScript to catch value from HTML range?
this is my html code:
<form name='frm'>
<div id="div">
<label>
Width:
<input type="text" id="MyText"/>
<input type="range" id="MyRange" oninput="myfunc()"/>
</label><br/>
<label>
Height:
<input type="text" id="height"/>
<input type="range" id="heights" oninput="myfunc()"/><br/>
</label><br/>
<label>
Background:
<input type="text" id="bdg"/>
<input type="color" id="background"/>
<!--/* <input type="range"/>
<input type="imge" name="imge"/>*/-->
</label><br/>
<label>
Radius:
<input type="text" name="rad" id="Radius"/>
<input type="range" name="rad" id="Rd"/><br/>
</label><br/>
<label>
Margin:
<input type="text" name="margin" id="margin"/><br/>
</label><br/>
<label>
Padding:
<input type="text" name="padding" id="padding"/><br/>
</label><br/>
<label>
Box-shadow:
<input type="text" name="shadow" id="shadow"/><br/>
</label><br/>
</div>
<div id="div">
<label>
Color:<br/>
<input type="text" name="col" id="color"/>
<input type="color" id="colors"/><br/>
</label>
<label>
Border-width:<br/>
<input type="text" name="bdwidths" id="bw"/>
<input type="range" id="bdw"/><br/>
</label>
<label>
Border-style:<br/>
<input type="number" name="bdstyle" id="bdstyle"/><br/>
</label>
<label>
Border-color:<br/>
<input type="number" name="bdcol" id="bdcolor"/>
<input type="color" id="color"/><br/>
</label>
<label>
Text-align:<br/>
<input type="number" name="aligns" id="ta"/><br/>
</label>
<label>
Font-size:<br/>
<input type="number" name="font" id="font"/>
<input type="range" id="font-size"/><br/><br/>
</label>
<label>
<input type="button" value="save change" onclick="save()"/>
</label>
</div>
</form>
My Button
To trigger the javascript function you need to listen for changes/events.
This is using the oninput attribute. This will trigger/call the javascript function myfunc each time the range has a new input.
This is now using id attributes, not name attributes.
document.getElementById('') Is used to target the element
document.getElementById('').value is used to target the elements value.
function myfunc(){
//Assign a variable to the MyRange element.
var MyVariable= document.getElementById('MyRange');
//Target the MyText input and change the value to the value of MyVariable.
document.getElementById('MyText').value=MyVariable.value+'px';
//Target MyBtn's style - width
document.getElementById('MyBtn').style.width=MyRange.value+'px';
}
Width:<input type="text" id="MyText"/><br/>
<input type="range" id="MyRange" oninput="myfunc()"/>
<button id="MyBtn">My Button</button>
If you don't understand any of the source code please leave a comment below and I will explain it line by line for you so you understand how this works. It's better to understand how something works rather than copy/paste and hope for the best.
Javascript should be placed inside of script tags
<script type="text/javascript">
//Place Javascript Here....
</script>
I hope this helps. Happy coding!
Give the element an ID so you can access it:
<input type="range" id="widthrange" name="widths"/>
Then in your Javascript, you can do:
var width = document.getElementById("widthrange").value;

Controlling Inputfields with radio buttons in AngularJS

I have the following idea. My view contains 3 input fields and radio buttons which need to work each other.
Firstly when the view is displayed you can see the input fields only. If the user clicks on one of the input fields the other fields disabled and the radio buttons to this input fields are showing. If the user want to use an other input field of these three then he needs to click on one of the radio buttons then the other two input field will disabled.
Here is the currently code:
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
How can I realise that? Currently the first input field works.
Try to give a value to disabled
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />
this can certainly work, just make sure you are using different $scope variables for each control:
<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>
While this should work here, I recommend not to put so much JS-code into the HTML, better would be to add a method on $scope like $scope.radioClicked(buttonId) and then call this method on ng-click.
Also using ng-show instead of ng-hide helps readability - no double negation.
I've changed my input fields. It is a possible solution but only I need the interaction with radio buttons and the input fields.
<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?
Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.
A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

How to find element value in jQuery

I am trying to get all class call Position $(".Position") and get then find the value that == 4 and then show the id.
<input type="Text" id="#34" value="1" class="Position">
<input type="Text" id="#22" value="2" class="Position">
<input type="Text" id="#37" value="3" class="Position">
<input type="Text" id="#41" value="4" class="Position">
Thanks
Use the Attribute Equals Selector
alert($("input.Position[value='4']").attr("id"));
First, you have to take off the '#' from your id's.
<input type="Text" id="34" value="1" class="Position">
Then you can find the input you are looking for with the following selector:
$('input.Position[value=4]').attr('id')

Categories