I want the following ajax request to process form data from form with "#next" id:
$(function () {
$("#next").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $('form').serialize(),
success: function (response) {
if(response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
And here's the file that contains the form:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/auth_style.css">
<title>Authentication</title>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/authentication_ajax.js"></script>
<noscript>JS is disabled. Enable js to continue</noscript>
</head>
<body>
<h1 id="header">Enter your data here</h1>
<form id="#next">
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<form id="#log_out" action="log_out.php" method="post">
<button type="submit">Log out</button>
</form>
</body>
What's interesting is that when I used just $('form').on('submit', function (e) { it worked just fine.
You have two error the first one is how to use ids, in the id don't use # instead use just the name, and into the selector you can use $('#name').
The second problem is about selector of serialize(), in this case you can use directly e.target like:
$(function() {
$("#next").on('submit', function(e) {
e.preventDefault();
console.log($(e.target).serialize());
/*
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $(e.target).serialize(),
success: function (response) {
if(response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header">Enter your data here</h1>
<form id="next">
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<form id="log_out" action="log_out.php" method="post">
<button type="submit">Log out</button>
</form>
Related
It used to work fine, and I don't remember changing anything in these files, but now nothing happens when I click on submit form. What may cause the problem?
Snippet:
// And here's the ajax request file *auth_ajax.js*:
$(function() {
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $('form').serialize(),
success: function(response) {
if (response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
<!-- Here's my php file: -->
<h1 id="header">Enter your data here</h1>
<form>
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This route work?
url: 'check_user.php',
Try yourDomain/check_user.php, check your directory for a real path
I'm using Formsubmit to send contact us form to my email and so far it's working.
But I would like when user send the form it does not redirect it to the source thank you page instead I'd like to display just thank you text on the same page. I'd like to use my own.
So I followed the documentation and I came up with the following :
Unfortunately when I try validate the form button it does not work
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
<script type="text/javascript">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (response) {
console.log('An error occurred.');
console.log(response);
}
complete: function(response){
setTimeout(ajax,1000);
}
});
});
});
</script>
Note : that uncommenting this line <input type="hidden" name="_next" value="thanks.html"> will take validate the form and go through another page which is not what I want here.
Any ideas ?
To Prevent Submission You should return false in
frm.submit(function (e) {
return false;
})
Or in form tag
<form onSubmit="return false">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
}
});
return false; // here a change
});
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
I have a form that I want to use the required attribute, which I believe is from html5 to make sure the user puts in a name before running the ajax to send and email and stays on this page (index.php). The form below works. My problem is that I can't figure out how to a a button called pay that submits the form to pay.php like a regular form submit so the user ends up on pay.php when they click "pay" and I want the form validation to still occur when they click pay and on pay.php I can grab the contactName from the post.
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="submit" id="inquire-button" class="btn btn-primary">Inquire</button>
<div id="mail-status"> </div>
</form>
<script type="text/javascript">
$("inquire-button").on('click',function(e){
e.preventDefault();
});
$("#contactForm").on('submit',function(e){
sendContact();
e.preventDefault();
});
function sendContact() {
jQuery.ajax({
url: "mailer.php",
data:'contactName='+$("#contactName").val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
</script>
EITHER don't use the click, but only the submit event
$("#contactForm").on('submit', function(e) {
const $btn = $(document.activeElement);
if ($btn.is("#inquire")) {
console.log("Inquire clicked")
e.preventDefault();
jQuery.ajax({
url: "mailer.php",
data: 'contactName=' + $("#contactName").val(),
type: "POST",
success: function(data) {
$("#mail-status").html(data);
},
error: function() {}
});
}
else console.log("Pay clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="submit" id="inquire-button" class="btn btn-primary">Inquire</button>
<button type="submit" id="pay" class="btn btn-primary">Pay</button>
<div id="mail-status"> </div>
</form>
OR use a button
$("#contactForm").on('submit', function(e) {
console.log("Submitted (pay)")
})
$("#inquire-button").on("click", function() {
if (!this.form.checkValidity()) {
this.form.reportValidity()
return
}
console.log("Inquire clicked")
jQuery.ajax({
url: "mailer.php",
data: 'contactName=' + $("#contactName").val(),
type: "POST",
success: function(data) {
$("#mail-status").html(data);
},
error: function() {}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contactForm" method="post" class="tm-contact-form">
Name: <input type="text" id="contactName" name="contactName" class="form-control" placeholder="Name" required/>
<button type="button" id="inquire-button" class="btn btn-primary">Inquire</button>
<button type="submit" id="pay" class="btn btn-primary">Pay</button>
<div id="mail-status"> </div>
</form>
This question already has answers here:
Get value of input in jQuery
(5 answers)
Closed 6 years ago.
<div id="divForm" class="fancybox" style="display:none;">
<form id="frm_step1" action="download1.php" method="post">
<label>Enter Email</label>
<input type="email" name="email" id="email" value="" required />
<input type="button" name="submit" id="submit" value="Submit" class="form-submit" target-form="frm_step1" onclick="test();" />
</form>
</div>
function test() {
var email = $('#email').text();
alert(email);
$.ajax({
type: "POST",
dataType: "json",
url: 'download1.php?email' + email,
data: { 'email': email },
success: function(data) {
window.location.href = 'download.php#file';
},
error: function(e) {
alert('Error: ' + e);
}
});
}
I am not able to get email from this. When I put alert it returns blank.
And I always use jQuery/AJAX like this but this time it does not alert email address.
Use .val() instead of .text(). The .val() method is primarily used to get the values of form elements such as input, select and textarea.
$('#email').val();
function test() {
var email = $('#email').val();
alert(email);
$.ajax({
type: "POST",
dataType: "json",
url: 'download1.php?email' + email,
data: { 'email': email },
success: function(data) {
window.location.href = 'download.php#file';
},
error: function(e) {
alert('Error: ' + e);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divForm" class="fancybox">
<form id="frm_step1" action="download1.php" method="post">
<label>Enter Email</label>
<input type="email" name="email" id="email" value="" required />
<input type="button" name="submit" id="submit" value="Submit" class="form-submit" target-form="frm_step1" onclick="test();" />
</form>
</div>
Explanation :
Here's the situation goes . I'm searching a way to call another Ajax function when the data is success but I'm unable to do due to unknown circumstances.
Code:
---HTML Form :
<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="" method="post">
<input class="wf-input wf-req wf-valid__email" type="text" name="email"
data-placeholder="yes" id="email" value="Enter Your Email Here" onfocus="
if (this.value == 'Enter Your Email Here')
{ this.value = ''; }" onblur="if (this.value == '')
{ this.value='Enter Your Email Here';} " style="margin-top:;">
</input>
<br />
<input type="submit" class="wf-button" name="submit1" value=" " style="display: inline !important; margin-top:-10px !important;"></input>
</form>
----Ajax Code :
$(function() {
$('.wf-button').click(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {
if (data.status == 'success') {
// Need to place it here
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
---Another form with HTML in the same page:-
<form method="post" id ="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="947846900" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3599001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
<input type="hidden" name="meta_adtracking" value="ibb_test" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-947846900" class="af-form"><div id="af-body-947846900" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-66127140">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value="" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<<input name="submitaw" id="submitaw" class="wf-button" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>
Scenarion :
I would when the Ajax trigger when the user click the submit button for the ID ContactForm1.
Before submitting the form , I want the Ajax to send the same value to the other form in the same page and click submit .
How?
try this:
$('#aweber').submit(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {alert('first form submitted');
if (data.status == 'success') {
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
submit form if success always reload page.
Using ajax post to server.
You can try it:
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).then( myFunc, myFailure );
http://api.jquery.com/jquery.when/