We Keep Coding

fetching user details on successful login

I don't have hands on the API. I am using the provided URL to check the validity of a user based on its email. If the email and password match the data already present in API, I need to display them. I tried the part that has been commented now. Can someone help me?
$('#checkbutton').on('click',function(){
var self = this;
// var data={
// email: $('#emailer').val(),
// txtpaswrd: $('#paswrder').val()
// }
// var resultElement = $('#resultDiv');
var email = $('#emailer').val();
var txtpaswrd = $('#paswrder').val();
$.ajax({
type: "GET",
data: data,
processData:false,
contentType:false,
dataType:"json",
url: 'http://13.229.164.32/users/user_check.json?email=' + email,
success: function(nData){
alert(nData.password);
alert(nData.email);
if(email == nData.email && txtpaswrd == nData.password ){
//window.location = 'http://13.229.164.32/users.json';
}else{
alert('Password Error');
}
}
});
});

Try this:
$('#checkbutton').on('click', function() {
var email = $('#emailer').val();
var password = $('#paswrder').val();
var $resultElement = $('#resultDiv');
var URL = 'http://13.229.164.32/users/user_check.json?email=' + email;
$.getJSON(URL, response => {
var result = reponse.password == password ? "Password is a match." : "Passwords don't match.";
$resultElement.html(result)
});
});

How to send and retrieve information/

I have a php file saven on a different domain, and Im using this piece of code to send the username and with that get the info of the user.
Im trying to do something like this, but this is not working is there a way to do it.
var dataString = "username="+username+"";
var url = "";
$.ajax({
type: "POST",
url: url,
data: dataString,
crossDomain: true,
cache: false,
success: $.getJSON(url, function(result)
{
console.log(result);
$.each(result, function(i, field)
{
var id = field.id;
var username = field.username;
var email = field.email;
$('#profile-info').append("ID: " + id + "<br>Username: " + username + "<br>Email: " + email + "<br><br>");
});
})
});

Replace the $.getJSON() function you have for the success calback provided by the jQuery ajax function, and you can pass directly the username through the data parameter as { username : username }, because it's already defined.
Then when you receive successfully your data you can iterate over each result using the jQuery $.each function.
Do you really need to set the cache parameter to false?, just to know.
Also if you want use let instead of var, those variables will be just within the $.each "block".
<script>
var url = '';
$.ajax({
type: "POST",
url: url,
data: { username: username },
crossDomain: true,
cache: false,
success: function(result) {
console.log(result);
$.each(result, function(i, field) {
let id = field.id,
username = field.username,
email = field.email;
$('#profile-info').append("ID: " + id + "<br>Username: " + username + "<br>Email: " + email + "<br><br>");
});
}
});
</script>

i am not able to pass the html textbox values to webservice using jquery

i am not able to pass the html textbox values to webservice using jquery
my jquery is working fine for empty userName and password but it is not working if i add the ajax part. please help me in this issue
my html script
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" >
$(function () {
$("#ButtonLogin").click(function () {
var username = $("#TextUN").val();
var password = $("#TextP").val();
if (username == "") { alert("fill the username !"); return; }
if (password == "") { alert("fill the password !"); return; }
var str = "{'userName':'" + username + "', 'password': '" + password + "'}";
$.ajax({
type: "post",
url: "http://localhost:4522/AdWebService.asmx/CheckUser",
contenttype: "application/json; charset=utf-8",
data: str,
datatype: "json",
success: function (res) {
try {
var jsondata = res.d;
if (jsondata == "true") {
window.location("http://localhost:5273/");
}
else {
alert("failure")
}
}
catch (e) {
alert(e.ToString());
}
},
failure: function (err) {
alert(err)
}
});
});
});
</script>
my web service method:
[WebMethod]
public string CheckUser(string un,string pass)
{
UserAds u = new UserAds();
u.UserName = un;
u.Password = pass;
JavaScriptSerializer js = new JavaScriptSerializer();
return js.Serialize(udao.CheckUser(u));
}

You need to pass correct parameters. As you have defined un and pass as parameter to web service method, you need to use them.
Use
var str = "{'un':'" + username + "', 'pass': '" + password + "'}";
Also you can use JSON.stringify()
var str = JSON.stringify({
un: username,
pass: password
});

The better solution would be to not create a string manually for the data to be posted to your service. Instead use the "serialize" function available in jQuery. You can use something like this:
var data = $('form').serialize();
Thereafter you can pass this data in your ajax call.

var username = $("#TextUN").val();
try
var username = $("#TextUN").text();

Check TextP in you html code.
Else try this syntaxe :
var str = '{"userName":"' + username + '", "password": "' + password + '"}';

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