How to use submit form with ajax - ajax

I already make login form and success, but when I'm trying add ajax, it fails, does anyone know a solution? this is my code:
$(document).ready(function()
{
$("#formLogin").submit(function(e)
{
$.ajax({
url:"<?php echo site_url('login'); ?>",
type:"POST",
data:$("#formLogin").serialize()
})
.done(function(response)
{
if(response =='gagal')
{
$(".alert.alert-danger").show('fast');
}
else
{
window.location.href = "http://localhost/epeds_web/";
}
});
e.preventDefault():
});
});

Related

Check for cookie and then geo-redirect if

The following geo-redirect code works:
<script async src="https://get.geojs.io/v1/ip/geo.js"></script>
<script>
function geoip() {
$.ajax({
type: 'get',
url: 'https://get.geojs.io/v1/ip/country.json',
success: function(data) {
if (data['country'] == "NZ") {
window.location = "https://www.example.com/";
}
}
});
}
geoip();
</script>
Building on this, I now want to check for a cookie, but can't get it to work. Where am I going wrong?
<script async src="https://get.geojs.io/v1/ip/geo.js"></script>
<script>
var cookieSwitch = 'geo-switch';
if(typeof Cookies.get(cookieSwitch) == 'undefined') { // If cookie is not found, then geo-redirect
function geoip() {
$.ajax({
type: 'get',
url: 'https://get.geojs.io/v1/ip/country.json',
success: function(data) {
if (data['country'] == "NZ") {
window.location = "https://www.example.com/";
}
}
});
}
geoip();
});
</script>
This worked!
<script async src="https://get.geojs.io/v1/ip/geo.js"></script>
<script>
if(typeof Cookies.get('geo-switch') == 'undefined') { // If cookie not found, then redirect if applicable
$.ajax({
type: 'get',
url: 'https://get.geojs.io/v1/ip/country.json',
success: function(data) {
if (data['country'] == "NZ") {
window.location = "https://www.example.com/";
}
}
});
}
</script>
Please note, you will need to include the following for this to work:
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>

Ajax alert inside function not works

First alert : alert('<?php echo t_lang('M_FRM_PLEASE_WAIT_WHILE_FILE_OR_IMAGE_IS_BEING_UPLOADED_._IF_FILE_SIZE_IS_BIG_IT_CAN_TAKE_SOME_TIME_._PLEASE_DO_NOT_CLOSE_TAB');?>'); does not work unless I put second alert out of function call: alert();
$('input[name="btn_submit"]').click(function second(){
var step = <?php echo $_REQUEST['step']?>;
var dealid= <?php echo $_GET['edit']?>;
var ur="imagecheck.php?dealid="+dealid;
if (step == 1) {
$.ajax({
url: ur,
type: "GET",
header: {'Access-Control-Allow-Origin': '*'},
success: function(y) {
if(y=='true'){
alert('<?php echo t_lang('M_FRM_PLEASE_WAIT_WHILE_FILE_OR_IMAGE_IS_BEING_UPLOADED_._IF_FILE_SIZE_IS_BIG_IT_CAN_TAKE_SOME_TIME_._PLEASE_DO_NOT_CLOSE_TAB');?>');
} else {
alert(dealid);
}
}
});
alert(); // if I don't add this first alert is not showed up.
}
});
I tried almost everything but still can not understand why first alert relies on second alert. Any help would be highly appreciated.
I am adding the codes below which is all about ajax in my file.
<script type="text/javascript">
$(document).ready(function(){
$('input[name="btn_submit"]').click(function first(){
var com_id=<?php echo $_SESSION['logged_user']['company_id']?>;
var co_type=$('#co_type').val();
var ur="check_no_of_deals.php?company_id="+com_id;
if(co_type==0){
$.ajax({
url: ur,
type: "GET",
header: {'Access-Control-Allow-Origin': '*'},
success: function(t) {
if(t == 'true'){
} else {
alert('<?php echo t_lang('M_FRM_YOU_HAVE_ALREADY_ADDED_DEAL_TODAY');?>');
window.location.href='http://deals.az/merchant/company-deals.php';
}
}
});
}
});
//bizim kod basladi
$('input[name="btn_submit"]').click(function second(){
var step = <?php echo $_REQUEST['step']?>;
var dealid= <?php echo $_GET['edit']?>;
var ur="imagecheck.php?dealid="+dealid;
if (step == 1) {
$.ajax({
url: ur,
type: "GET",
header: {'Access-Control-Allow-Origin': '*'},
success: function(t)(y) => {
if(t=='true'){
alert('<?php echo t_lang('M_FRM_PLEASE_WAIT_WHILE_FILE_OR_IMAGE_IS_BEING_UPLOADED_._IF_FILE_SIZE_IS_BIG_IT_CAN_TAKE_SOME_TIME_._PLEASE_DO_NOT_CLOSE_TAB');?>');
} else {
alert(dealid);
}
}
});
// alert();
}
});
//bizim kod bitti
});
</script>
try replacing to arrow function
$.ajax({
...
success: (y) => {
if(y=='true'){
...
}
}
...
})
the difference between an arrow function and a regular function is by their this
so when you pass the regular function it becomes part of the ajax call or the Jquery object.
but the arrow function stays where you see it.

