We Keep Coding

Alert not working in Ajax Success Function

I have a problem that I get the data from contact us form and send it to PHP file via ajax to send an email for the person who submits but I need to display a verification message to him on the site and the alert or any code in the success function doesn't work although the email goes through
here is My Function
function SendMail(){
// document.getElementById("loading").style.display = "block";
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
var Sent = false;
$.ajax({
url:"SendMail.php",
type:"post",
dataType: "json",
data: {type: "contact",name : name , email: email, subject: subject , message : message},
success : function(data){
alert("We Recieved Your Message and will get back as soon as possible");
}
});
}

How to make an AJAX call with jQuery?

I'm dealing with the project where I need to collect data from user and display on the same page. I've successfully completed the Ajax call using JavaScript, but now I want using Jquery.
This is my JavaScript Code:
var output1 = document.getElementById("output1");
function saveUserInfo() {
var userName = document.getElementById('username').value;
var password = document.getElementById('password').value;
var firstName = document.getElementById('firstname').value;
var lastName = document.getElementById('lastname').value;
var email = document.getElementById('email').value;
var dob = document.getElementById('datepicker').value;
var vars = "username=" + userName + "&password=" + password + "&firstname=" + firstName + "&lastname=" + lastName + "&email=" + email + "&datepicker=" + dob;
var ajax = new XMLHttpRequest();
var url = 'register.jsp';
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
output1.innerHTML = (ajax.responseText);
}
}
ajax.open("POST", url, true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(vars);
}
This is my register.jsp :
<%# page import ="java.sql.*" %>
<%# page import ="javax.sql.*" %>
<%
String user = request.getParameter("username");
session.putValue("username",user);
String pwd = request.getParameter("password");
String fname = request.getParameter("firstname");
String lname = request.getParameter("lastname");
String email = request.getParameter("email");
String dob = request.getParameter("dob");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/user_info2","root","root");
Statement st = con.createStatement();
ResultSet rs;
//int i=st.executeUpdate("insert into user_info value('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"')");
int i=st.executeUpdate("INSERT INTO `users`(user,pwd,fname,lname,email,dob) VALUE ('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"','"+dob+"')");
%>
Registration is Successfull. Welcome <%=user %>,
Your Password is : <%=pwd %>,
FirstName : <%=fname %>,
LastName : <%=lname %>,
Email : <%=email %>,
and Date Of Birth is : <%=dob %>,

This is a generalized view of a jQuery ajax request.
$.ajax({
url: 'register.jsp',
type: 'POST',
data : {userName : userName,password: password,....},
contentType: 'yourConentType', // ConentType that your are sending. No contentType needed if you just posting as query string parameters.
success: function(response){
// do whatever you want with response
},
error: function(error){
console.log(error)
}
});
If you want to pass your values as object then as follows:
var formData = {userName : userName, password: password,...};
$.ajax({
url: 'register.jsp',
type: 'POST',
data : JSON.stringify(formData),
contentType: 'application/json',
success: function(response){
// do whatever you want with response
},
error: function(error){
console.log(error)
}
});
For more details: jQuery.ajax()

function saveUserInfo() {
var postData = {
username: $('#userName').val(),
password: $('#firstname').val(),
firstName: $('#ss_unit').val(),
lastName: $('#lastname').val(),
email: $('#email').val(),
dob: $('#datepicker').val()
};
$.post(url, postData).done(function(data) {
output1.innerHTML = data;
});
}

$.ajax({
type: "POST",
url: url,
data: data,
dataType: dataType
}).done(function(){
}).fail(function(){
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use jQuery's $.post method with .fail and .done. Then you can also use query's selectors to get the values from all your inputs.
Something like the following:
var output1 = $("#output1");
function saveUserInfo() {
var userName = $('#username').val();
var password = $('#password').val();
var firstName = $('#firstname').val();
var lastName = $('#lastname').val();
var email = $('#email').val();
var dob = $('#datepicker').val();
var data = {userName, passWord, firstName, lastName, email, dob};
var url = 'register.jsp';
$.post(url, data)
.done(function(msg) { /* yay it worked */ });
.fail(function(xhr, status, err) {
output1.text(err);
});
}
I also noticed that you are getting many input fields in your code. If all these input fields are located in a form (for instance with the id of formId, you can use $('#formId').serialize() to create the vars string for you. You can read more about .serialize() here.

You can use ajax call of jquery by using following syntax.
Add this on head section of your page for jquery reference.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
For JS:
function saveUserInfo() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "...", // your api or url for fetching data
data: "..", // your data coming from front end in json
dataType: "json",
success: function (data) {
// your action need to perform
},
error: function (result) {
// handle error
}
});
}
However it is not recommended to make your connection or database related information provide on client side. For fetching data from backend it is recommended to make an API or web service for that.
You can use following links for references.
WebService: https://www.c-sharpcorner.com/UploadFile/00a8b7/web-service/
WebAPI: https://www.tutorialsteacher.com/webapi/create-web-api-project
Note: These both are for C# backend. Please mention your language name if anything else you are using.

It is the jQuery syntax of your code
function saveUserInfo() {
var userName = $('username').val();
var password = $('password').val;
var firstName = $('firstname').val;
var lastName = $('lastname').val;
var email =$('email').val;
var dob = $('datepicker').val;
var vars = {'userName':userName ,'password':password ,'firstName':firstName ,'lastName':firstName ,'email':email ,'datepicker':dob }
$.ajax(
{
url:'register.jsp',
data:vars ,
type:'POST'
dataType : "json",
contentType: "application/json; charset=utf-8",
success:function(result)
{
code to use result here
}
});
}

AJAX is not working in macOS WebView

I have created a WebView for macOS app and it contains one AJAX call. The same WebView is working fine when the app calls my local URL, but when it calls the live URL, the AJAX call is not working.
$(document).ready(function () {
$('#pripolcheck').click(function () {
var pripolcheck = $('#pripolcheck').val();
var app = $('#app').val();
var user_id = $('#user_id').val();
var contact = $('#contact').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1=' + pripolcheck + '&app1=' + app + '&user_id1=' + user_id;
if (pripolcheck == '') {
alert('Please Fill All Fields');
} else {
// AJAX Code To Submit Form.
$.ajax({
type: 'POST',
url: 'http://mywebsite.com/ajaxformsubmit.php',
data: dataString,
cache: false,
success: function (result) {
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$('input.pripolcheck').attr('disabled', true);
}
});
}
return false;
});
});
My local PHP version is 7.1.8 and my live server PHP version is 5.4.

Change your function to onclick of checkbox directly,put this code in your checkbox onclick="MyFuncion",why I'm telling this is for web view we need to give exact command in exact position it's not a browser
And your AJAX call will be like below,
function myFunction()
{
var pripolcheck = $("#pripolcheck").val();
var app = $("#app").val();
var user_id = $("#user_id").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1='+ pripolcheck + '&app1='+ app + '&user_id1='+ user_id;
if(pripolcheck=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxformsubmit.php",
data: dataString,
cache: false,
success: function(result){
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$("input.pripolcheck").attr("disabled", true);
}
});
}
return false;
}

