I am new in angular js. I am creating a small app using angular. This is my code:
<input type="text" ng-model="one" ng-change="sum()">
<input type="text" ng-model="two"ng-change="sum()">
<input type="text" ng-model="three"ng-change="sum()">
<input type="text" ng-model="total" >
Controller Code:
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
The sum of all fields works perfectly. But now i want to do when user change the total value then the other fields set the values according the value in total field.
Are You Expecting this??
#test {
background: white;
border: 1px double #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #666;
outline: none;
height:25px;
width: 275px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr><td><b>Value1</b></td><td> <input type="text" id="test" ng-model="one" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 2</b></td><td><input id="test" type="text" ng-model="two" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 3</b> </td><td><input id="test" type="text" ng-model="three" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Total</b> </td><td><input id="test" type="number" ng-model="total" ng-change="newsum()"/> </td></tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
$scope.newsum = function(){
if($scope.total){
var div=$scope.total/3;
var mod=$scope.total%3;
if(mod==0){
$scope.one=div;
$scope.two=div;
$scope.three=div;
}
else{
var str=''+div;
var deci=parseInt(str.split(".")[0]);
$scope.one=deci;
$scope.two=deci;
$scope.three=deci+mod;
}
}
else{
alert("Please Enter the number");
}
}
});
</script>
</body>
</html>
Related
I have a problem with JavaScript. When I push the "Add" button I want to create a table with the listings from the form.
So for example:
New course: name: A, content: B => Add
|name|content
| A | B
And every new record comes to the end of the table.
Do you have an idea how can I do this? With PHP I would be easy but I want to do it with JavaScript.
My idea is to add this code into script:
document . addEventListener( 'DOMContentLoaded', registerCallbacks ); function registerCallbacks( ) { var addButton = document.getElementById( 'add‘ ); addButton.addEventListener( 'click', function( evt ){ add( ); evt.preventDefault( ); } );
document.addEventListener('DOMContentLoaded', registerCallbacks);
function registerCallbacks() {
var addButton = document.getElementById('add‘ ); addButton.addEventListener( '
click ', function( evt ){ add( ); evt.preventDefault( ); } );
<html>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<script>
</script>
</body>
</html>
So step one is to activate the button:
// Here we call the function Add() if someone clicks the button.
<button id="add" onclick="Add()"> Add </button>
Now we want to add the Javascript function Add() to our script:
function Add() {
// We request here all the information what the user fill out.
}
So here is a working snippet:
let table = document.getElementById("table");
function Add() {
// We request here all the information what the user fill out.
let name = document.getElementById("name").value,
content = document.getElementById("content").value;
// Add to table
table.innerHTML += "<tr><td>" + name + "</td><td>" + content + "</td></tr>"
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 3px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add" onclick="Add()"> Add </button>
<table id="table">
<tr>
<th>Lecture</th>
<th>Content</th>
</tr>
</table>
Hope this will work
$(document).ready(function() {
$("#add").click(function(){
var name=document.getElementById("name").value;
var content=document.getElementById("content").value;
$("#table").find('tbody').append("<tr><td class='column'>"+name+"</td><td class='column'>"+content+"</td></tr>");
});
});
<html>
<head>
<title>Add New Row</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
</head>
<body>
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
<table id="table" class="head">
<thead>
<tr>
<td>Name</td>
<td>Content</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
</script>
</body>
</html>
Here's a way to achieve it:
var add_button = document.getElementById("add");
var name_field = document.getElementById("name");
var content_field = document.getElementById("content");
var table = document.getElementById("table");
add_button.addEventListener("click", function(e) {
e.preventDefault();
table.style = "display: block;";
table.innerHTML += "<tr><td>" + name_field.value + "</td><td>" + content_field.value + "</td></tr>"
});
<head>
<title>HTML Formular Table</title>
</head>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<table id="table" style= "display: none;">
<tr>
<th>Name</th>
<th>Content</th>
</tr>
</table>
We will have a set of records where the user will select what color they want that section to be. As you can see I'm duplicating script code so that I can change the colors of a div. This value will be stored in mysql and retrieved when the user access the page again. Is there a way to format this code so that it's not duplicated 500 times? Thank you for your help. --newbie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
instead of using Id's, you can use classes like full and theme, so your html for any given set would look like
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
Then your javascript would look like
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
edit: fixed bug, changed from parent to closest so that .full doesn't have to be a direct parent of the input.
You can achieve this with a simple for loop.
If the number of colors is not static you can use the jquery "starts with" selector to get all of the elements and then take the length.
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
Below is a working snippet. There were some issues with your HTML, and I'm not sure if you were setting the .change() event intentionally, but for the demo I just changed it directly.
$(window).load(function(){
$(document).ready(function(){
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
var background = $(color).val();
$(full).css("background-color", background);
}
});
});
.color-box {
background-color: #ffffff;
border: solid 2px black;
min-height: 30px;
margin: 5px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
<div id="full" class="color-box">
<input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
</div>
<div id="full2" class="color-box">
<input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
</div>
<div id="full3" class="color-box">
<input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
</div>
</form>
I am trying to build a form that will calculate average pay. Very simply the calculation needs to be x/y = z. I would like it to autocomplete and not need to submit a form. This is what I have so far, I got close but I am going to insert the code onto a Weebly website and it could not read it. Any help would be massively appreciated!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(output1)
{
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
OK. There are a number of issues here.
First, your javascript is referring to the HTML element, not it's value.
you need to add ids to the inputs and ensure that you convert the values to numbers.
This might help:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate()
{
var input1Val = Number(document.getElementById("input1").value);
var input2Val = Number(document.getElementById("input2").value);
var result = (input1Val/input2Val);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
<input type="button" value="Go!" onclick="calculate()">
</div>
</form>
</body>
</html>
Following code will work. You have to watch out the difference to understand the problem in your code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
var input1 = document.getElementById("input1").value;
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
Following is the code of my jsp where there are two input fields regNo and studentName.
I want the user to enter only numbers in regNo field. It should not contain any spaces and the length of the digits should be only 12.
I added the check for characters and I added CSS and now my Search button isn't working.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
I made little modification in your code. It was the ordering of javascript code. I have put your java script code after the elements. Now it will work.
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
#mycontainer, h1, h3 {
text-align:center;
}
form {
display:inline-block;
}
#errorMsgNumber {
display: none;
background: brown;
color: white;
}
</style>
</head>
<body>
<div id="mycontainer">
<form method="post" action="number" id="number">
<div id="regNoErrorMsgNumber">Only numbers are allowed</div>
<div style="text-align: center;" >
<!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->
<input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> OR
</div>
</form>
<form method="post" action="name" id="name">
<input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
</form>
</div>
<div style="text-align: center;">
<input id="inputFields" type="button" value="Search" />
</div>
</body>
<script>
var regNoField = document.getElementById('regNo');
var regNoMessage = document.getElementById('regNoErrorMsgNumber');
var inputFieldsButton = document.getElementById('inputFields');
regNoField.addEventListener('keydown', onChange);
function onChange(e) {
if (e.keyCode < 48 || e.keyCode > 57) {
regNoMessage.style.display = 'block'
};
if(/^\d+$/.test(regNoField.value)) {
inputFieldsButton.disabled = false;
} else {
inputFieldsButton.disabled = true;
}
}
$(document).ready(function(){
$('#inputFields').click(function(event){
if (document.getElementById('regNo').value !=""){
$("#number").submit();
}else if(document.getElementById('studentName').value !=""){
$("#name").submit();
}
});
});
</script>
You can do one more thing instead of referring the jquery from website itself you can refer the google hosting look at the link for the benefit http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
I am trying to create two columns of text boxes which should look like something like the following image:
But it looks something like this:
I used the following code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DHTML with jQuery</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<button id="btnStart">start</button>
<div id="container"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
HTML from the DOM inspector
<html><head>
<script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>
</head>
<body>
<button id="btnStart" style="display: none;">start</button>
<div id="container">
<input type="text" id="txtPlayerId1" placeholder="player 1">
<input type="text" id="txtPlayerId11" placeholder="0">
<input type="text" id="txtPlayerId2" placeholder="player 2">
<input type="text" id="txtPlayerId12" placeholder="0">
<input type="text" id="txtPlayerId3" placeholder="player 3">
<input type="text" id="txtPlayerId13" placeholder="0">
<input type="text" id="txtPlayerId4" placeholder="player 4">
<input type="text" id="txtPlayerId14" placeholder="0">
<input type="text" id="txtPlayerId5" placeholder="player 5">
<input type="text" id="txtPlayerId15" placeholder="0">
<input type="text" id="txtPlayerId6" placeholder="player 6">
<input type="text" id="txtPlayerId16" placeholder="0">
<input type="text" id="txtPlayerId7" placeholder="player 7">
<input type="text" id="txtPlayerId17" placeholder="0">
<input type="text" id="txtPlayerId8" placeholder="player 8">
<input type="text" id="txtPlayerId18" placeholder="0">
<input type="text" id="txtPlayerId9" placeholder="player 9">
<input type="text" id="txtPlayerId19" placeholder="0">
<input type="text" id="txtPlayerId10" placeholder="player 10">
<input type="text" id="txtPlayerId110" placeholder="0">
<input type="text" id="txtPlayerId11" placeholder="player 11">
<input type="text" id="txtPlayerId111" placeholder="0"></div>
<script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
<link rel="stylesheet" href="/iScorecard/resources/css/style.css">
</body></html>
JS
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
$("#btnStart").on('click', function(event) {
createTextBoxes(event, 11);
$("#btnStart").hide();
});
How should I modify the code to create the list of text boxes as shown in the mockup screen.
Yo can accomplish this using css. I can will give you 3 options.
Option 1 - Using only css (with inline-block)
<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
Above css will make all the input type=text elements as inline-block and take the input width as 40% from parent container. Even you change the main container width. inner elements won't affect. it will always show as two columns
Option 2 - Using only css (with float)
<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
}
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>
In HTML I am adding extra class for the container DIV
<div id="container" class="clearfix">
This option is using float instead of inline-block. Here I have added an extra class .clearfix whenever we do a float we need to clear it after the floating elements. otherwise it will affect for below elements as well
Option 3 - Adding specific class to the player input box and score input box
<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>
<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
var iCounter = 0,
playerText = null,
scoreText = null;
for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
playerText = document.createElement('input');
scoreText = document.createElement('input');
$(playerText).attr('type', 'text');
$(scoreText).attr('type', 'text');
$(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
$(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
$(playerText).attr('placeholder', 'player ' + (iCounter + 1));
$(scoreText).attr('placeholder', '0');
$(playerText).attr('class', 'player');
$(scoreText).attr('class', 'score');
$('#container').append(playerText);
$('#container').append(scoreText);
}
}
</script>