input-field not refresh after receiving value - javascript

The entire process of collecting data from the first input-field and shipping to second input-field2 is working perfectly but so that the value actually goes to the second input-field i must delete some letter from first input-field and re-enter some number so that the value actually goes to second-input.
Gif of doubt.
$(document).ready(function () {
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code')
.change(onChange)
.keyup(onChange);
});
});
First input represents this field postal_code & Second input represents this field cepAddressRouteTransporter.
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
Thanks for help!

you have to call your function onChange when the DOM is ready
onChange();
when you update the value, trigger the DOM event.
$('#postal_code').trigger('change');
$(function() {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code').change(onChange).keyup(onChange);
// fire as soon as DOM is ready
onChange();
var t = window.setInterval(function(){
var n = Math.floor(Math.random() * 100000);
$('#postal_code').val(n);
// when you update the value, trigger the DOM event
$('#postal_code').trigger('change');
},1000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code" value="90210">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
</body>
</html>

#code_monk Thanks for your help, i've reshaped your recommendation and add a few new things.
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$cepAddressRouteTransporterGoogleMaps.change(onChange).keyup(onChange);
$cepAddressRouteTransporter.change(onChange).keyup(onChange);
onChange();
var refresh = window.setInterval(function () {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
}, 3000);
});

Related

Calculate a table column

I am looking to calculate a column within a table that is being created. I need the sum field to add up the values created from the form, which is created new rows for the table upon submit. Any way I can get the to add up the column sum? Each time a function updatetable() is run is creates another table row, and these are the rows I need calculated...currently the column holds a "184" as a holding place for where the calculation would take place.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The real test</title>
<link rel="stylesheet" href="html_testing.css">
<script type="text/javascript"> <!--
var tabBody, row, cell;
function updateTable(){
tabBody=document.getElementById("joe$");
row=document.createElement("tr");
row.setAttribute("id","js");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[2].value;
row.appendChild(cell);
if(tabBody.childNodes.length==17)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
function updateTable1(){
tabBody=document.getElementById("joe");
row=document.createElement("tr");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[3].value;
row.appendChild(cell);
if(tabBody.childNodes.length==17)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
function myFunctionJoe(){
updateTable();
updateTable1();
}
function moneymoney(){
('#joe$ tr:first td').each(function(){
var $td = $(this);
var colTotal = 0;
$('#joe$ tr:not(:first,.totalColumn)').each(function(){
colTotal += parseInt($(this).children().eq($td.index()).html(),10);
});
$('#joe$ tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal);
});
}
</script>
<body>
<h2>Legion of Roar:</h2>
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
<input type="radio" name="led" value="1" />On<br>
Winning Bid: <input type="text" name="timer" placeholder="Bid..." /><br>
Player Drafted: <input id="name" type="text" name="user" placeholder="Player Name..." /><br>
Player Position: <input id="name" type="text" name="user" placeholder="Position..." /><br>
<br>
<input type="submit" value="Joe" onclick="myFunctionJoe();"/>
<h1>Testing some skills</h1>
<fieldset>
<table border ='1' class="inlineTable">
<thead><tr><th>Joe</th></tr></thead>
<thead><tr><th>200</th></tr></thead>
<tr class="totalColumn">
<td class="totalCol">Spent:</td>
</tr>
<tbody id="joe"><tbody>
</table>
<table border ='1' class="inlineTable">
<thead><tr><th>$</th></tr></thead>
<thead><tr><th>184</th></tr></thead>
<tr class="totalColumn">
<td class="totalCol">Spent:</td>
</tr>
<tbody id="joe$"><tbody>
</table>
</body>
</html>

Splitting a Javascript Variable into an html table

I am unable to split a variable that holds 5 fields from a form into a table in 5 different sections of the same row. I would appreciate any assistance.
// The section below this line is where the variable from the form input
// is inserted, but the role is not split into 5 different cells.
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += info.elements[i].value;
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
<table style="width:100%">
<tr>
<th>First Name</th>
</tr>
<tr id ="data">
</tr>
</table>
If you want the data into different columns, you have to create the columns and append them to a row.
You do not want to concatenate the data into a single var, because you want to keep the data split up into columns.
You could do this:
function getInfo() {
const info = document.getElementById("form1");
const row = document.getElementById("data");
for (let i =0; i < info.length; i++) {
// Make a new column
const col = document.createElement('td');
// Make a new text node
const colText = document.createTextNode(info.elements[i].value);
// Append text to column
col.appendChild(colText);
// Append column to the row (id of data)
row.appendChild(col);
}
}
You need to add the table cell markup to your string, given your current approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Custom css -->
<style>
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
</style>
<title>My Web Page</title>
</head>
<body>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
<tr id ="data">
</tr>
</table>
<!-- Javascript function for the user input -->
<script type="text/javascript">
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += "<td>"+info.elements[i].value+"</td>";
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}
</script>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
</body>
</html>
Used the following methods, properties, and API:
HTMLFormControlsCollection
Array.from()
forEach()
.insertCell()
.textContent
Demo
Details are commented in Demo
function distData(e) {
//HTMLFormControlsCollection
var F = document.forms.form1;
var x = F.elements;
//Convert Collection into an array
var fieldArray = Array.from(x);
console.log(fieldArray);
//Reference tr#data
var R = document.getElementById('data');
//Each input in array will...
fieldArray.forEach(function(field, index) {
//Check if input has a value
if (field.value.length > 0) {
//Create a <td> snd insert it into R
var cell = R.insertCell(index);
//Copy the input value into cell
cell.textContent = field.value;
} else {
//if form control has no value ignore it
console.log('field has no value');
}
});
return false;
}
table {
margin: 0 auto 20px
}
table,
td {
border: 3px inset grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
div.ui-input-text {
width: 200px
}
button {
width: 200px
}
</style>
</head>
<body>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br> Last name: <input type="text" name="lname" id="lname1" required><br> Address: <input type="text" name="th>" id="address1" required><br> City: <input type="text" name="city" id="city1"
required><br> State: <input type="text" name="state" id="state1" required><br>
<button onclick='distData()' type='button'>DATA</button>
</form>
<p>Click the button below to display your entry.</p>
<table style="width:100%">
<tr>
<th colspan='2'>Name</th>
<th colspan='3'>Location</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
The section below this line is where the variable from the form input is inserted, but the role is not split into 5 different cells.
<tr id="data">
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
The problem is that you are concatenating each field into a string; there is no delimiter in the string so there is no logical way to break it up. What you want to do instead is store each field in an array, then you can iterate over that to build up a HTML string, or better yet just use Array.prototype.join() to create the HTML for the cells you are creating.
function getInfo() {
var info = document.getElementById("form1");
var fields = []; // create an empty array
var i;
for (i=0; i < info.length; i++) {
fields.push(info.elements[i].value);
}
document.getElementById("data").innerHTML = '<td>' + fields.join('</td><td>') + '<td>';
}
document.getElementById('try-it').addEventListener('click', getInfo, false);
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<button id="try-it">Try it</button>
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
<tr id ="data">
</tr>
</table>
This will work, but it produces a table that can only have one row of data in it; every time you hit "Try It" the existing data will be replaced. To add more than one row, instead of targeting a particular row and inserting cells into it, create an entire row and append it to the table. Since you are already using jQuery, I'm using it in the below example.
function getInfo() {
// Create an array containing the values of all of the fields.
// First, select all of the input elements inside of the form,
// Then, use .map() to extract their values, finally use .get() to
// turn the jQuery object into an array.
var fields = $('#form1 input').map(function () {
return this.value;
}).get();
// create a new row and append it to the table.
$('#display-table').append('<tr><td>' + fields.join('</td><td>') + '<td></tr>');
}
// instead of using in-line event handlers, attach it in your code.
$('#try-it').on('click', getInfo);
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<button id="try-it">Try it</button>
<table id="display-table" style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
</table>
More resources
jQuery API reference main page
jQuery learning center
.map()
.append()
.get()
Array.prototype.push

Replacing onClick() with addEventListener()

Converting oclick() with addEventListener(), i have tried multiple times, But no Success. Can anyone help please. i have read in the book, that onlick() is not w3 standard, Any help will highly be aprreciated
Before with onclick() working Perfectly:
html code
<!DOCTYPE html>
<html>
<head>
<title>Splitting number</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" onclick="parseNumber()"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
</body>
</html>
javascript code:
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
after, Not working:
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
</body>
</html>
javascript code
var completeNumber = document.getElementById("number");
x = document.getElementById( "myBtn" );
function parseNumber() {
x.addEventListener("click", parseNumber);
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
You need to add the event listener outside the function.
The listener is listening (clues in the name) for a mouse 'click' event on that element. When the event happens i.e you click on the element, it calls the function that it is assigned, in your case: parseNumber.
So since you are adding the event listener inside the function, it never gets added (as the function never gets called).
It should all work if you move the lines:
var x = document.getElementById( "myBtn" );
x.addEventListener("click", parseNumber);
outside the function. :)
I thnik no one actually read the question, if you already had a working example then changing onclick to eventListener is no problem:
var parseNum = document.getElementById('parse-number');
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
parseNum.addEventListener("click", parseNumber);
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" id="parse-number"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
Change your code to this where eventListener is added outside the bounded function. Otherwise it will repeatedly bind an eventListener to the button.
Also place your script.js on the bottom of the HTML page. Because when the script executed the DOM element is not found since the DOM is not rendered at the script execution time.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript
var completeNumber = document.getElementById("number");
var x = document.getElementById( "myBtn" );
function parseNumber() {
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
x.addEventListener("click", parseNumber);

Update table row data in Angular

Hello I am learning angular, i need help over a functionality, i have a dynamic table and a form, when i click on a any row of the dynamic table that data should populate in the input boxes of form and when i edit and save the data in input boxes that should reflect with changes on the same. `
$scope.Save= function($index){
var user1= angular.copy($scope.displayData[$index]);
fc.saveData.push(user1);
console.log(fc.saveData.name);
}}
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<table class="table2">
<tr>
<th>Player</th>
<th>Age</th>
<th>Ranking</th>
</tr>
<tr ng-repeat=" usr in saveData" ng-click="fnClick(usr)">
<td>{{$index}}</td>
<td>{{::usr.player}}</td>
<td>{{::usr.age}}</td>
<td ng-bind="::usr.ranking"></td>
</tr>
</table>` and my input boxes code is here `
<div>
<button class="btn" ng-click="Savedata()">Saveintable</button>
<label for="field1">
<span>Name</span><input type="text" name="" required="true" ng-model="displayData.name"/>
</label>
<label for="field2">
<span>Age</span><input type="text" required="true" ng-model="displayData.age"/>
</label>
<label>
<span>Ranking</span><input type="text" ame="" required="true" ng-model="displayData.ranking"/>
</label>
</label>
</div>
var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
$scope.saveData=[{
player:"John",
age:"24",
ranking:'1'
},
{
player:"John1",
age:"25",
ranking:'2'
},
{
player:"John3",
age:"26",
ranking:'3'
}];
$scope.fnClick=function(usr,index)
{
$scope.formData=angular.copy($scope.saveData[index]); //usr object will be assigned to $scope.formData...
$scope.formData.index=index;
console.log($scope.formData);
}
$scope.SaveDataFun= function(formData){
console.log('save data');
var index$=formData.index;
console.log(index$);
// now I assume that displayData is a list of objects.
angular.forEach($scope.saveData,function(data,index){
console.log(index +' '+ index$);
if(index==index$) // this will match your ediated row index$ to displayData objects row index.
{ console.log('if')
console.log(data);
$scope.saveData.splice(index,1);
$scope.saveData.splice(index,0,formData);
console.log(formData);
$scope.formData={};
}
});
}
});
I had posted answer but not knowing about your problem. Played with it and again posting answer. Hope this will help you.
Demo
Try this super simple snippet...
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Ranking</th>
<th>Edit</th>
</tr>
<tr ng-repeat="usr in tableData">
<td>{{$index+1}}</td>
<td>{{usr.name}}</td>
<td>{{usr.age}}</td>
<td>{{usr.ranking}}</td>
<td><button ng-click="edit($index)">Edit</button></td>
</tr>
</table>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-lg-3">
<form>
<div class="form-group">
<label>Name : </label>
<input type="text" name="" ng-model="displayData.name" class="form-control"/>
</div>
<div class="form-group">
<label>Age : </label>
<input type="text" ng-model="displayData.age" class="form-control"/>
</div>
<div class="form-group">
<label>Ranking : </label>
<input type="text" ng-model="displayData.ranking" class="form-control"/>
</div>
<button class="btn" ng-click="Savedata(index)">Save in table</button>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope)
{
$scope.index = -1;
$scope.displayData = [];
$scope.tableData =
[
{name:'paresh',age:20,ranking:2},
{name:'gami',age:25,ranking:1},
]
$scope.Savedata = function(index)
{
if(index==-1)
{
//add
$scope.tableData.push($scope.displayData);
$scope.displayData=[];
$scope.index = -1;
}
else
{
$scope.tableData[index] = $scope.displayData;
$scope.displayData=[];
$scope.index = -1;
}
}
$scope.edit = function(index)
{
console.log(index);
$scope.index = index;
$scope.displayData['name'] = $scope.tableData[index]['name'],
$scope.displayData['age'] = $scope.tableData[index]['age'],
$scope.displayData['ranking'] = $scope.tableData[index]['ranking'];
}
});
</script>

Button click not working

The following code was working very well. Suddenly, the Edit button click stopped working. When the user used to click Edit button, a JSON code executed. But it is not recognizing the click now. Something happened accidentally? Please assist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/calendar.js" type="text/javascript"></script>
<link href="js/calendar.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/wysiwyg.css" type="text/css">
<script type="text/javascript" src="js/wysiwyg.js"></script>
<script type="text/javascript" src="js/wysiwyg-settings.js"></script>
<!-- JSON implementation to get data through JQuery/AJAX -->
<script type="text/javascript">
$(document).ready(function(){
$("#Edit").click(function(){
$.getJSON("fetchvalues.php?UpdateRecordID=" + $.cookie('UpdateRecordID'),
function(data){
//Fill the Form with the data values
document.getElementById('LDate').value = data[0];
document.getElementById('Places').value = data[1];
document.getElementById('Company').value = data[2];
document.getElementById('Designation').value = data[3];
document.getElementById('ProjectDetails').value = data[4];
document.getElementById('DesiredCandidate').value = data[5];
document.getElementById('HRName').value = data[6];
document.getElementById('HRContact').value = data[7];
document.getElementById('Email').value = data[8];
});
});
});
</script>
<title>Job Listing Entry</title>
</head>
<body>
<table id="main" cols="2">
<tr>
<td>
<Form id="frmNewEntry" method="post" action="insert_listing.php">
<table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
<tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
<tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
<script type="text/javascript">
WYSIWYG.attach('all', full);
calendar.set("LDate");
</script></td>
<td>
<table>
<tr>
<td rowspan="6">
<!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">
</iframe> -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
<!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
<tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
<tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
<tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
<tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
<tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
<tr></tr>
<tr>
<td bgcolor="lightblue">
<input id="Clear" name="Clear" value="Clear" type="button" onclick="ClearFields();">
</td>
<td bgcolor="lightblue">
<input id='Submit' name='Submit' value='Submit' type='submit' />
</td>
</tr>
</table>
</Form>
</td>
<td>
<table id="list" cols="2" style="border:none">
<tr>
<td colspan="2" style="border:none">
<iframe src="show_db_vacancy_entries.php" height="600px" style="border:none;">
</iframe>
</td>
</tr>
<tr>
<td align="left">
<input id="Edit" name="Edit" value="Edit Record" type="button" />
</td>
<td align="right">
<input id="Delete" name="Delete" value="Delete" type="button" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function MakeInitialCapital(str)
{
return str.toLowerCase().replace(/\b[a-z]/g, cnvrt);
function cnvrt() {
return arguments[0].toUpperCase();
}
}
//Convert initials to capital in a certain control
function MakeInitialCapitalControl(controlName)
{
var ctrl = document.getElementById(controlName).value;
if(/^[A-Z]/.test(ctrl.value)) {
ctrl.value = ctrl.value.toLowerCase();
return;
}
/* ctrl.value = ctrl.value.toLowerCase().replace(/\b[a-z]/g, function {
return arguments[0].toUpperCase();
});*/
}
function ClearFields()
{
document.getElementById('Email').value = "";
document.getElementById('HRContact').value = "";
document.getElementById('HRName').value = "";
document.getElementById('DesiredCandidate').value = "";
document.getElementById('ProjectDetails').value = "";
document.getElementById('Designation').value = "";
document.getElementById('Company').value = "";
document.getElementById('Places').value = "";
document.getElementById('LDate').value = "";
}
</script>
I've tested the code, after removing all the external JS and CSS files, and it seems to work fine.
The problem is most likely with the JSON data that you are getting back. Perhaps you did something to the PHP file it is calling, so that the JSON object is malformed, or there is a PHP warning being printed. (Could be a result of a change in the PHP configuration, too)
I would suggest that you try using the page in Firefox with the Firebug addon active (or something equivalent). It will show you exactly what the JSON request is returning, and whether there are any errors with the request.
As Atli said, the code looks fine. Im curious about this $.cookie('UpdateRecordID'), being part of the querystring. What happens if the cookie is not set?
Can you verify a proper response via firebug?

Categories

Resources