I am attempting to create a simple calculator using html5, css3 and javascript. My problem is that my button for exponent does not seem to work, all the other operator buttons work fine. My code is as follows:
<html>
<head>
<meta charset = "utf-8">
<title>Calculator</title>
<script type = "text/javascript">
function result(){
btn.value = eval(btn.value);
}
</script>
<style type = "text/css">
.box{
height: 500px;
width: 400px;
background-color: red;
}
.display{
background-color: green;
position: relative;
top:20px;
left:50px;
width:310px;
height:60px;
}
.display input{
color: black;
background-color:yellow;
position:relative;
left:3px;
top:3px;
width:295px;
height:45px;
}
.key{
position:relative;
top:15px;
left:50px;
}
.button{
width:55px;
height:60px;
margin-left:15px;
}
.button.gray{
background-color:gray;
}
.button.black{
color:white;
background-color:black;
}
</style>
</head>
<body>
<div class = "box">
<div class = "display"><input type = "text" readonly size="20" id="btn"></div>
<div class = "key">
<p><input type = "button" class = "button gray" value = "1" onclick="btn.value+=1">
<input type = "button" class = "button gray" value = "2" onclick="btn.value+=2">
<input type = "button" class = "button gray" value = "3" onclick="btn.value+=3">
<input type = "button" class = "button black" value = "+" onclick="btn.value+='+'"></p>
<p><input type = "button" class = "button gray" value = "4" onclick="btn.value+=4">
<input type = "button" class = "button gray" value = "5" onclick="btn.value+=5">
<input type = "button" class = "button gray" value = "6" onclick="btn.value+=6">
<input type = "button" class = "button black" value = "-" onclick="btn.value+='-'"></p>
<p><input type = "button" class = "button gray" value = "7" onclick="btn.value+=7">
<input type = "button" class = "button gray" value = "8" onclick="btn.value+=8">
<input type = "button" class = "button gray" value = "9" onclick="btn.value+=9">
<input type = "button" class = "button black" value = "*" onclick="btn.value+='*'"></p>
<p><input type = "button" class = "button black" value = "%" onclick="btn.value+='%'">
<input type = "button" class = "button gray" value = "0" onclick="btn.value+=0">
<input type = "button" class = "button black" value = "^" onclick="btn.value+='^'">
<input type = "button" class = "button black" value = "/" onclick="btn.value+='/'"></p>
<p><input type = "button" class = "button black" value = "C" onclick="btn.value=''">
<input type = "button" class = "button black" value = "=" onclick="result()";></p>
</div>
</div>
</body>
</html>
just for fun - partially working calculator. DEMO
to make your calculator working you should include bunch of javascript code, without it wont do anything.
Catch button clicks by JQuery on method.
$('.box').on('click','.button',function(){
You need a script, like JavaScript, to handle actions performed by the Client. For the most part, HTML is only a markup language (to display data), and CSS (in <style></style> tags) is a way to format/design that markup. You need a script to handle actions,
HTML: onclick="call the JavaScript function(pass in the value of that button)"
<p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">
JS: Take the value as input, get the input box by ID (.getElementById(your id)), display it
function showNum (input) {
var display = document.getElementById("btn");
display.value = input;
}
Here is a working paste bin:
http://jsbin.com/xijatosate/1/edit?html,css,js,output
Here, I fixed code for you.
function display(val) {
var dis = document.getElementById("btn");
dis.value += val;
}
You should start from this template. I suggest you to start your coding career at www.w3schools.com/.
Have fun!
Full code jsfiddle
Related
I'm trying to make a calculator I wanted to take the number and the operation from the input and onclick to display the result in another input field. Just to test if the button work console.log(num1+num2) but I see no result in the console log. and i also what to know how i can pass my operation from the input
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var oper = document.getElementById("oper").value;
var cal = document.getElementById("cal").value;
var res = document.getElementById("num1").value;
var calculatorBtn = document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate() {
console.log(num1 + num2);
}
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()" />
</div>
</div>
</form>
</div>
You have to check for the value inside your function. Otherwise this won't get triggered again.
function calculate(){
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
console.log(num1+num2);
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
</body>
</html>
I believe it's because the code doesn't update the variables, so it's just set to the value and the value is null at that time its set,I fixed it:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="root">
<h1>Calculator</h1>
<form action="" id="formCal">
<div class="calculator">
<div class="box">
<label for="num1">Number 1</label>
<input type="number" placeholder="num1" id="num1">
</div>
<div class="box">
<label for="num2">Number 2</label>
<input type="number" placeholder="num2" id="num2">
</div>
<div class="box">
<label for="oper">operation</label>
<input type="text" placeholder="oper" id="oper">
</div>
<div class="box">
<label for="res">Result</label>
<input type="number" placeholder="res" id="res">
</div>
<div class="box">
<input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
</div>
</div>
</form>
</div>
<headers>
<script >
var num1 =document.getElementById("num1").value;
var num2= document.getElementById("num2").value ;
var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal") ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");
function calculate(){
var num1 = new Number(document.getElementById("num1").value);
var num2 = new Number(document.getElementById("num2").value) ;
var res = document.getElementById("res")
switch(document.getElementById("oper").value)
{
case "+":
res.value = num1 + num2;
break;
case "-":
res.value = num1 - num2;
break;
case "*":
res.value = num1 * num2;
break;
case "/":
res.value = num1/num2;
break;
}
}
</script>
</headers>
</body>
</html>
All the JS codes outside the function will get executed immediately once the page starts to load. In your case, you will enter values in text box only after the page gets loaded.
The num1 and num2 variables will not get assigned at the time you hit on the calculate button as these codes are outside the function.
Secondly, you should use ParseInt as javascript will consider your values as strings and gives you concatenated result.
Replace your script as below,
/*var oper=document.getElementById("oper").value ;
var cal=document.getElementById("cal").value ;
var res=document.getElementById("num1").value ;
var calculatorBtn =document.getElementById("calculator");
const form = document.querySelector("formCal");*/
function calculate(){
var num1 =document.getElementById("num1").value ;
var num2= document.getElementById("num2").value ;
console.log(parseInt(num1)+parseInt(num2));
}
<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Once you have a string for the calculation, you can run the eval() function to execute the calculation as JavaScript code.
Since you are generating a string, you might not need the parseInt at all.
Using eval() poses a potential security risk, if you publish a site using it. Use it only for your learning experiments.
function calculate(){
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const oper = document.getElementById("oper").value;
document.getElementById('res').value = eval(num1 + oper + num2);
}
I am making this calculator and I want to add numbers on click. Should I add an event listener or is there an easier way? I want the number to go to the 'current' class.
<div class="calc-grid">
<div class="output">
<div class="prev">123</div>
<div class="current">456</div>
</div>
<button class='span'>AC</button>
<button>DEL</button>
<button>รท</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
<button>8</button>
<button>8</button>
<button>9</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button class='span'>=</button>
</div>
Use an onClick event to fire some JS code:
<button onClick="calculate(this)">1</button>
Also assign an id to the div you want to modify to make it simple to look up:
<div class="current" id="current">456</div>
Here's an example that adds the number that you click on.
Try Considering This One: Probably Might Help You.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: blue;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: white;
color: black;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class= "formstyle">
<form name = "form1">
<input id = "calc" type ="text" name = "answer"> <br> <br>
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
I have created a form where the user will enter some information and the email will have to be validated before the user can proceed to the next page (thankyou.html) however when i input every thing correctly into the form the email gets validated but i cannot get to the next page...i cant figure out what im doing wrong. Any help would be appreciated and thank you in advance.
<script type = "text/javascript">
function validate()
{
var text = document.getElementById("text1").value;
var regx = /^([a-zA-Z0-9\.-]+)#([a-zA-Z0-9-]+)\.([a-z]{3})$/;
var uname = document.getElementById("name");
var title = document.getElementById("title1");
var comment = document.getElementById("cmt");
if(regx.test(text))
{
document.getElementById("lbltext").innerHTML="you may proceed";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="green";
}
else{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
}
}
</script>
</head>
<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
<p style = "text-decoration: underline; color: white;">comment :</p><br>
<input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
<input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
<input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
<textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
<button onClick="validate()" type="button" style = "color: white; font-weight: bold; background-color: #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
</form>
</body>
Since you are using return validate(), The onSubmit is expecting a boolean return value from validate(). So, If you want to submit the form you should return true, If not return false.
NOTE
If you want to access the form data in next page, You should set name property for your input fields.
Since you are using onSubmit, You don't need to put onClick to the button. And the button type should be submit not button.
function validate()
{
var text = document.getElementById("text1").value;
var regx = /^([a-zA-Z0-9\.-]+)#([a-zA-Z0-9-]+)\.([a-z]{3})$/;
var uname = document.getElementById("name");
var title = document.getElementById("title1");
var comment = document.getElementById("cmt");
if(regx.test(text))
{
document.getElementById("lbltext").innerHTML="you may proceed";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="green";
return true;
}
else{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
return false;
}
}
<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
<p style = "text-decoration: underline; color: white;">comment :</p><br>
<input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
<input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
<input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
<textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
<button type="submit" style = "color: white; font-weight: bold; background-color: #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
</form>
</body>
Also it looks like you're just going to the tankyou.html immediately after validation. It seems to me like you don't need the green 'you may proceed'. You could clean up your code a little.
if(regx.test(text) === false)
{
document.getElementById("lbltext").innerHTML="invalid email";
document.getElementById("lbltext").style.visibility="visible";
document.getElementById("lbltext").style.color="black";
return false;
}
else
{
return true;
}
Im creating a classic To Do list application in html/JS/CSS, where i have the following functionality :
User types inn his/hers Task
The task is then printet below with a checkbox on the same line
The task is also stored in an object with a timestamp.
All new tasks are added above old ones.
How can i solve the following problem, using ONLY css :
When the user checks the checkbox, the task on the corresponding line should be "lined out" so that it becomes clear that its completed.
I made a jsfiddle, but i cant make it run there, anyway here it is: https://jsfiddle.net/fm6cbuu9/2/
What i have so far :
JS :
var tasks = {}
function addTask(){
var task = document.getElementById("inn").value
var ol = document.getElementById("ol")
var li = document.createElement("li")
var d = new Date()
var box = document.createElement("input")
box.type = "checkbox"
box.id = "box"
li.appendChild(box)
li.appendChild(document.createTextNode(task))
ol.insertBefore(li, ol.childNodes[0])
tasks[d.getTime()] = task
console.log(tasks)
}
CSS:
input[type=checkbox] + li {
text-decoration: overline;
}
HTML:
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
Rather than creating a text node for the task name, put it inside of a label for the checkbox. Then you just target the label next to the checked box in your CSS:
var tasks = {}
window.addTask = function(){
var task = document.getElementById("inn").value;
var ol = document.getElementById("ol");
var li = document.createElement("li");
var d = new Date();
var taskId = d.getTime();
var box = document.createElement("input");
box.type = "checkbox";
box.id = "box-" + taskId;
var label = document.createElement("label");
label.setAttribute("for", "box-" + taskId);
label.innerHTML = task;
li.appendChild(box);
li.appendChild(label);
ol.insertBefore(li, ol.childNodes[0]);
tasks[taskId] = task;
console.log(tasks);
}
#container {
display: block;
margin-right: auto;
margin-left: auto;
background-color: lightgray;
border-radius: 10px;
width: 800px;
height: auto;
z-index: 0;
padding: 20px;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
}
<title>To do list</title>
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
</body>
[ https://drive.google.com/open?id=0B2PqgB8bPJ5xVmpjdTBOakdoTk0 ] this is the image link This is my ng-app and controller of my form:
<!DOCTYPE>
<html>
<head>
<title>Student EditForm</title>
<script src = "javascript/QueryData.js"></script>
<script src = "jquery/jquery-1.10.2.min.js"></script>
<script src = "jquery/jquery-ui.js"></script>
<script src = "angularjs/angular.min.js"></script>
<link rel = "stylesheet" href = "css/jquery-ui.css" />
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<style>
body{
background-color:#FFFFE0;
width: 1038px;
float: right;
}
form{
width: 400px;
margin: 60px 10px 10px 10px;
}
.form-control{
background-color:#FFFAFA;
}
#btn,#btn1{
margin-top: 10px;
background-color:#ADFF2F;
}
ul{
list-style-type: none;
margin: 0;
padding:0;
width: 25%;
height: 100%;
position: fixed;
background-color: #f1f1f1;
overflow: hidden;
border: 1px solid #000000;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a{
display: block;
color: white;
text-align: left;
padding: 14px 20px;
text-decoration: none;
}
li{
border-bottom: 1px solid black;
}
li a:hover{
background-color: red;
}
</style>
</head>
<body ng-app = "MyForm" ng-controller = "StudentControl as stdCtrl">
<div class = "content-container col-sm-3">
<table>
<nav>
<ul>
<li><a class = "active" href = "studentForm.html">Student-Registration</a></li>
<li><a class = "active" href = "studentDetails.html">Student-Details</a></li>
<li><a class = "active" href = "studentEdit.html">Student-Update</a></li>
</ul>
</nav>
</table>
</div>
<div class = "bodycontainer col-lg-9">
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl()">
<input type = "hidden"
id = "studentid"
name = "studentid"
ng-model = "stdCtrl.stdId"
class = "form-control" />
<div class = "form-group col-lg-6">
<label>Firstname</label>
<input type = "text"
id = "first"
name = "fname"
ng-required = "true"
ng-model = "stdCtrl.fName"
class = "form-control"
autofocus
placeholder = "FirstName">{{x.firstname}}</input>
<span class = "help-block"
ng-show = "logForm.fname.$invalid && !logForm.fname.$pristine">FirstName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Lastname</label>
<input type = "text"
name = "lname"
ng-required = "true"
ng-model = "stdCtrl.lName"
class = "form-control"
placeholder = "LastName">{{x.lastname}}</input>
<span class = "help-block"
ng-show = "logForm.lname.$invalid && !logForm.lname.$pristine">LastName Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Gender:   </label>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="male" required>Male{{x.gender}}</input>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="female" required>Female{{x.gender}}</input>
<span class = "help-block"
ng-show = "logForm.gender.$invalid && !logForm.gender.$pristine">Gender Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Email</label>
<input type = "email"
name = "email"
ng-required = "true"
ng-model = "stdCtrl.Email"
class = "form-control"
placeholder = "Your Email" >{{x.email}}</input>
<span class = "help-block"
ng-show = "logForm.email.$invalid && !logForm.email.$pristine">Email Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Fathername</label>
<input type = "text"
name = "fathername"
ng-required = "true"
ng-model = "stdCtrl.Fname"
class = "form-control"
placeholder = "Father's Name">{{x.fathername}}</input>
<span class = "help-block"
ng-show = "logForm.fathername.$invalid && !logForm.fathername.$pristine">FatherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Mothername</label>
<input type = "text"
name = "mothername"
ng-required = "true"
ng-model = "stdCtrl.Mname"
class = "form-control"
placeholder = "Mother's Name"/>{{x.mothername}}
<span class = "help-block"
ng-show = "logForm.mothername.$invalid && !logForm.mothername.$pristine">MotherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>DOB</label>
<input type = "text"
id = "birthdayPicker"
name = "birthdy"
ng-required = "true"
ng-model = "stdCtrl.brthdy"
class = "form-control"
placeholder = "DOB-Date Of Birth">{{x.birthday}}</input>
<span class = "help-block"
ng-show = "logForm.birthdy.$invalid && !logForm.birthdy.$pristine">BirthDay Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Home-Address</label>
<textarea name = "address"
ng-required = "true"
ng-model = "stdCtrl.address"
class = "form-control"
placeholder = "PresentAddress"
row = "10" cols = "50" >{{x.address}}</textarea>
<span class = "help-block"
ng-show = "logForm.address.$invalid && !logForm.address.$pristine">PresentAddress Required</span>
</div>
<div class = "form-group col-lg-6">
<label>10<sup>th</sup>-Percentage</label>
<input type = "number"
name = "ten"
ng-required = "true"
ng-model = "stdCtrl.tenth"
class = "form-control"
placeholder = "10th percentage">{{x.tenth}}</input>
<span class = "help-block"
ng-show = "logForm.ten.$invalid && !logForm.ten.$pristine">10th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<label>12<sup>th</sup>-Percentage</label>
<input type = "number"
name = "twelve"
ng-required = "true"
ng-model = "stdCtrl.twelfth"
class = "form-control"
placeholder = "12th percentage">{{x.twelfth}}</input>
<span class = "help-block"
ng-show = "logForm.twelve.$invalid && !logForm.twelve.$pristine">12th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<input type = "submit"
id = "btn"
ng-disabled = "!logForm.$valid"
name = "Nextpage"
class = "form-control"
value = "Update" />
</div>
<div id = "form-group" class = "col-lg-6">
<input type = "submit"
name = "Cancel"
id = "btn1"
ng-click = "CancelForm()"
ng-disabled = "!logForm.$valid"
class = "form-control"
value = "Cancel" />
</div>
</form>
</div>
<script>
var app = angular.module('MyForm',[])
app.controller('StudentControl',['$scope','$http',function($scope,$http){
this.StudentCtrl = function(){
alert("bye");
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var fType = JSON.parse(decodeURIComponent(this.StudentCtrl()['data']));
console.log(fType);
$scope.fType = fType;
}]);
$(function(){
$("#birthdayPicker").datepicker({
dateFormat: "yy-mm-dd",
yearRange: '1980:2017',
changeMonth: true,
changeYear: true
});
});
</script>
</body>
</html>
What Im trying to do is Im getting the json object data in the above code but I have no idea to how to assign to my form fields.
Please give a suggestion guys
Your variables are in $scope.stdCtrl, try to console.log that
this.StudentCtrl = function() {
console.log($scope.stdCtrl);
}
JSFiddle
Try to pass the object in ng-submit like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl(stdCtrl)">
Or
Why not simply define a function inside the StudentCtrl like this
$scope.submitFunc = function(stdCtrl){
console.log(stfCtrl);
}
And change your form tag like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "submitFunc(stdCtrl)">