"My local PHP version is 7.1.8 and my live server PHP version is 5.4."
I think this explains everything.
However, try setting an absolute URL in your call:
url: 'ajaxformsubmit.php',
to
url: '/ajaxformsubmit.php',
Or whatever the actual path would be. Just a single slash will give you
http://wherever.com/ajaxformsubmit.php

if u use same site url plz use relative path not absolute path then its ok.
if use defrant site url plz comment me so give me new solution
PLZ try
$(document).ready(function () {
$('#pripolcheck').click(function () {
var pripolcheck = $('#pripolcheck').val();
var app = $('#app').val();
var user_id = $('#user_id').val();
var contact = $('#contact').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'pripolcheck1=' + pripolcheck + '&app1=' + app + '&user_id1=' + user_id;
if (pripolcheck == '') {
alert('Please Fill All Fields');
} else {
// AJAX Code To Submit Form.
$.ajax({
type: 'POST',
url: '/ajaxformsubmit.php',
data: dataString,
cache: false,
success: function (result) {
// alert(result);
// $(".pripol").hide();
$('.pripolcheck').prop('checked', true);
$('input.pripolcheck').attr('disabled', true);
}
});
}
return false;
});
});

Javascript values not being assigned

I am having a problem getting values assigned for fname, lname and etc, these do not exist on the page until the success function is called and it posts to template/orderForm.php. if i for example console.log(fname) i get an empty field.
The first thing that happens is on login button submit it checks the information against the database via phpscripts/login.php, on success of that it posts to another page to get form data, such as their name and etc which are auto-populated with php echos.
$("#loginSubmit").click(function() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "POST",
url: "phpscripts/login.php",
dataType: 'text',
data: {
username: username,
password: password
},
success: function(data){
if(data == 'worked') {
$("#loginForm").hide(500);
$("#loginBtn").hide(500);
$("#registerBtn").hide(500);
$("#forgotPasswordBtn").hide(500);
$.post('template/orderForm.php', function(data) {
$('#approveData').html(data);
$("#updateInfo").click(function() {
var fname = $('#fname').attr('value');
var lname = $('#lname').attr('value');
var address = $('#address').attr('value');
var city = $('#city').attr('value');
var state = $('#state').attr('value');
var zip = $('#zip').attr('value');
var phone = $('#phone').attr('value');
console.log(fname);
$.ajax({
type: "POST",
//change to update script that is in myaccount.php
url: "phpscripts/update.php",
data: {
fname: fname,
lname: lname,
address: address,
city: city,
state: state,
zip: zip,
phone: phone
},
success: function(){
//do nothing
}
});
});
});
}
else {
}
}
});
});

