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>
Related
hello I'm working on a simple project where a user inputs the information and it goes into a table. I want the user to have the ability to put in the URL for an image and have it show up when the cell is made in the table. I have a button that prompts the user to input a URL but I cant figure out how to put that into an image tag inside the created cell.
let id = 0;
let img = document.getElementById("image").addEventListener("click", () => {
function getUrl() {
var url = prompt("Enter image URL");
if (url) {
return url;
} else {
return getUrl();
}
}
image.src = getUrl();
});
document.getElementById("add").addEventListener("click", () => {
let table = document.getElementById("list");
let row = table.insertRow(1);
row.setAttribute("id", `
test - $ {
id
}
`);
row.insertCell(0).innerHTML = document.getElementById("image").src = ""
row.insertCell(1).innerHTML = document.getElementById("Game-name").value;
row.insertCell(2).innerHTML = document.getElementById("hours-played").value;
row.insertCell(3).innerHTML = document.getElementById("new-critic-score").value;
row.insertCell(4).innerHTML = document.getElementById("new-personal-score").value;
let actions = row.insertCell(5);
actions.appendChild(createDeleteButton(id++));
document.getElementById("Game-name").value = "";
document.getElementById("hours-played").value = "";
document.getElementById("new-critic-score").value = "";
document.getElementById("new-personal-score").value = ""
});
function createDeleteButton(id) {
let btn = document.createElement("button");
btn.className = "btn btn-primary";
btn.id = id;
btn.innerHTML = "Delete";
btn.onclick = () => {
console.log(`
Deleting row with id: test - $ {
id
}
`);
let elementToDelete = document.getElementById(`
test - $ {
id
}
`);
elementToDelete.parentNode.removeChild(elementToDelete);
};
return btn;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
</head>
<body class="container" style="background-color: rgb(3, 27, 63);">
<!--Using HTML, Bootstrap, and JavaScript create a single page website that contains the following:
a. A Bootstrap styled table representing your choice of data.
b. A Bootstrap styled form that allows users to add input data as a new row to the table when submitted.
-->
<br />
<div class="card" style="background-color: rgb(7, 59, 75);color: rgb(255, 255, 255);">
<div class="card-body">
<div class="row">
<div class="col-sm">
<div>
<label for="new-critic-score">Critic score</label>
<input type="text" class="form-control" id="new-critic-score" placeholder="score out of 100" />
</div>
</div>
<div class="col-sm">
<div>
<label for="new-personal-score">Personal score</label>
<input type="text" class="form-control" id="new-personal-score" placeholder="score out of 100" />
</div>
</div>
<div class="col-sm">
<div>
<label for="hours-played">Hours played</label>
<input type="text" class="form-control" id="hours-played" placeholder="hours" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div>
<label for="Game-name">Game name</label>
<input type="text" class="form-control" id="Game-name" placeholder="Game title" />
</div>
</div>
</div>
<div class="col-sm">
<div> <br>
<button id="image" class="btn btn-secondary from-control">add image</button>
<button id="add" class="btn btn-primary from-control">Create</button>
</div>
</div>
</div>
</div>
<table id="list" class="table table-dark table-striped">
<tr>
<th>game image</th>
<th>games played</th>
<th>Hours played</th>
<th>critic score</th>
<th>personal score</th>
<th>Actions</th>
</tr>
</table>
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
<img src="" alt="">
It wasn't clear to me how you wanted to do it, I basically got the URL and stored it in a var to then make another variable that is the image element itself, using the stored URL.
let imgURL;
let imgElement;
document.getElementById("image").addEventListener("click", () => {
imgURL = prompt("Enter image URL");
imgElement = '<img src="' + imgURL + '" width="80px">';
});
I also did the deletion in a similar way. Creating the element with an onclick to a function that passes the element itself with this as a parameter.
let deleteButton = '<input type="button" value="Delete" onclick="deleteRow(this)">'
and
row.insertCell(5).innerHTML = deleteButton;
Getting the ID by working your way up the parent elements to find the rowIndex.
function deleteRow(row) {
var id = row.parentNode.parentNode.rowIndex;
document.getElementById("list").deleteRow(id);
}
Hope the code itself helps you understand it better.
https://jsfiddle.net/sahil_m03/jmk4rbp3/43/
I am working with the OpenWeatherMap API and can't seem to figure out why one of my fields is showing up undefined. Everything is working except for when I try to retrieve the weather condition, which is located at weather.description, it is returning undefined. All of the other variables fill in fine. Anyone know what could be preventing this from working correctly?
My JavaScript:
var request = new XMLHttpRequest();
function getWeather() {
var latitude = document.getElementById("lat").value;
var longitude = document.getElementById("long").value;
request.open('GET', 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=imperial&appid=547fa6dfa44cff13fa92bba2c465b366', true);
request.send();
request.onreadystatechange = displayData;
}
function displayData() {
if(request.readyState === 4 && request.status === 200) {
var resultData = JSON.parse(request.responseText);
var location = document.getElementById("location")
var temperature = document.getElementById("temperature");
var windspeed = document.getElementById("windspeed");
var condition = document.getElementById("condition");
location.value = resultData.name +", " + resultData.sys.country;
temperature.value = resultData.main.temp + " degrees Fahrenheit";
windspeed.value = resultData.wind.speed + " miles per hour";
condition.value = resultData.weather.description;
document.getElementById("resultset").style.visibility = "visible";
}
}
// Create an event handler for when the btn button is clicked
window.onload = function() {
var btn = document.getElementById("btn");
btn.addEventListener("click", getWeather, false);
}
My HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>Weather Report</h1>
</header>
<article>
<h2>Weather Data</h2>
<table style="width:100%">
<tr>
<th><strong>City</strong></th>
<th><strong>Coordinates</strong></th>
</tr>
<tr>
<td>Batavia, OH, US</td>
<td>Latitude: 39.07859<br>
Longitude: -84.17941</td>
</tr>
<tr>
<td>Cincinnati, OH, US</td>
<td>Latitude: 39.10713<br>
Longitude: -84.50413</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<form action="#" method="post" id="theForm" novalidate>
<fieldset id="coordinateset">
<label for="lat" id="latlabel">Latitude:</label>
<input id="lat" type="number" />
<label for="long" id="longlabel">Longitude:</label>
<input id="long" type="number" />
</fieldset><br><br>
<fieldset id="resultset">
<label for="location" id="locationlabel">Location:</label>
<input id="location" type="text" readonly />
<label for="temperature" id="temperaturelabel">Temperature:</label>
<input id="temperature" type="text" readonly />
<label for="windspeed" id="windspeedlabel">Wind Speed:</label>
<input id="windspeed" type="text" readonly />
<label for="condition" id="conditionlabel">Weather Condition:</label>
<input id="condition" type="text" readonly />
</fieldset>
</form>
<button id="btn">Submit Coordinates</button>
</article>
<script src="js/weather_report1.js"></script>
</body>
</html>
If you see the API at the OpenWeatherMap site, we see that the weather property is an array. To access the weather's description, try weather[0].description, or better yet, loop through it and extract each weather condition's description if it suits your use case.
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);
});
Here is my angular view,
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="skipColumn[0]" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn(skipColumn)">Add SkipColumn</button>
<br />
which adds new textfield every time i click addSkipColumn button.
here is my js code:
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function (skipColumn) {
if($scope.config.skipColumns==null){
$scope.config.skipColumns=[];
}
$scope.config.skipColumns.push([]);
}
so the problem is when I display or see the structure of $scope.config.skipColumns, It gives the following output:
{
skipColumns:[["content of textfield1"],["content of textfield1"]..]
}
But what I need is,`
{
skipColumns:["content of textfield1","content of textfield1",..]
}
please help me.("content of textfield" resfers to form data)
What you need here is to change what you are pushing in config.skipColumns array. Like this:
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
And, ng-repeat would be like:
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>
(why did I not use skipColumn directly in the ng-model?)
Here's working example:
angular.module("myApp", [])
.controller("ctrl", function($scope) {
$scope.config = {};
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="config.skipColumns[$index]" />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn()">Add SkipColumn</button>
<br />
<br>
<pre>{{config.skipColumns}}</pre>
</body>
</html>
See this... Just push value instead of array.
var app = angular.module('angularjs', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = ['choice1'];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push('choice'+newItemNo);
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div ng-app="angularjs" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>Mobile</option>
<option>Office</option>
<option>Home</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
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?