Develop Reference

Stop page redirect after submitting the form with jQuery

I have a simple code, and I try to make a post without redirecting the page. So far my code looks like this:
$(function() {
$('#btn').on('click', '.document', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/save',
data: {
html: '<p>Sucess</p>',
delay: 1
},
dataType: 'html',
success: function(data) {
console.log('success');
$('.document').append(data);
},
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/save" method="post" autocomplete="off" id="theForm">
<button id="btn" type="submit" name="send">
Send
</button>
</form>
<span class="document"></span>
Can anybody try to help me with this? I don't know why my code doesn't work, I want to be able to POST without reloading and redirecting the page.

You're attaching a delegated event handler to a span with no content, and the primary selector isn't a parent of that span.
The correct approach would be to attach a submit event handler to the form element instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/save" method="post" autocomplete="off" id="theForm">
<button id="btn" type="submit" name="send">Send</button>
</form>
<span class="document"></span>
jQuery($ => {
$('#theForm').on('submit', e => {
e.preventDefault();
$.ajax({
type: 'post',
url: '/save',
data: {
html: '<p>Sucess</p>',
delay: 1
},
dataType: 'html',
success: function(data) {
console.log('success');
$('.document').append(data);
}
});
});
});

Unable to submit the ajax form multiple times after using .submit() function

This is my code:
var onloadCallback = function() {
$( "#submit" ).each(function() {
grecaptcha.render($( this ).attr('id'), {
'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
'callback' : onsubmitforgotpass
});
});
};
function onsubmitforgotpass(token) {
$(document).ready(function() {
$("form.formajax").submit(function() {
$.ajax({
type: "POST",
url: "admin/login/forgotpass.php",
data: $("form.formajax").serialize(),
cache: false,
success: function(result) {
$(".forgotpassresult").html(result);
$(".forgotpassresult").css("opacity", "1");
}
});
return false;
});
$("form.formajax").submit();
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="post" class="formajax">
<input type="text">
<input type="submit" id="submit">
</form>
I am unable to submit this ajax form multiple times.
It is probably because of these 2 lines:
$("form.formajax").submit(function()
and
$("form.formajax").submit();
If I replace those line with $("#submit").click(function() and $("#submit").click();
Then I can submit the form multiple times.
Anyway to submit the form multiple times using .submit(); function? (It will help me in some other part of my code also, so I do not want to use click();

hey please test the following things:
Please remove the actions
action="abc.com"
to
action=""
add ajax call on button click like below example:
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "admin/login/forgotpass.php",
data: $("form.formajax").serialize(),
cache: false,
success: function(result) {
$(".forgotpassresult").html(result);
$(".forgotpassresult").css("opacity", "1");
}
});
});
});

Redirection after successful form submit

I have a form which should submit data after pressing the submit button. After tagging a few input fields as required the form always shows me when there is no input in the required field after pressing the submit button - so far, so good.
What I would like to realize is that there is a redirection to another page if the submission was successful. If there are some empty required fields the form should show me, without redirecting me to another page.
By now I have the following code:
Submit button:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
</div>
</div>
Also I have the following js function to submit the form and to redirect me to another page:
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});
The problem I have right now is that I will always be redirected to the "submit_resolved.php" page, whether all required fields are complete or not.
How can I solve this problem? I only want to be redirected when all required fields are not empty.

You should bind to the submit event, not click event:
UPDATED TO MATCH THE COMMENTS
$(function () {
var submityesClicked;
//catch the click to buttons
$('#submityes').click(function () {
submityesClicked = true;
});
$('#submitno').click(function () {
submityesClicked = false;
});
$('#webform').submit(function (e) {
e.preventDefault();//prevent the default action
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
},
error: function () {
alert("error");
}
});
});
});
The submit event is triggered only if the form is valid.
Note that the submit event is triggered by the form but the click event is triggered by the input element.

Do redirection on complete. Not on success
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
//window.location.replace("/submit_resolved.php");
},
complete: function () {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});

I assume you are validating form in process.php so, you have to return error if validation fail from process.php like this.
header('HTTP/1.1 500 Internal Server Booboo');
header('Content-Type: application/json; charset=UTF-8');
die(json_encode(array('message' => 'ERROR', 'code' => 1337)));
check this link: Return errors from PHP run via. AJAX?
Hope this may be helpful to you.

The simplest thing you can do is to add "required" attribute to you input elements.Example:
<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
It's a HTML5 attribute, so no JavaScript required. And it is supported by all major browsers. Check this link:
http://caniuse.com/#search=required
Anyway, you shouldn't rely just on front-end verification. Check those inputs on back-end, too.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<form action="">
Username: <input type="text" id="usrname" required>
<button type="button" name="submityes"
id="submityes" class="btn btn-danger">Submit</button>
</form>
</div>
function isValid(){
var usrname = $("#usrname").val();
if(usrname == ""){
return false;
}
return true;
}
$(function () {
$('#submityes').submit(function () {
if(isValid() == true){
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
alert("success");
window.location.replace("/submit_resolved.php");
},
});
}else{
alert("error");
}
});
});

No response in html page call to web api

i am trying to call c# web api but there is no response in html page but i getting response in cshtml
WEB API CODE
namespace MvcApplication3.Controllers
{
public class StoreController : Controller
{
public string Get2()
{
return "response data";
}
}
}
HTML CODE
<html>
<head>
<script src="jquery-1.8.2.js">
</script>
<!--<script src="jquery-1.8.2.min.js">
</script>-->
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$('body').on('click', '.test', function (e) {
alert('a');
jQuery.support.cors = true;
$.ajax({
// url: 'http://localhost:3595/api/values/5',
url: 'http://localhost:1152/Store/Get2',
type: 'GET',
dataType: "Jsonp",
success: function (data) {
alert(data);
}
});
});
});
});
</script>
<title>
</title>
</head>
<body>
<input type="button" value="submit" class="test"/>
</body>
</html>

jQuery AJAX Loading Page Content Only After I Press Shift Key

My ajax + jquery loading page only after holding shift key and duplicate new empty window.
If I press the loading button nothing hapen, only after I press shift key I get to load the page correctly...
this is my ajax script:
$(document).ready(function () {
$(".getUsersA").click(function () {
$.ajax({
beforeSend: function () {
$(".gridD").html(spinner)
},
url: 'lib/some_url.php',
type: 'POST',
data: ({
data1:'2013-09-01'
}),
success: function (results)
{$(".gridD").html(results);}
});
});
});
I have a second js file with just this line of code for spinner
var spinner = "<img src='images/spinner.gif' border='0'>";
html code:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/general.js"></script>
</head>
<body>
<h1>Putting it all tugether ... with jQuery</h1>
<div class="thedivD">Get Users</div>
<h3>jQuery results</h3>
<div class="gridD"></div>
</body>
</html>

Try to change
<a href="" ...
to
<a href="#" ...
in your HTML... a blank href is a link to this same url, so a click on the button forces also a page reload...

data: [{
data1:'2013-09-01'
}]
try It.
If you can not post the data1 or success not coming.
$.ajax({
beforeSend: function () {
$(".gridD").html(spinner)
},
url: 'lib/some_url.php',
type: 'POST',
data: [{
"data1":'2013-09-01'
}],
success: function (results)
{$(".gridD").html(results);}
});
?