Angular Js Issue with data-ng-disabled - javascript

I am having an angular Js program like below.
HTML
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
JS
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
The text area is getting disabled only when I select the radio button with value mine.I am expecting it to be disabled when the page loads only, cause I mentioned the value as mine in the controller. But its always enabled, Please help me with the issue

It works for me, please check below sample and check your angular version as well
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example88-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="Mydirective">
<script>
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
</script>
<div ng-controller="MyController">
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
</div>
</body>
</html>
http://plnkr.co/edit/gBN41mrNfDXbEDLZchCp?p=preview

Related

How do I access an external and different document using jquery & js?

I have 3 files. a1.js, a2.js.& main.jsp. Main.jsp has two tabs each having its own functions. a1.js can access 1st tab elements which has multiple checkboxes and a text area where the options selected in the check boxes would be added to the text area. a2.js can access 2nd tab elements which has two radio buttons (yes / no). Depending on the input of the radio buttons, I want some check boxes to checked or unchecked in the 1st tab. How can I acheive this using javascript or jquery? Here is the code:
a1.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
var inputElements = document.getElementsByName("favorite_pet");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
$('#ta').val($('#ta').val()+inputElements[i].value);
}
}
}
</script>
</head>
<body>
<form>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>
<input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>
<input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>
<br>
<textarea id="ta" rows="4" cols="50">
</textarea>
</form>
</body>
</html>
a2.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
///code to make changes in a2.jsp
}
</script>
</head>
<body>
<form>
<legend>Do you want Cat?</legend>
<input type="radio" name="CatLover" id="cat_yes" value="yes" onclick="changeTA()">Yes<br>
<input type="radio" name="CatLover" id="cat_no" value="no" onclick="changeTA()">No<br>
<input type="submit" value="Submit"
<br>
</form>
</body>
</html>
What I want to when yes is checked in the second jsp page, cats should be added in the text are in the first html and clicking on submit should submit the data from both jsp's/ Also, something t be noted both jsp s are included in another jsp page on different tabs. How can I acheive this?

inserting a variable into a jquery string to create a command

Stupid question no doubt but driving me mad!
Django template html but really a jquery question.
The following line checks a checkbox on my page....
$(id_exam_choices_1).prop('checked', true);
Fine no problem.
I want to create the same using a variable...
value = 1;
var thename = 'id_exam_choices_' + value;
alert(thename);
The alert shows the string is correct ....
How do I feed the variable into a command...??
$(thename).prop('checked', true);
I hope this is enough info - it seems straightforward but ....
Thanks.
Im not sure that I got your question correctly. If you are trying to check a checkbox depending on its number which is decided by value variable number then I would propose this solution. i.e if value=3 then checkbox with id= id_exam_choices_3 will be checked and so on.
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var value = 3;
var thename = "id_exam_choices_" + value;
$("body").find('#' + thename).prop("checked", true);
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<form method="post">
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_1" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_2" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_3" />
</form>
</body>
</html>

Javascript alert not displaying correctly

Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?

store value from checkbox into string if checked

I want to store value from checkbox into string
<label style="color:black; text-decoration:none; font-size:15px" href="#">
<input type="checkbox" ng-model="diet.v1" ng-true-value="'&diet=high-fiber'" ng-false-value="''" />High-Fiber</label>
How do i get value from ng-true-value (when it's checked) to string so i can use it ?
when i try something like this console.log(diet.v1); in js it wont work
Please check the following working sample code with ng-true-value, ng-false-value.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.diet = {
v1 : ''
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Value:
<input type="checkbox" ng-model="diet.v1"
ng-true-value="'&diet=high-fiber'" ng-false-value="''">
</label><br/>
<tt>value = {{diet.v1}}</tt><br/>
</form>
</body>
</html>

Button not remaining disabled after submitting form

I am attempting to disable a button using an external JavaScript - activated by a submit button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<form id="email_form" name="email_form" method="get">
<input type="radio" name="food1" id="cake1" value="cake" > Cake <br>
<input type="radio" name= "food2"id="muffns1"value="muffins" > Muffins <br>
<input type="radio" name= "food3"id="donuts1" value="donuts1" > hello <br>
<input type="radio" name="food4" id="food1" value="cookies" > Cookies<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick = "join_list()">
<br>
</form>
</section>
</body>
</html>
My JavaScript is as follows
var getsElement = function (id) {
return document.getElementById(id);
};
var join_list = function () {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
I can see the button disable when I watch the code but when the HTML reappears for user access the button is not disabled.
Your button reload the page, so your JS is missing. Also you should change your var join_list (scope var problems if you use this var in other functions like window.onload) to function.
So your code should be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<input type="radio" name="food1" id="cake1" value="cake"> Cake
<br>
<input type="radio" name="food2" id="muffns1" value="muffins"> Muffins
<br>
<input type="radio" name="food3" id="donuts1" value="donuts1"> hello
<br>
<input type="radio" name="food4" id="food1" value="cookies"> Cookies
<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick="join_list()">
</section>
</body>
</html>
JavaScript
var getsElement = function(id) {
return document.getElementById(id);
};
function join_list() {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
When you click submit, the page reloads. Any attributes you added via JS before the page reload will be set back to default.

Categories