I've been studying and trying ajax for a couple of days. This code is totally working when page is reloading, However, my target is when I submit the form, it will not reload.
I've been trying it for couple days and it's really not working. It is submitting and reloading instead of not reloading.
I have provided my code below:
Views:
<form method="post" action="" onsubmit="return post();" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="number" class="form-control" name="fightIDa" id="fightID" aria-describedby="emailHelp" placeholder="FIGHT NUMBER" hidden />
</div>
<input type="text" id="arenaID" name="arenaID" hidden />
<div class="form-group">
<label for="exampleInputEmail1"><i class="fas fa-user mr-2"></i>Handler Name</label>
<input type="text" class="form-control" name="handlerName" id="handlerName" aria-describedby="emailHelp" placeholder="Enter Handler Name" required />
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1"><i class="fas fa-clipboard mr-2"></i>Position</label> -->
<!-- <input type="text" class="form-control" name="position" value="MERON" id="meron1" aria-describedby="emailHelp" placeholder="Enter Rooster Description" required> -->
<!-- </div> -->
<label for="exampleInputEmail1"><i class="fas fa-clipboard mr-2"></i>Rooster Specifications</label>
<div class="row">
<div class="form-group col-3">
<input type="text" class="form-control" name="bodyColor" id="bodyColor" aria-describedby="emailHelp" placeholder="Body Color" required />
</div>
<div class="form-group col-3">
<input type="text" class="form-control" name="legColor" id="legColor" aria-describedby="emailHelp" placeholder="Leg Color" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="wingSpan" id="wingSpan" aria-describedby="emailHelp" placeholder="Wing Span" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="weight" id="weight" aria-describedby="emailHelp" placeholder="Weight" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="tailColor" id="tailColor" aria-describedby="emailHelp" placeholder="tailColor" required />
</div>
<div class="form-group col-2">
<input type="text" class="form-control" name="breed" id="breed" aria-describedby="emailHelp" placeholder="Breed" required />
</div>
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1">Rooster Photo</label> -->
<!-- <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter Date Added" required> -->
<!-- </div> -->
<div class="form-group">
<label for="pic_file"><i class="fas fa-images mr-2"></i>Rooster Image</label>
<input type="file" name="roosterPhoto" class="form-control btn-sm" id="roosterPhoto" />
</div>
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1">Date Added</label> -->
<!-- <input type="date" class="form-control" name="date" value="" id="addedBy" aria-describedby="emailHelp" placeholder="Enter Date Added" required> -->
<!-- </div> -->
<!-- <div class="form-group"> -->
<!-- <label for="exampleInputEmail1"><i class="fas fa-at mr-2"></i>Added By</label> -->
<!-- <input type="text" class="form-control" name="addedBy" aria-describedby="emailHelp" placeholder="USERNAME" disabled> -->
<!-- </div> -->
<!-- select -->
<button type="submit" class="btn btn-success btn-danger text-bold float-right" id="meron" value="save">Submit</button>
</form>
<p id="status"></p>
<!-- end form -->
Controller:
public function creates(){
$id = $this->input->post('arenaID');
$data = array (
'fightID' => '0',
'handlerName' => $this->input->post('handlerName'),
'position' => 'meron',
'bodyColor' => $this->input->post('bodyColor'),
'legColor' => $this->input->post('legColor'),
'wingSpan' => $this->input->post('wingSpan'),
'weight' => $this->input->post('weight'),
'breed' => $this->input->post('breed'),
'tailColor' => $this->input->post('tailColor'),
'addedBy' => $this->session->userdata('uid'),
'fightStatus' => 'on-queue',
'arenaID' =>$id,
'roosterPhoto' => $this->upload(),
);
$this->db->insert('fight_entries', $data);
echo 'Added successfully.';
}
Script & Ajax:
function post() {
var fightID = document.getElementById("fightID").value;
var arena = document.getElementById("arenaID").value;
var handlername = document.getElementById("handlerName").value;
var bodycolor = document.getElementById("bodyColor").value;
var legcolor = document.getElementById("legColor").value;
var wing = document.getElementById("wingSpan").value;
var weight = document.getElementById("weight").value;
var tail = document.getElementById("tailColor").value;
var breed = document.getElementById("breed").value;
var photo = document.getElementById("roosterPhoto").value;
if (fightID && arenaID && handlerName && bodyColor && legColor && wingSpan && weight && tailColor && breed && roosterPhoto)
$.ajax({
type: "POST",
url: "<?=site_url('arena/creates')?>",
data: {
fightID: fightID,
arenaid: arenaID,
handler_Name: handlerName,
body_Color: bodyColor,
leg_Color: legColor,
wing_Span: wingSpan,
weight: weight,
tail_Color: tailColor,
breed: breed,
rooster_Photo: roosterPhoto
},
success: function(response) {
document.getElementById("status").innerHTML = "Form Submitted Successfully";
}
});
return false;
}
You need to return false bottom of the submit function
like this
<script type="text/javascript">
$('form').submit(function (e) {
e.preventDefault();
var handlerName = $("input[name='handlerName']").val();
var bodyColor = $("input[name='bodyColor']").val();
var legColor = $("input[name='legColor']").val();
var wingSpan = $("input[name='wingSpan']").val();
var weight = $("input[name='weight']").val();
var breed = $("input[name='breed']").val();
var tailColor = $("input[name='tailColor']").val();
var roosterPhoto = $("input[name='roosterPhoto']").val();
$.ajax({
type: "POST",
url: "<?= site_url('arena/creates')?>",
data: {
handlerName: handlerName,
bodyColor: bodyColor
legColor: legColor,
wingSpan: wingSpan,
weight: weight,
breed: breed,
tailColor: tailColor
roosterPhoto: roosterPhoto
},
dataType: "json",
error: function () {
alert('Something is wrong');
},
success: function (data) {
alert('form was submitted');
}
});
return false;
}
</script>
Related
HTML:
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn" onclick="new User().register()">REGISTER</div>
</div>
</form>
Js File
var User = function() {
var self = this;
self.register = function() {
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/
var regEight = /^8[0-9].*$/
if($("#empId").val() =='')
{
alert(Language.InvalidEmployeeId);
return false;
}
if(mobile =='')
{
alert(Language.EmptyMobileNumber);
return false;
}
}
};
if i write a coding for click event like below its working when i use OnClick event function is not calling
$("#regBtn").click(function ()
{
new User().register();
})
how to make the onclick work.. thanks in advance
In onclick call a function that does new User().register().
Do not write literal expression, wrap that expression in function and call that function.
try with this code
$("#regBtn").click(function() {
var mobile = $("#mobile").val();
var regSeven = /^7[0-9].*$/;
var regEight = /^8[0-9].*$/;
if ($("#empId").val() == '') {
// alert(Language.InvalidEmployeeId);
console.log("InvalidEmployeeId");
return false;
}
if (mobile == '') {
//alert(Language.EmptyMobileNumber);
console.log("Empty mobile number");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="javascript:if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn">REGISTER</div>
</div>
</form>
</div>
Do something like this...
<div class="loginDiv">
<form class="validate" role="form">
<div class="form-group float-label-control">
<input type="text" id="empId" placeholder="Employee ID" required>
</div>
<div class="form-group float-label-control">
<input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
</div>
<div class="align_center">
<div class="btn loginBtn" id="regBtn" onclick="registerUser()">REGISTER</div>
</div>
</form>
</div>
Java script
function registerUser(){
new User().register();
}
In this case the function registerUser() is re-usable as you commented above "Actually i want to make use of the onclick event so that function can be reused if i give a id i cant reuse that in another page".
(function() {
var app = angular.module('snc', []);
app.controller("QueryController", function($http) {
this.query = {};
this.sendQuery = function(contact) {
contact.querys.push(this.query);
this.query = {};
};
});
})();
<form name="queryForm" ng-controller="QueryController as queryCtrl" ng-submit="queryForm.$valid && queryCtrl.sendQuery(contact)" novalidate>
<blockquote>
<b>Name: {{queryCtrl.query.name}}</b><br/>
<b>Mobile: {{queryCtrl.query.mobile}}</b><br/>
<b>Eamil: {{queryCtrl.query.email}}</b><br/>
<b>Message: {{queryCtrl.query.message}}</b><br/>
</blockquote>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="queryCtrl.query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div class="form-group">
<label for="Mobile">Mobile:<span class="required">*</span></label>
<input type="number" ng-model="queryCtrl.query.mobile" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" ng-model="queryCtrl.query.email" class="form-control" id="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea type="text" ng-model="queryCtrl.query.message" class="form-control" id="name" placeholder="Enter Your Message" rows="4" required></textarea>
</div>
<div> reviewForm is {{queryForm.$valid}} </div>
<button type="submit" class="btn btn-snc">Submit</button>
</form>
I'm Using ng-app="snc" and Angularjs version 1.6, this is a simple contact form please check it and give me some advice. i want to send contact form into php page, where i use form data for send email for query and add it into database.
Try this code sample code
(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>
I am having an issue using jQuery validate against a form in a current project.
I am sure it is a typo I am missing or something small, but can't sem to figure out why it is occurring.
The error I am getting in the console debugger is: Object doesn't support property or method 'validate'
The bundle configuration file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/ContactForm.js"));
The code snippets are below:
<form action="#Url.Action("UpdateContactInformation", "ContactController")" method="post" role="form" class="form-horizontal" id="contactForm">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<!-- First Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input class="form-control" id="id_firstName" maxlength="75" name="txtFirstName" placeholder="First Name" required="required" title="" type="text" />
</div>
</div>
<!-- Last Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input class="form-control" id="id_lastName" maxlength="75" name="txtlastName" placeholder="Last Name" required="required" title="" type="text" />
</div>
</div>
<!-- Title Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-4">
<input class="form-control" id="id_title" maxlength="75" name="txtTitle" placeholder="Title" required="required" title="" type="text" />
</div>
</div>
<!-- Address Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Address</label>
<div class="col-md-4">
<input class="form-control" id="id_address" maxlength="75" name="txtAddress" placeholder="Address" required="required" title="" type="text" />
</div>
</div>
<!-- City Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">City</label>
<div class="col-md-4">
<input class="form-control" id="id_city" maxlength="75" name="txtCity" placeholder="City" required="required" title="" type="text" />
</div>
</div>
<!-- State Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuStates" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="statesDropDownMenu" aria-labelledby="dropdownMenuStates">
</ul>
</div>
</div>
</div>
<!-- Zip Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">ZipCode</label>
<div class="col-md-4">
<input class="form-control" id="id_zipCode" maxlength="75" name="txtZipCode" placeholder="ZipCode" required="required" title="" type="number" />
</div>
</div>
<!-- Email Primary Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Email Primary</label>
<div class="col-md-4">
<input class="form-control customEmail" id="id_emailPrimary" maxlength="75" name="txtEmailPrimay" placeholder="Email Primary" required="required" />
</div>
</div>
<!-- Email Secondary (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailSecond" maxlength="75" name="txtEmailSecond" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<!-- Email Third (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailThird" maxlength="75" name="txtEmailThird" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span> Submit Contact Info
</button>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval");
#Scripts.Render("~/bundles/custom"); //contains the file I am trying to add $.validate.AddMethod() to
Here is the code for Contact.js
$.validator.addMethod(
"customEmail",
function (value, element) {
var re = new RegExp("/^#{0,2}\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*#{0,2}$/");
return this.optional(element) || re.test(value);
},
"Please enter a valid email address."
);
$(document).ready(function () {
console.log("Were here.........");
// populateStatesDropDown();
$('#contactForm').validate({ // initialize the plugin
rules: {
txtZipCode: {
required: true,
numeric: true
},
txtEmailPrimay: {
required: true,
customEmail:true
},
txtEmailSecond:{
required:false,
customEmail:true,
},
txtEmailThird: {
required: false,
customEmail:true
}
}
});
populateStatesList();
});
function populateStatesList() {
var url = "Contact/GetStates"; // Don't hard code your url's!
//$("#province_dll").change(function () {
var $statesDropDownMenu = $("#statesDropDownMenu"); // Use $(this) so you don't traverse the DOM again
var listItems = '';
$.getJSON(url, function (response) {
$statesDropDownMenu.empty(); // remove any existing options
console.log(response);
$.each(response, function (index, item) {
console.log("Now - " + item);
listItems += "<li>" + item + "</li>";
});
$statesDropDownMenu.html(listItems);
});
//});
}
You have an extra comma.
txtEmailSecond:{
required:false,
customEmail:true, // Here
},
CODEIGNITER METHOD
public function agregar_post(){
$nombre = $this->post('nombre');
$mail = $this->post('mail');
$telefono = $this->post('telefono');
$password = $this->post('password');
$nivel_listado = $this->post('nivel_listado');
// Store he whole data into $data
$data = array(
'id' => '',
'nombre' => $nombre,
'mail' => $mail,
'telefono' => $telefono,
'password' => $password,
'api_key' => '',
'nivel_listados' => $nivel_listado
);
$query = $this->db->insert('cliente',$data);
// Check if insert is succes
if ($query)
{
$this->output->set_header("Access-Control-Allow-Origin: http://www.verdulero.com", false); // header allow
$this->response($query,201);
}else
{
$this->response(null,404);
}
}
//JQUERY AJAX
$("#frmAddClient").submit(function (event){
event.preventDefault();
var dataForm = $(this).serialize();
// ajax to insert a new product
$.ajax({
type: $(this).attr('method'), // METHOD FROM FORM
url: $(this).attr('action'), // URL FROM FORM
crossDomain: true,
data: dataForm,
success: function(){
alert();
}
});
// CLEAN THE FORM AFTER INSERT
$("#frmAddClient")[0].reset();
});
// HTML
<form name="frmAddClient" id="frmAddClient" method="post" action="<?= $addClient ?>" class="form-horizontal">
<div class="form-group">
<label for="Email" class="col-sm-4 control-label">Correo electronico:</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" class="form-control" id="Email" name="mail" placeholder="Verdulero#example.com" value="" autofocus required>
</div>
</div>
</div>
<div class="form-group">
<label for="Nombre" class="col-sm-4 control-label">Nombre:</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="Nombre" name="nombre" placeholder="Juan Verdura" value="" required>
</div>
</div>
</div>
<div class="form-group">
<label for="Telefono" class="col-sm-4 control-label">Telefono:</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
<input type="text" class="form-control" id="Telefono" name="telefono" placeholder=" 555 555 555" value="" required>
</div>
</div>
</div>
<div class="form-group">
<label for="Password" class="col-sm-4 control-label">Password:</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="Password" name="password" placeholder="Password" value="" required>
</div>
</div>
</div>
<div class="form-group">
<label for="nivel_listado" class="col-sm-4 control-label">Nivel Listado:</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<select class="form-control" name='nivel_listado' id='nivel_listado'>
<option value=''>Elija</option>
<option value='1'>Usuario nivel 1</option>
<option value='2'>Usuario nivel 2</option>
<option value='3'>Usuario nivel 3</option>
<option value='4'>Nivel administrador</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" class="btn btn-success" name="submit" id="Submit_User" value="Insertar nuevo usuario"/>
</div>
</div>
</form>
Use $this->input->post() instead of $this->post()
$nombre = $this->input->post('nombre');
$mail = $this->input->post('mail');
$telefono = $this->input->post('telefono');
$password = $this->input->post('password');
$nivel_listado = $this->input->post('nivel_listado');
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;