I am trying to update information clicking on edit change button. After updating the information, I want the updated information to be shown by hiding the form, when I click on Save Changes button. My api is working and information is getting updated.But ng-if is not working after clicking Save Changes button.
info.html file
<div class="panel-body" ng-if="userEnteredInfo">
<div class="form-group">
<dl class="dl-horizontal form-info-table">
<dt>First Name:</dt>
<dd>{{user.basicInfo.firstName}}
</dd>
<dt>Last Name:</dt>
<dd>{{user.basicInfo.lastName}}</dd>
<dt>Status:</dt>
<dd>{{user.basicInfo.status}}</dd>
<dt>Work Location:</dt>
<dd>{{user.basicInfo.workLocation}}</dd>
<dt>Date of Birth:</dt>
<dd>{{user.basicInfo.dateOfBirth}}</dd>
<dt>Title:</dt>
<dd>{{user.basicInfo.title}}</dd>
</dl>
</div>
</div>
<div class="panel-body form-panel-box" ng-if="makeChanges" ng-submit="saveChanges(user)">
<form class="form-horizontal edit-changes-form">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="firstName" ng-model="user.basicInfo.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastName">Last Name:
</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="lastName" ng-
model="user.basicInfo.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="status">Status:
</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="status" ng-
model="user.basicInfo.status">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Work Location">Work
Location:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="work" ng-
model="user.basicInfo.location">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dateOfBirth">Date of
Birth</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="dateOfBirth" ng-
model="user.basicInfo.dateOfBirth">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-3">
<input type="text/number" class="form-control" id="title"
ng-model="user.basicInfo.title">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-default">Save
Changes</button>
</div>
</div>
</form>
info.js file
app.controller('info',function($scope,$localStorage,authService,$http){
$scope.user = $localStorage.userObject;
$scope.userEnteredInfo = true;
$scope.editChanges = function(){
$scope.makeChanges = true;
$scope.userEnteredInfo= false;
}
//Edit changes for updating information//
$scope.saveChanges = function(userData){
$scope.updatedInfoDetails = {
firstName: userData.basicInfo.firstName,
lastName: userData.basicInfo.lastName,
status: userData.basicInfo.status,
WorkLocation: userData.basicInfo.location,
dateOfBirth: userData.basicInfo.dateOfBirth,
title: userData.basicInfo.title
}
authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
if(response.status == 200){
$scope.updatedInfo = "You have successfully updated the changes";
};
});
$scope.userEnteredInfo = false;
$scope.makeChanges = true;
console.log("success");
};
});
authService.js file
app.service('authService', function($localStorage,$http) {
this.postUpdatedInfo = function(userChangedInfo){
console.log('the user data is: ', userChangedInfo);
var urlForChangingInfo = "/api/users/" + $localStorage.getUserId;
return $http({
method:'PUT',
url:urlForChangingInfo,
data:userChangedInfo,
headers:{"x-access-token":$localStorage.authToken}
});
};
});
makeChanges is never made to false,
try this,
authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
if(response.status == 200){
$scope.updatedInfo = "You have successfully updated the changes";
};
});
$scope.userEnteredInfo = false;
$scope.makeChanges = false;
console.log("success");
};
you are never setting $scope.userEnteredInfo to true , can you try code given below :
authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
if(response.status == 200){
$scope.updatedInfo = "You have successfully updated the changes";
$scope.userEnteredInfo = true;//set true here
$scope.makeChanges = true;
console.log("success");
}
else
{
// error if response status other than 200
$scope.userEnteredInfo = false;
$scope.makeChanges = false;
console.log("error");
};
});
};
Related
I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();
I have a bootstrap form the info from which I am saving to a json file using an ajax call.
My problem is that when I press the Submit button the page seems to refresh after the call(executed after the submit button is clicked), which is something i'd definitely like to avoid.
I tried to investigate the problem, but my knowledge is insufficient for that as I don't have an indepth understanding of any of these concepts.
Here is my BS form :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
And here is the ajax call :
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
Now what the submit action refresh your page the click event will never be raised since the <button> tag has type='submit' by defaul just add type='button' type to avoid submit/refresh :
<button type="button" id="saveAppt" class="btn btn-default">Submit</button>
Hope this helps.
$(document).ready(function() {
$("#saveAppt").click(function(){
var fullName = $("#nameFull").val();
var userName = $("#cpr").val();
var phone = $("#phoneApp").val();
var email = $("#emailApp").val();
var date = $("#date").val();
var time = $("#time").val();
var reason = $("#reason").val();
console.log(time);
console.log(date);
console.log(reason);
var jAppointment= {};
jAppointment.fullName = fullName;
jAppointment.userName = userName;
jAppointment.phone = phone;
jAppointment.email = email;
jAppointment.date = date;
jAppointment.time = time;
jAppointment.reason = reason;
console.log(JSON.stringify(jAppointment));
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Full Name:</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="nameFull">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-2">
<input type="phone" class="form-control" id="phoneApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="emailApp">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="reason">Reason:</label>
<div class="col-lg-3">
<textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type='button' id="saveAppt" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<br><br><br><br><br><br>
Crate a reference to your event in your click handler.
$("#saveAppt").click(function(e){
then call the preventDefault function on that event after your AJAX call.
$.ajax
({
type: "GET",
dataType : 'json',
async: false,
url: 'save-appointments.php',
data: { data: JSON.stringify(jAppointment) },
success: function () {console.log("Thanks!"); },
failure: function() {console.log("Error!");}
});
e.preventDefault();
Here is my code:
<form class="form-horizontal"
name="commentForm"
ng-submit="submitComment()"
novalidate>
<div class="form-group"
ng-class="{ 'has-error has-feedback' : commentForm.name.$invalid && !commentForm.name.$pristine }">
<label for="name" class="col-sm-2 control-label">Your name</label>
<div class="col-sm-10">
<input type="text"
name="name"
class="form-control"
placeholder="your name"
ng-model="comment.name"
id="name">
<span class="help-block"
ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">
Name required
</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label" > Rating </label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value"
ng-value="{{star.value}}"
ng-model="comment.rating"
ng-checked="isSelected(star.value)">
{{star.value}}
</label>
</div>
</div>
<div class="form-group" ng-class="{'has-error has-feedback':comment.textComments.$error.required && !comment.textComments.$pristine}">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
here's my script
.controller('DishCommentController', ['$scope', function($scope) {
var stars=[
{value:"1"},
{value:"2"},
{value:"3"},
{value:"4"},
{value:"5"}
];
$scope.isSelected = function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"",textComments:"",date:""};
$scope.submitComment = function () {
$scope.comment.date=new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push("Your JavaScript Object holding the comment");
}
}]);
please someone help me on this
You're missing 'required' attribute in your input fields and you're trying to access property of undefined object '$scope.dish.comments'.
See code below:
(function() {
'use strict';
angular.module('app', []).controller('DishCommentController', DishCommentController);
function DishCommentController($scope) {
var stars = [{
value: "1"
}, {
value: "2"
}, {
value: "3"
}, {
value: "4"
}, {
value: "5"
}
];
$scope.isSelected = function(checkStar) {
console.log(checkStar == 5);
return checkStar == 5;
};
$scope.stars = stars;
//select default values here
$scope.comment = {
name: "",
rating: 4,
textComments: "",
date: ""
};
$scope.submitComment = function() {
$scope.comment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
// $scope.dish.comments.push("Your JavaScript Object holding the comment");
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DishCommentController">
<form name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group">
<label for="name">Your name</label>
<div>
<input type="text" name="name" class="form-control" placeholder="your name" ng-model="comment.name" id="name" required>
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Name required</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Rating</label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value" ng-value="{{star.value}}" ng-model="comment.rating" ng-checked="isSelected(star.value)">{{star.value}}
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" required placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
</body>
</html>
I am trying to load data from a Service to a form but is not binding to the field value the data loaded from the service/server:
The data from service is coming OK, the problem is after setting here in this code, I load a route to my form but the form keeps with the old values, this code is in my controller:
$scope.cadastro = {
email: '',
name: 'the name to put in the field',
city: ''
};
$scope.editar = function () {
myAppServices.getUserData($rootScope.uid).then(function (data) {
if (data !== null) {
$scope.cadastro = data;
$scope.cadastro.name = data.name;
$location.path('cadastro');
}
});
};
the HTML form:
<form name="myDataForm" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="email">Email</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Email" name="email" ng-model="cadastro.email" focus/>
<span ng-show="myDataForm.email.$error.email" class="help-inline">Email is not valid</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="name">Nome Completo</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" name="name" class="form-control" placeholder="Nome" ng-model="cadastro.name" />
<small class="errorMessage" data-ng-show="myDataForm.name.$dirty && myDataForm.name.$error.required"> Informe seu nome completo.</small>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="address">Cidade</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Cidade" ng-model="cadastro.city" />
</span>
</div>
</div>
<div class="form-group">
<span class="lbl col-sm-5"> </span>
<div class="col-sm-7">
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary" ng-click="salvarcadastroForm(cadastro)" data-ng-disabled="myDataForm.$invalid">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</div>
</form>
What should I do?
SOLUTION:
Load user data in a init method in the controller:
$scope.init = function () {
$scope.reset();
// if user logged then load data
if ($rootScope.uid !== undefined) {
myAppServices.getUserData($rootScope.uid).then(function (data) {
if (data !== null) {
$scope.formData = data;
}
});
}
};
I'm need to create a form that sends an ajax request everytime a form element is changed using the jQuery change event. I was able to get the form input values to show up in spans by doing this:
<form id="TestForm" class="form-horizontal">
<div class="form-group">
<label for="namefirst" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-6">
<input id="firstname" type="text" name="firstname" class="form-control" placeholder="Enter your first name" /><span id="spanfirstname"></span>
</div>
</div>
<div class="form-group">
<label for="namelast" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-6">
<input id="lastname" type="text" name="lastname" class="form-control" placeholder="Enter your last name" /><span id="spanlastname"></span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<div class="left-inner-addon"> <i class="glyphicon glyphicon-envelope"></i>
<input id="email" type="text" name="email" class="form-control" placeholder="Enter your email" /><span id="spanemail"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-6">
<div class="left-inner-addon"> <i class="glyphicon glyphicon-phone-alt"></i>
<input id="phone" type="text" name="phone" class="form-control" placeholder="Enter your phone number" /><span id="spanphone"></span>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input id="password" type="password" name="password" class="form-control" placeholder="Enter a password" /><span id="spanphone"></span>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label"></label>
<div class="col-sm-6">
<button class="button green major beeboop" name="button" type="submit">This is a test</button>
</div>
</div>
</form>
<div id="result"></div>
<div class="row spacer"></div>
</div>
<!-- /container -->
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#firstname').change(function() {
$('#output_firstname').val($(this).val());
$('#spanfirstname').html('<b> TestForm: firstname:' + $(this).val() + '</b>');
});
$('#lastname').change(function() {
$('#output_lastname').val($(this).val());
$('#spanlastname').html('<b>' + $(this).val() + '</b>');
});
$('#email').change(function() {
$('#output_email').val($(this).val());
$('#spanemail').html('<b>' + $(this).val() + '</b>');
});
$('#phone').change(function() {
$('#output_phone').val($(this).val());
$('#spanphone').html('<b>' + $(this).val() + '</b>');
});
$('#password').change(function() {
$('#output_password').val($(this).val());
$('#spanpassword').html('<b>' + $(this).val() + '</b>');
});
});
</script>
I tried the wrap the ajax request in the change event function with no success:
<script>
$(document).ready(function() {
$('#firstname').change(function() {
jQuery.post("ajax-process.cfm", {
firstname: jQuery('#firstname').val()
}, function(data) {
});
return false;
});
});
</script>
#omar-ali #Anil Namde Updated the code. But now I'm only getting the first value in the console:
$("input[type='text']").change(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url : "ajax-process.cfm",
type: "POST",
data: {
firstname: firstname,
lastname: lastname,
email: email
},
success: function(data) {
$("#simple-msg").html('<pre><code>' + data + '</code></pre>');
}
});
});
I tried your code, but instead of calling any ajax request, I just put a console.log('testing');
It works.
I guess what you don't realize (my feeling) is that.. the change is called not as you type..but once you lose focus from the text-box.
Also, it's better to use
var getallyourvalshere = $('#firstname').val();
$.post('linktoyourscript.php',{ firstname: getallyourvalshere }, function(data) {
//do stuff, console.log(data);
});
Why are you using return false;