Try $('#fname').val() instead of $('#fname').attr('value'), and same with others.

I don't know what's going on with your HTML so here's my guess:
This line:
$('#approveData').html(data);
contains your html which houses the element with an id of fname.
This js:
$("#updateInfo").click(function() { ... });
should be this:
$("#updateInfo").live('click', function() { ... });
And be outside in a ready statement or something. Not defined within the results of another listener.
This link explains .live:
http://api.jquery.com/live/
It registers newly inserted dom elements where as your basic listener you provided will not IF the fname element is written in by your request - an assumption, so don't yell if I am wrong here.

The form dont include the + sign, that i write

This code will submit the information from the form to a php file, everything works as it should, but when i write "hello this a text + - * " it remove the " + " sign from what i wrote, always. I dont know why, please help me out guys
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fname = $('#fname').attr('value');
var lname = $('#lname').attr('value');
$.ajax({
type: "POST",
url: "Mail.php",
data: "fname="+ fname + "&lname=" + lname,
success: function(){
$('form#submit').show();
//$('form#submit :input').val("");
$('div.success').fadeIn();
}
});
return false;
});
});

Change this line:
data: "fname="+ fname + "&lname=" + lname,
to:
data: "fname="+ encodeURIComponent(fname) + "&lname=" + encodeURIComponent(lname),
You need to escape special characters for use in URL strings.

if fname and lname are text boxes, why not use the .val() to retrieve them?
var fname = $('#fname').val();
var lname = $('#lname').val();
or better, use form .serialize() directly on the ajax:
$(function () {
$("form#submit").submit(function () {
var form = $(this)
$.ajax({
type: "POST",
url: "Mail.php",
data: form.serialize() //turns the form data into a query string
success: function () {
$('form#submit').show();
$('div.success').fadeIn();
}
});
return false;
});
});

That's because the pluses are converted to spaces. Use encodeURIComponent to escape the input. Always use some kind of escaping to avoid injections.

Or you could use serialize():
$.ajax({
...
data: $(this).serialize()
...
});
This takes all the :input elements inside your form and encodes them properly for sending to a remote server. You could also do this:
data: {
fname: fname,
lname: lname
}
jQuery understands that you're trying to send an array of values and will automatically escape it.
Btw, this is not very portable:
var fname = $('#fname').attr('value');
The better way is this:
var fname = $('#fname').val();

var email = $('#email').val();
var data = 'email=' + encodeURIComponent(email);
var url = 'test.php'
var type = 'post'
var success = function(output){}
var error = function(){}
$.ajax({
url:url,
type:type,
data:data,
success:success,
error:error
});
work great for me