Develop Reference

Ajax form with post method

The AJAX form does not want to work, it throws an error. I need it to work when a button is clicked and all data is refreshed.
<form name="form" id="form" class="form">
<div class="field">
<label for="input-kitId" class="label is-size-7 has-text-weight-light has-text-left">Order ID</label>
<div class="field">
<div class="control is-expanded">
<input type="text" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID"/>
</div>
</div>
</div>
<div class="field">
<label for="input-firstName" class="label is-size-7 has-text-weight-light has-text-left">Email</label>
<div class="field"><div class="control is-expanded">
<input type="text" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email"/>
</div>
</div>
</div>
<button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
</form>
<script type="text/javascript">
$("#form").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
crossDomain: true,
type: "POST",
url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
});
</script>

Try to add a form method. Get or Post method
Ex: form method="post"

ajax submit multiple times

I have created an application in the php, I am using the bootstrap model to update user details using AJAX. Now there are two forms: first updates the user's details and adds comments to another user. When I try to submit a form to AJAX and I try to submit a form, it does not work, when i use ajaxComplete function then my form data has been submitted successfully, but at the time it submits the form multiple times at the same time.
$(document).ajaxComplete(function() {
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="card-group-control card-group-control-right" id="accordion-model">
<div class="card">
<form method="post" name="update-user-details" id="update-user-details" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">First Name</label>
<input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name">
</div>
</div>
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Mobile</label>
<input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
<form method="post" name="remarks" id="remarks" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Remarks</label>
<input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Move this piece of code outside of your ajaxComplete() function. You are probably somehow triggering the ajaxComplete function multiple times, causing multiple event listeners for the form submit.
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));

Redirect to controller codeigniter after checking validation

