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');
}
}
});
});
});
Related
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"
On button click, i want to post the contents of the email text box. When i click the login button nothing happens.
My File dir:
Model/ <-- configuration.php is inside Model dir.
View/
Controller/
index.php <-- calls the header, body, and footer php classes that are in the view dir
<!-- Modal body -->
<div class="modal-body" style="padding:40px 50px;">
<form>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="button" name="loginButton" id="loginButton" name="loginButton" class="btn btn-success btn-block">Login</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<p>Not a member? Sign Up</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#loginButton").click(function() {
$.ajax({
type: "POST",
url: "Model/configuration.php?action=login",
data: "email=" + $("#email").val(),
success: function (result) {
alert("result");
}
})
})
})
</script>
PHP file
<?php
if($_GET['action'] == "login") {
print_r($_POST);
}
?>
The problem seems to be that your if condition had an extra parentheses.
Try this:
<?php
if($_GET['action'] == "login") {
print_r($_POST);
}
?>
$("#loginButton").click(function() {
$.ajax({
type: "POST",
url: "Model/configuration.php?action=login",
data: {email:$("#email").val()},
success: function (result) {
alert("result");
}
})
})
You should serialize your form and pass to data.
data: $("#FormId").serialize()
See also https://api.jquery.com/serialize/
CaseI create a new registration form and save it into database.The save process was succeed but I want to add some user interaction like when the data is successfully saved, the system notify user by toastr.I have create the code but it is not working.Please help.Below is the code.
Javascript and HTML
//toast a message upon successful registration
$(document).on('click', '.submit_button', function(e) {
console.log("submit button clicked");
e.preventDefault();
$.ajax({
type: "POST",
url: $("#regtenantform").attr('action'),
data: $("#regtenantform").serialize(),
success: function(response) {
if (response === "Success") {
$.toast({
heading: 'Welcome to my Elite admin',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
loaderBg:'#ff6849',
icon: 'success',
hideAfter: 3500,
stack: 6
});
window.reload;
} else {
alert("invalid username/password. Please try again");
}
}
});
});
<form id="regtenantform" name="regtenantform" class="form-material form-horizontal" method="post" action="../controllers/tenantcontroller.php" onsubmit="return ray.ajax()">
<div class="form-group">
<label class="col-md-12">Fullname <span class="help"> e.g. "Azizul"</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="Fullname" id="name" name="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12" for="example-email">Identification Number <span class="help"> e.g. "860102075555" (without "-" or space)</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="Id Number" id="ic" name="ic" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12">Phone Number <span class="help"> e.g. "0123456789"</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="No." id="contact" name="contact" required="">
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-offset-3 col-sm-9 text-right">
<button type="button" class="btn btn-inverse waves-effect waves-light m-r-10" id="reset" name="reset">Reset</button>
<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
</div>
</div>
</form>
Here:
$(document).on('click', '.submit_button', function(e) {
^---CSS class
<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
^^----nowhere do you have a "submit_button" class
You have an ID of submit_button, so your click handler should be looking for #submit_button, not .submit_button
I have the following ajax script and form to login to my website:
<div class="shadowbar"><form id="login" method="post" action="/doLogin">
<div id="alert"></div>
<fieldset>
<legend>Log In</legend>
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
<input type="email" class="form-control" name="email" value="" /><br />
</div>
<div class="input-group">
<span class="input-group-addon">Password</span>
<input type="password" class="form-control" name="password" />
</div>
</fieldset>
<input type="submit" class="btn btn-primary" value="Log In" name="submit" />
</form></div>
<script>
$.ajax({
type: "post",
url: "/doLogin",
data: $('#login').serialize(),
success: function(result) {
if(result == " success"){
window.location = "/index.php";
}else if(result == " failure"){
$("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>");
//$("#alert").show();
}
}
});
but it doesn't preform the ajax, and brings me to the result page, which is not what I want. Is there any specific reason that the AJAX is not working? I'm kind of new to JavaScript so sorry if this is obvious.
You are running the Ajax function as soon as the script loads, and not doing anything to prevent the form from submitting normally when the form submits.
You need to move the JS you have already into a function. Then bind that function as a submit handler on the form. Then prevent the default behaviour of the submit event.
$('#login').on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "post",
url: this.action,
data: $(this).serialize(),
success: function(result) {
if (result == " success") {
window.location = "/index.php";
} else if (result == " failure") {
$("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>");
//$("#alert").show();
}
}
});
});
<form action="/doLogin" method="post" id='#login'>
<fieldset>
<legend>Log In</legend>
<div class="input-group">
<label for="email" class="input-group-addon">E-Mail</label>
<input type="email" class="form-control" name="email" id="email" value="" />
<br />
</div>
<div class="input-group">
<label class="input-group-addon" for="password">Password</label>
<input type="password" class="form-control" name="password" id="password" />
</div>
</fieldset>
<input type="submit" class="btn btn-primary" value="Log In" name="submit" />
</form>
</div>
That said - when you successfully login, you just redirect to another page. You are almost certainly better off not using Ajax at all for this.
The following link may be helpful if you are new to ajax
http://webdevelopingcat.com/jquery-php-beginner-tutorial-ajax/
login should be the form id but you did not post your form opening tag
<form id = "login">
and in your ajax code you should handle the submit event of the form like this:
$("#login").submit(function({ // your logic should be here
}))
I am trying to send a form using Ajax.
Therefore, thanks to stackoverflow, i am preventing the form from normally sending using event.preventDefault(); but this will not help, because i am always getting redirected to my sendMail.php File.
Here's my code:
$(document).on('submit', '.mailForm', function(e) {
{
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
Edit: Here is my form:
<form role="form" class="mailForm" action="sendmail.php" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input class="form-control" type="text" id="fName" placeholder="<? LangText("Name", "Nom", "Name"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
<input class="form-control" type="email" id="fMail" placeholder="<? LangText("E-Mail Adresse", "Adresse électronique", "email adress"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-users"></i></div>
<input class="form-control" type="text" id="fCompany" placeholder="<? LangText("Firma", "Entreprise", "Company"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-file-text-o"></i></div>
<textarea class="form-control" rows="5" id="fText" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-default" id="submitMail"><? LangText("Absenden", "Envoyer", "Send"); ?></button>
</form>
Instead of:
$(document).on('submit', '.mailForm', function(e) {
Try:
$(".mailForm").submit(function(){
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
Try using the .submit() instead.
$(".mailForm").submit(function(e)
{
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
You need to bind an event on form's 'Send' button.
$('.trigger_buttton').on('click', function(e) {
{
e.preventDefault();
$.ajax({
url: $('.mailForm').attr('action'),
type: $('.mailForm').attr('method'),
data: $('.mailForm').serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
});