Develop Reference

Submit without reloading (Ajax, Codeigniter)

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>

jquery post method is not working

I'm submitting a simple form by using jquery post method but when I call the post method I'm getting this wierd error message
VM1233 jquery.min.js:2 Uncaught TypeError: (h.dataType || "*").toLowerCase is not a function
at Function.ajax (VM1233 jquery.min.js:2)
at Function.w.(:8000/Marketing/anonymous function) [as post] (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:78094)
at submitLeadDetails (VM1235 main.js:10)
at HTMLFormElement.onsubmit (index.html?name=haskdaskd&Contact=harish+kumar&phone=9030590437&date=12%2F04%2F2018&Time=09%3A00:33)
this is the code that I have written :
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', LeadDetailsObject, function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
}, function(error){
console.log('Error');
console.log(error);
})
}
<form id="leadDetailsForm" onsubmit="submitLeadDetails()">
<div class="form-group">
<label for="name">School Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter School Name" name="name" required>
</div>
<div class="form-group">
<label for="contact">Contact Person:</label>
<input type="text" class="form-control" id="contact" placeholder="Enter Contact Person Name" name="Contact" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" class="form-control" id="phone" placeholder="Enter Contact Person's Phone Number" name="phone" required>
</div>
<!--<div class="form-group">-->
<!--<label for="address">Address:</label>-->
<!--<textarea class="form-control" rows="5" placeholder="Enter School Address" id="address" required></textarea>-->
<!--</div>-->
<div class="form-group col-sm-6" style="padding-left: 0;">
<label for="date">Date:</label>
<input type="text" class="form-control" id="date" placeholder="Enter Date" name="date" required>
</div>
<div class="form-group col-sm-6">
<label for="time">Time:</label>
<input type="text" class="form-control" id="time" placeholder="Enter Time" name="Time" required>
</div>
<button type="submit" class="btn btn-lg pull-right" style="margin-top: 3%; background-color: #2a2c30; color:#fff;" >
Submit
</button>
</form>

The error says you are passing the wrong argument to the .post() method. The fourth argument should be dataTypeand not a callback.
See the docs: https://api.jquery.com/jquery.post/
In your case you could make use of .done() and .fail() to handle the status of the request:
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', JSON.stringify(LeadDetailsObject))
.done(function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
})
.fail(function(xhr, status, error) {
console.log('Error');
console.log(error);
});
}

jQuery tries to lowercase the values probably because of some checks. But when it tries to lowercase a number, it crashes. You have type="number" in your inputs. Probably that causes the error

I have a Contact form, and i'm try to connect it with PHP mail using Angularjs and get get data in php file

(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>

AngularJS Cannot get form data

Pulling values from a form in AngularJS doesn't appear to be working - for example my form code is:
<form ng-submit="newCompany()">
<div class="form-group">
<label>Name</label><input type="text" name="company_name" id="company_name" tabindex="2" ng-model="newCompany.company_name" class="form-control">
<label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
<label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
<label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
<label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
<label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
<label>URL</label></label><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="add-submit" id="add-submit" tabindex="10" class="form-control btn btn-primary" value="Add Company">
<br>
<div class="text-center">
<p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
</div>
</div>
</div>
</div>
</form>
But in the controller, doing newCompany.name or $scope.newCompany.name, doesn't work. It returns nothing and says newCompany is undefined.
Controller:
app.controller("CompaniesController", ['$scope', 'Companies', function($scope, Companies) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.companyData = {
company_name: newCompany.company_name,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
};
$scope.addCompany = function() {
var company = new Companies($scope.companyData);
company.$save();
};
$scope.companies = Companies.query();
}]);
Can anybody see what is wrong or how to get it to work?

Yes newCompany is undefined please define it before use will solve your problem
$scope.newCompany = {};
$scope.companyData = {
company_name: newCompany.company_name,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
};
and also you don't need to use $scope.companyData just use newCompany inside your save function
$scope.addCompany = function() {
var company = new Companies($scope.newCompany);
company.$save();
};
if you see in console using console.log(newCompany) after submit data it already there with key value pair as you trying to create with your $scope.companyData

Send an ajax request every time that a form input field change

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;