ajax form submits fine, but success does not work?

I have a simple form that submits with jquery and ajax. the form submits fine and the data posts, but the success message will not call... just the error message. can someone tell me what I am doing wrong.
<script type="text/javascript" >
$(function() {
$(".form-submit").click(function() {
var esn = $("#esn").val();
var dataString = 'esn='+esn;
if(esn=='')
{
$('.error').show().fadeOut(3000);
}
else
{
$.ajax({
type: "post",
url: "include/submit_repair_form.php",
data: dataString,
success: function(result) {
alert(result);
$('.testing').hide();
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.statusText);
}
});
}
return false;
});
});
</script>
You forgot to set the result variable in function()
Like this:
success: function(result) {
alert(result);
$('.testing').hide();
}

How can I validate form and then execute additional code if successful

I cannot figure out how to merge the following separate pieces of code:
$(document).ready(function () {
$("#signupForm").validate();
});
and
$(document).ready(function () {
$("#btnSignup").click(function () {
$.ajax({
type: "POST",
dataType: 'json',
url: "/Newsletter/Signup",
data: $('#signupForm').serialize(),
success: function (response) {
if (response.success) {
$('#signupMessage').show(0);
}
else {
showValidationErrors(response.Data);
}
}
});
return false;
});
I need the first part to execute first, and if it validates the form successfully, then I need to exectute the second part.
I believe that you can use valid().
Pseudo code;
$(document).ready(function () {
$("#signupForm").validate();
$("#btnSignup").click(function () {
if ($("#signupForm").valid()) {
// ajax query
}
return false;
});
});
Does that work? I haven't checked it.
Here is a somewhat general way I use.
$('form').submit(function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
});
Lastly, you could abstract the logic into an object for a more OOP approach
var formHandler = {
onSubmit: function(e){
if (!$(e.target) && !$(e.target).valid()) {
return;
}
// Ajax call here.
$.ajax({ type: "POST",... });
}
}
$('form').submit(formHandler.onSubmit);

ajax redirect issue

i want to redirect form after ( success ) to another page. i use this code
$(document).ready(function(){
$("#ajax-form").submit(function(){
$.post(
"ajaxContact/ajax-register.php",
$("#ajax-form").serialize(),
function(data){
if (data.success)
$("span#ajax-message").css({'color':'green'});
window.location("index.html");
else
$("span#ajax-message").css({'color':'red'});
$("span#ajax-message").html(data.message);
},
"json"
);
return false;
});
});
how to redirect.
Regards
If you want to just redirect the page there, this should work:
if(data.success)
window.location = "url";
Updated:
$(document).ready(function()
{
$("#ajax-form").submit(function()
{
$.post("ajaxContact/ajax-register.php", $("#ajax-form").serialize(),
function(data)
{
if (data.success)
{
//If successful...
window.location = 'http://www.google.com';
}
else
{
//If unsuccessful...
alert("Post was unsuccessful.");
}
},"json");
return false;
});
});
That should work for you as long as your post is returning successfully. Here's a demo using a confirm to imitate your Post:
Demo here
window.location = "http://www.google.com";

Resources