I validated my form Using AJAX
Here is my form
<p class="login-box-msg">
<?php
echo "<span id='error'>Sign in to start your session</span>";
?>
</p>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Employee ID" name="empid">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="pw">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<button type="button" class="btn btn-primary btn-block btn-flat" id="submit">Sign In</button>
</div>
<!-- /.col -->
</div>
</div>
<!-- /.login-box-body -->
<form>
Then I validated this using my ajax code
$("#submit").click(function(){
var form = $("form").serialize();
$.ajax({
url:'verify',
data: form,
dataType:'json',
type:'post',
success: function(e)
{
console.log(e.length);
if(e.length < 1)
{
$("#error").text("Invalid Login Credentials!");
$("#error").css("color","red");
setTimeout(function(){
$("#error").text("Sign in to start your session!");
$("#error").css("color","black");
},3000);
}
else
{
"What shoud I do"
// I tried $("form").submit() but it just repeat
//$("#submit").click(function())
}
}
});
On else bracket, I want to redirect to Controller on codeigniter called setCredentials() wherein it would set the credentials needed and redirect me to another page when the validation is completed (without error).

In else part enter the below code with the url you want to redirect to:
window.location = "<?php echo 'your/url'; ?>";

Laravel 5.2 Modal popup for forget Password displaying 500 internal server Error while running ajax function

I am trying to Check weather email exist or not to send reset password link.
For that am using ajax function but its showing 500 internal server error before runing ajax.
I knw 500 is for token miss match error but do i need token to check email existing or not.
But I think so, with the form tag token is auto generated and then also am using {{ csrf_field() }}
But it showing same error 500 Internal server. Just Help how can resolve this issue and do i need to generate token manually.
Views : login.blade.php
{!! Form::open(array('url' => '/auth/login', 'class' => 'form- login')) !!}
<div class="form-title"> <span class="form-title">Login</span> </div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix required" type="text" autocomplete="off" placeholder="Email" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix passwordclass required" type="password" autocomplete="off" placeholder="Password" name="password" />
</div>
<div class="form-actions">
<button type="submit" class="btn red btn-block uppercase clicklogin" style="background-color:#d5ed31 !important;border-radius:4px !important;border:1px solid #ddd;">Login</button>
</div>
<div class="form-actions">
<div class="pull-left">
<label class="rememberme mt-checkbox mt-checkbox-outline">
<input type="checkbox" name="remember" value="1" />
Remember me <span></span> </label>
</div>
<div class="pull-right forget-password-block"> <a class="btn-link" data-target="#modalforget" data-toggle="modal">Forgot Password? </a></div>
</div>
{!! Form::close() !!}
<!-- END LOGIN FORM -->
<!-- BEGIN FORGOT PASSWORD FORM-->
{!! Form::open(array('url'=>'password/reset','class' => 'form-horizontal create_forget_form','method'=>'POST', 'id' =>'forgetdata', 'files' => true)) !!}
{{ csrf_field() }}
<div class="modal fade" id="modalforget" tabindex="-1" data-width="760px" >
<div class="modal-dialog" style="width:760px !important;">
<div class="modal-content" style="background-color:#26344b;padding:20px;border-radius:12px !important;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div class="form-title"> <span class="form-title">Forget Password</span> </div>
</div>
<div class="modal-body" style="height:auto !important;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong style="color: #ffffec; font-size: large; "> Please enter your email. A password reset link will be sent to this email.</strong>
</div>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<div class="col-md-2"></div>
<div class="col-md-10">
<input class="form-control required" type="email" autocomplete="off" placeholder="Email" id="forget_email" name="forget_email"style="font-size: large;" />
<span class="my-error-class" id="email_status"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value="Submit" id="submitButton" class="btn green">Submit</button>
<button type="button" value="Cancel" class="btn default red" data-dismiss="modal">Cancel</button>
<button type="reset" value="Clear" class="btn blue">Clear</button>
</div>
</div>
</div>
</div>
</div>
</form>
Ajax function in login.blade.php
<script type="text/javascript">
$('#submitButton').click(function(){
var formdata=new FormData($(this)[0]);
$.ajax({
url:"{{ URL::to('password/reset') }}",
type: 'POST',
data: formdata,
async: false,
cache: false,
contentType: false,
processData: false,
context:this,
dataType: "json",
success: function (returndata)
{
if(returndata == 0)
{
$( '#email_status' ).html('This Email does not Exists');
return false;
}
else
{
$( '#email_status' ).html("");
return false;
}
},
error: function(data)
{
console.log(data);
}
});
});
</script>
Route file:
Route::group(['middleware' => 'auth'], function()
{
Route::post('password/reset','Auth\AuthController#resetPassword');
}
Controller Auth\AuthController#resetPassword:
public function resetPassword()
{
$email =Input::get('forget_email');
$user_email = DB::table('users')->where('email', $email)->whereNull('deleted_at')->first();
if($user_email)
{
return '1';
}
else
{
return '0';
}
}
Screen Shot Of Error

I think you have to write your route outside auth group.
Route::post('password/reset','Auth\AuthController#resetPassword');

The issue is you are using POST request with ajax and for every post request you have to pass the csrf-token with the request like:
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
Put this in your ajax code and everything will be fine.
Or if you want to exclude the specific URI from CSRF verification, go to project/app/Http/Middleware, there is a file VerifyCsrfToken.php in which put the routes list in:
protected $except = [
// route list here
];
All the routes defined here excludes from csrf-token check.

Prevent default not working in ajax form submit

I tried my level best in implementing this ajax. I dont what the form's default action to happen.I give prevent default but its not working. My page form is getting submitted without ajax. When i tried on click instead of on submit the captcha validation is not working.Can someone tell whats the mistake here. Thanks in advance.
$(document).ready(function() {
$("#login").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
success: function(data) {
alert(data);
if (data == 'success') {
location.reload();
} else {
$('#loginmsg').html(data).fadeIn('slow');
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="<?php echo $root ?>login.php" id="login" method="post">
<div id="loginmsg"></div>
<div class="form-group">
<label for="login_email" class="sr-only">Email address</label>
<input name="email" type="email" class="form-control" id="login_email" placeholder="Email address">
</div>
<div class="form-group">
<label for="login_password" class="sr-only">Password</label>
<input name="password" type="password" class="form-control" id="login_password" placeholder="Password">
</div>
<div class="form-group">
<img src="common/captcha/captcha.php" id="captcha" height="50" />
<i class="fa fa-refresh refresh-sec"></i>
<div class="form-item inline">
<div class="captcha-block">
<p class="comment-form-captcha"><input name="captcha" type="text" id="captcha-form" autocomplete="off" class="form-text contact-captcha" maxlength="6" required="required" /></p>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="theme_button color1">
Log in
</button>
</div>
</form>

you should use
<button type="button" class="theme_button color1">Log in</button>
instead of
<button type="submit" class="theme_button color1">Log in</button>
and change the form submit to
$(document).on("click",".theme_button ", function(){
});
you have two id in your html
<a class="topline-button" id="login" data-target="#" href="./" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
<i class="fa fa-lock" aria-hidden="true"></i> Login
</a>
<form role="form" action="login.php" id="login" method="post">
</form>

You can try this
$(document).ready(function() {
$(document).on('click','#login' ,function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
success: function(data) {
alert(data);
if (data == 'success') {
location.reload();
} else {
$('#loginmsg').html(data).fadeIn('slow');
}
}
});
});
});