I have a form that i built using bootstrap, on enter it submits data via ajax, sometimes this works and other times the input box just goes empty and nothing happens.
<form class="form-inline" onsubmit="return Track_User()">
<div class="form-group">
<input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name">
<select class="form-control" id="Server_Name">
<option value="oce">OCE</option>
<option value="na">NA</option>
<option value="eue">EUE</option>
<option value="EUW">EUW</option>
</select>
</div>
<button type="submit" class="btn btn-default btn-md">Track</button>
<div id="Helpful_Output"></div>
</form>
Track_User function
function Track_User(){
// XML request for check summoner name
Summoner_Name = document.getElementById('Summoner_Name').value;
Server_Name = document.getElementById('Server_Name').value;
// Retrieves data about members in the group using ajax
var xmlhttp = new XMLHttpRequest();
var url = "check_summoner_name.php?Summoner_Name=" + Summoner_Name + "&Server_Name=" + Server_Name;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
Update_Helpful_Output(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
// Run php script to confirm a few things
// 1. Do we already know this summoner name + server?
// 2. If we don't know the summoner, look it up, if false, return error message that summoner name is invalid
// 3. If summoner name is valid, check if we already know this summoner id + server_name combination
// 4. If we don't, create a new user
// 5. -- Finally we redirect to the graph page
}
If needed url of development page: http://crew-cut.com.au/bootstrap/loltimeplayed/index.php
Sorry for long url
Changes:
<form class="form-inline" onsubmit="Track_User()">
<div class="form-group">
<input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name">
<select class="form-control" id="Server_Name">
<option value="oce">OCE</option>
<option value="na">NA</option>
<option value="eue">EUE</option>
<option value="EUW">EUW</option>
</select>
</div>
<button type="submit" class="btn btn-default btn-md">Track</button>
<div id="Helpful_Output"></div>
</form>
function Track_User(e){
e.preventDefault();
// XML request for check summoner name
Summoner_Name = document.getElementById('Summoner_Name').value;
Server_Name = document.getElementById('Server_Name').value;
// Retrieves data about members in the group using ajax
var xmlhttp = new XMLHttpRequest();
var url = "check_summoner_name.php?Summoner_Name=" + Summoner_Name + "&Server_Name=" + Server_Name;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
Update_Helpful_Output(xmlhttp.responseText);
}
else if (xmlhttp.readyState == 4 && xmlhttp.status == 404)
{
alert("Yeah I'm working, but I returned a 404.")
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
document.querySelector(".form-inline").querySelector(".btn").addEventListener("click", Track_User, false);
<form class="form-inline" >
<div class="form-group">
<input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name">
<select class="form-control" id="Server_Name">
<option value="oce">OCE</option>
<option value="na">NA</option>
<option value="eue">EUE</option>
<option value="EUW">EUW</option>
</select>
</div>
<button type="submit" class="btn btn-default btn-md">Track</button>
<div id="Helpful_Output"></div>
</form>
This will do it. No longer submitting via form, but using the track button to start the Ajax call. The problem lay in submitting the form. It just posted the form to nowhere without ever calling the ajax request. Now it does fire the ajax call.
Related
I have multiple select field among other fields on my form and submitting the data to the database using ajax. The data is submitting successfully but the problem is, when the multiple select field is empty, noting works: both the js and php code does not execute. Even thought I have the multiple select on the form but I plan not to make mandatory. Please help
$(function() {
$('#form1').on('click', function(e) {
e.preventDefault(); // do not allow the default form action
/* var realvalues = new Array();//storing the selected values inside an array
$('#s2_multi_value:selected').each(function(i, selected) {
realvalues[i] = $(selected).val();
}); */
var form = $(this)[0].form;
var data = $(form).serialize();
$.ajax({
method: "POST",
url: "orgprocess1.php",
data: data
})
.done(function(data) { // capture the return from process.php
var obj = $.parseJSON(data);
var orgvalid = obj.valid2;
var buty = obj.$bty;
var orgmessage = obj.msg_orgcode;
var btypemessage = obj.msg_business;
if (orgvalid == 1) { // place results on the page
$('input[name="org_Code"]').removeClass('textBoxError');
$('#result2').html('<div class="valid"></div>');
} else {
$('input[name="org_Code"]').addClass('textBoxError');
$('#result2').html('<div class="error">' + orgmessage + '</div>');
}
if (buty == 1) { // place results on the page
$('select[name="btype"]').removeClass('textBoxError');
$('#result3').html('<div class="valid"></div>');
} else {
$('input[name="btype"]').addClass('textBoxError');
$('#select3').html('<div class="error">' + btypemessage + '</div>');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4">
<p>Email Address</p>
<input type="text" class="form-control" id="email" name="email" placeholder="Email Address">
</div>
<div class="col-sm-4">
<p>Address</p>
<input type="text" class="form-control" id="addre" name="addre" placeholder="Physical Assress">
</div>
<div class="col-sm-4">
<p>Business Type</p>
<select id="s2_multi_value" name="btype[]" class="form-control" multiple="multiple">
<option value="">select one</option>
<option value="Goods">Goods</option>
<option value="Consultancy">Consultancy</option>
</select>
<input type="submit" value="submit" name="submit">
</div>
Try the following snippet it submits form weather you select any value or not.
$(document).ready(function() {
$(document).on('submit', function(e) {
e.preventDefault(); // do not allow the default form action
console.log("form submitting and sending ajax call");
/* var realvalues = new Array();//storing the selected values inside an array
$('#s2_multi_value:selected').each(function(i, selected) {
realvalues[i] = $(selected).val();
}); */
var form = $(this)[0].form;
var data = $(form).serialize();
$.ajax({
method: "POST",
url: "orgprocess1.php",
data: data
}).error(function(){
console.log('error for ajax')
})
.done(function(data) { // capture the return from process.php
var obj = $.parseJSON(data);
var orgvalid = obj.valid2;
var buty = obj.$bty;
var orgmessage = obj.msg_orgcode;
var btypemessage = obj.msg_business;
console.log("into ajax done function",data);
if (orgvalid == 1) { // place results on the page
$('input[name="org_Code"]').removeClass('textBoxError');
$('#result2').html('<div class="valid"></div>');
} else {
$('input[name="org_Code"]').addClass('textBoxError');
$('#result2').html('<div class="error">' + orgmessage + '</div>');
}
if (buty == 1) { // place results on the page
$('select[name="btype"]').removeClass('textBoxError');
$('#result3').html('<div class="valid"></div>');
} else {
$('input[name="btype"]').addClass('textBoxError');
$('#select3').html('<div class="error">' + btypemessage + '</div>');
}
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="my-form" action="http://google.com">
<div class="form-group">
<div class="col-sm-4">
<p>Email Address</p>
<input type="text" class="form-control" id="email" name="email" placeholder="Email Address">
</div>
<div class="col-sm-4">
<p>Address</p>
<input type="text" class="form-control" id="addre" name="addre" placeholder="Physical Assress">
</div>
<div class="col-sm-4">
<p>Business Type</p>
<select id="s2_multi_value" name="btype[]" class="form-control" multiple="multiple">
<option value="">select one</option>
<option value="Goods">Goods</option>
<option value="Consultancy">Consultancy</option>
</select>
<input type="submit" value="submit" name="submit">
</div>
</form>
I'm a dabbler when it comes to coding so I have a basic to intermediate understanding of various languages. I have a HTML form with a number of fields, one of which I'm trying to grab when a button is pressed but I'm getting Uncaught TypeError: Cannot read property 'value' of null
Here's my code in total:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="testForm.css">
<title>Create Incident Form</title>
</head>
<body>
<header>Whittle ERP Ecosystem</header>
<p style="font-family:GE Inspira Sans;font-size:18px">This form is for
raising Incidents against the pillar applications in the Whittle ERP
Ecosystem</p>
<p style="font-family:GE Inspira Sans;font-size:18px;color:red;font-
weight:bold">ALL FIELDS ARE MANDATORY</p>
<form id="frm1" action="" method="post" name="incForm">
<fieldset>
<legend>User Detail</legend>
<label for="user-SSO">*SSO</label>
<input type="text" name="usrSSO" id="usrSSO" value="108013590" required>
<input type="Button" onclick="validateSSO()" value="Post">
<label for="user-tel"> *Contact Number:</label>
<input type="text" name="user-tel" id="user-tel" required>
</fieldset>
<fieldset>
<legend>System</legend>
<label for="*Choose System">Choose System:</label>
<select name="system" id="system" required>
<option value="R12">R12</option>
<option value="Proficy">Proficy</option>
<option value="TipQA">TipQA</option>
</select>
</fieldset>
<fieldset>
<legend>*Brief Description</legend>
<textarea rows="1" cols="60" name="bDesc" required></textarea>
</fieldset>
<fieldset>
<legend>*Detailed Description</legend>
<textarea rows="8" cols="60" name="dDesc" required></textarea>
</fieldset>
<fieldset>
<legend>Action</legend>
<input type="submit" name="Submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
<script>
function validateSSO(){
document.write("Starting function.....!<br />")
var fname = document.getElementById("usrSSO");
document.write(fname.value)
var strOutput
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
strOutput = xmlhttp.responseText
document.write("Function value: " + strOutput + "<br />")
}
};
xmlhttp.open("GET", "url", true)
xmlhttp.send();
if (strOutput == "A" ) {
window.alert("Condition met - SSO is valid")
}else{
document.write("Nope - invalid");
}
}
</script>
I've seen a few articles dealing with this but none seem to help me! I'm just trying to grab the contents of the usrSSO text field to use in a validation function. What have I missed/screwed up?
Thanks in advance
So as was said before using console.log will fix your first problem. I see a second problem and that is how you are handling the strOutput var. The way you have it written will cause you to handle an undefined variable since the request is asynchronous. You should only use it in the callback function for onreadystatechange like below to ensure you use it when the request is finished.
function validateSSO() {
console.log("Starting function.....!")
var fname = document.getElementById("usrSSO");
console.log(fname.value)
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200){
var strOutput = xmlhttp.responseText
console.log("Function value: " + strOutput);
if (strOutput == "A") {
alert("Condition met - SSO is valid")
}
else {
alert("Nope - invalid");
}
}
else {
alert('There was a problem with the request. status code: ' + this.status);
}
}
};
xmlhttp.open("GET", "url", true)
xmlhttp.send();
}
<header>Whittle ERP Ecosystem</header>
<p style="font-family:GE Inspira Sans;font-size:18px">This form is for raising Incidents against the pillar applications in the Whittle ERP Ecosystem
</p>
<p style="font-family:GE Inspira Sans;font-size:18px;color:red;font-
weight:bold">ALL FIELDS ARE MANDATORY</p>
<form id="frm1" action="" method="post" name="incForm">
<fieldset>
<legend>User Detail</legend>
<label for="user-SSO">*SSO</label>
<input type="text" name="usrSSO" id="usrSSO" value="108013590" required>
<input type="Button" onclick="validateSSO()" value="Post">
<label for="user-tel"> *Contact Number:</label>
<input type="text" name="user-tel" id="user-tel" required>
</fieldset>
<fieldset>
<legend>System</legend>
<label for="*Choose System">Choose System:</label>
<select name="system" id="system" required>
<option value="R12">R12</option>
<option value="Proficy">Proficy</option>
<option value="TipQA">TipQA</option>
</select>
</fieldset>
<fieldset>
<legend>*Brief Description</legend>
<textarea rows="1" cols="60" name="bDesc" required></textarea>
</fieldset>
<fieldset>
<legend>*Detailed Description</legend>
<textarea rows="8" cols="60" name="dDesc" required></textarea>
</fieldset>
<fieldset>
<legend>Action</legend>
<input type="submit" name="Submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
Ok, so what's happening is that your document.write function is replacing the entire document with that one line of text, if you change document.write to console.log your problem should go away.
My form doesn't get submitted although I see the alert "Your message was sent!". Can anyone tell me what's wrong? Here're the codes I have written. I have a table called messages in my database to insert form data entered from HTML form. Thanks!
HTML file
<form action="javascript:contactSubmit();" name="front_home_contact">
<div class="front_home_details_field">
<input type="text" placeholder="Full Name" name="home_contact_field" required pattern="[A-z ]+"/>
</div>
<div class="front_home_details_field">
<input type="text" placeholder="Phone Number" name="home_contact_field" required pattern="0[0-9]{9}" maxlength="10"/>
</div>
<div class="front_home_details_field">
<input type="email" placeholder="E-mail" name="home_contact_field" required/>
</div>
<div class="front_home_details_field">
<input type="text" placeholder="Subject" name="home_contact_field" required pattern="[A-z s]+"/>
</div>
<div class="front_home_details_field" style="height:151px;">
<textarea placeholder="Message" name="home_contact_field" aria-invalid="false" required></textarea>
</div>
<input type="submit" value="Send" name="home_contact_field"/>
</form>
Javascript .js file
function contactSubmit(){
document.front_home_contact.setAttribute("novalidate","true");
var elems = document.getElementsByName("front_home_contact"); //or
var xhrx = (window.XMLHttpRequest)? new XMLHttpRequest(): new activeXObject("Microsoft.XMLHTTP");
var data = new FormData();
data.append("func","insertMsg");
data.append("arg",elems);
alert("Your message was sent!");
/*xhrx.onreadystatechange = function(){
if(xhrx.readyState==4 && xhrx.status==200){
reportSection.innerHTML= xhrx.responseText.trim();
httpComplete +=1;
if (httpComplete == 3) elem.style.display="block";
}
}*/
xhrx.open('post','insertMessages.php',true);
xhrx.send(data);
for (i = 0; i< elems.length;i++){
elems[i].value="";
}
}
PHP file (insertMessages.php)
<?php
include "config.php";
$function = $_POST['func'];
if ($function == "insertMsg"){
$query = "INSERT INTO `messages`(`SenderName`, `PhoneNumber`, `Email`, `Subject`, `Message`) VALUES ('".$_POST['args'][0]."');";
if(mysqli_query($con,$query)){
echo "<script type='text/javascript'>alert('OK');</script>";
}
else{
echo "<script type='text/javascript'>alert('error');</script>";
}
}
?>
Directly you can not display alert() from ajax response.
Define onreadystatechange and define the action you want to perform based on your response.
Directly don't pass script in php response.
Pass success / error (if possible just use JSON in sending response) and after receiving in response just check the value and perform action you want to perform.
like,
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if( this.responseText=="success"){
alert('OK');
}else{
alert('error');
}
}
};
I couldn't find any deep guide to ajax, especially for a php server side.
I currently try only to post the data to the PHP and test it before trying my luck with dumping to SQL.
Worked on it for 2 days, still not working. Guess it's a good time to head to stock overflow:
html+js:
<script>//send data scripts
var formNode = document.querySelector("#customerRegiForm");
var formData = new FormData(formNode);
var request = new XMLHttpRequest();
request.open("POST", "php/formSubmission.php", true);
request.onreadystatechange = function () {
if(request.readyState == 4 && request.status == 200){
document.getElementById("testing").innerHTML = request.responseTexts;
}
};
request.send(formData);
</script>
<form class="regiForm" id="customerRegiForm" onsubmit="return formValidation()">
<div>
Name: <input type="text" id="firstName" name="firstname" class="" required />
Family Name: <input type="text" id="lastName" name="lastname" class="" required />
</div>
<div>
Email: <input type="email" class="" id="email" name="email "required />
</div>
<div>
Phone Number: <input type="text" id="phone" name="phone" class="" required />
</div>
<div>
Country: <select name="country" class="countries" id="countryId" style="width: 100px">
<option value="">Select Country</option>
</select>
State: <select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
City: <select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
</div>
<div>
Address: <input type="text" name="address" /><br />
</div>
<button type="submit">Submit</button>
</form>
<p id="testing"></p>
<?php
/**
* Created by PhpStorm.
* User: user
* Date: 17-Sep-16
* Time: 14:50
*/
echo $_POST['email'];
?>
also, any recommendations for videos and books in the subject?
I don't know if it's just a typo from your real code, but
request.responseTexts
should be
request.responseText
(the final "s" is not ok)
There are few things you need to change in your code, such as:
Look at the following <input> element,
<input type="email" class="" id="email" name="email "required />
^^^^^^^^^^^^^
Can you see that extra space after email? That's why on the PHP side, echo $_POST['email']; won't work. This <input> element should be like this:
<input type="email" class="" id="email" name="email" required />
Look at this JavaScript statement here,
document.getElementById("testing").innerHTML = request.responseTexts;
^^^^^^^^^^^^^^^^^^^^^
It should be,
document.getElementById("testing").innerHTML = request.responseText;
Look the the top <form> element,
<form class="regiForm" id="customerRegiForm" onsubmit="return formValidation()">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
But I see no formValidation() function in your code. Create a function named formValidation() and make sure you return false from that function, otherwise the form will get submitted each time you hit the submit button. So, your script should be like this:
<script>
function formValidation(){
var formNode = document.querySelector("#customerRegiForm");
var formData = new FormData(formNode);
var request = new XMLHttpRequest();
request.open("POST", "post.php", true);
request.onreadystatechange = function () {
if(request.readyState == 4 && request.status == 200){
document.getElementById("testing").innerHTML = request.responseText;
}
};
request.send(formData);
return false;
}
</script>
I am having a problem with a script i am programming. I am very new to AJAX, and can't figure out what i am doing wrong that makes it not to work. Any help would be highly appreciated. I have multiple forms on the page and when i separate the forms the communication between the Ajax and php works just fine. But when i put everything together, it stops working. I do believe its either a communication problem or maybe some conflicting scripts or just some bad coding.
Here is the php code:
#session_start();
if(isset($_SESSION["username"])){
header("location: home.php");
exit();
}else{
$usertitle = $_POST['ut'];
$userfname = $_POST['uf'];
$userlname = $_POST['ul'];
$useremail = $_POST['ue'];
$userloc = $_POST['uloc'];
$user_est_typ = $_POST['utp'];
$userfname = preg_replace("/[^A-Za-z0-9?![:space:]]/","",$userfname);
$userlname = preg_replace("/[^A-Za-z0-9?![:space:]]/","",$userlname);
if($usertitle == "Title...."){
echo '<font color="red">Error: Please select a title.';
exit();
}else if($userfname == NULL){
exit('<font color="red">Error: You need a first name to proceed. </font>');
}else if( strlen($userfname) <= 2){
exit('<font color="red">Error: First name should be three (3) or more letters.</font>');
} else if($userlname == ""){
exit('<font color="red">Error: Giving a Surname would be nice.</font>');
}else if( strlen($userlname) <= 2){
exit('<font color="red">Error: Surname should be three (3) or more Letters.</font>');
}else if(!strpos($useremail, "#") || !strpos($useremail, "." || !filter_var($useremail, FILTER_VALIDATE_EMAIL) === true)){
exit('<font color="red">Email Address not valid</font>');
}else if($user_est_typ == "Select..."){
exit('<font color="red">Error: You must select an estimate type to proceed.</font>');
}else if($userloc == ""){
exit('<font color="red">Error: A location would be required so as to get the radiation data for the estimates</font>');
}else {
include("../../scripts/dbconect.php");
$queryuseremail = mysql_query("SELECT id FROM userdata WHERE userEmail='$useremail' LIMIT 1");
$useremail_check = mysql_num_rows($queryuseremail);
if ($useremail_check > 0){
echo "The email address ".$useremail." is already registered in ur database";
exit();
}
// More Validation and mysql insert
exit('<font color="red">signup_success</font>');
}
}
Here is my AJAX codes:
function _(x){
return document.getElementById(x);
}
function show(id){
var divelement = _(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display == 'none';
}
function hide(id){
var divelement = _(id);
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display == 'block';
}
function emptyElement(id){
_(id).innerHTML = "";
}
function estimatetypeimg(){
var estType = _('estimatetype').value;
if (estType == 'solarpv'){
show('estimate_pv');
hide('estimate_thermal');
}
else if(estType == 'solarthermal'){
hide('estimate_pv');
show('estimate_thermal');
}
else{
hide('estimate_pv');
hide('estimate_thermal');
}
}
function newUsers() {
var title = _("salutation").value;
var fname = _("fname").value;
var lname = _("lname").value;
var email = _("email").value;
var loc = _("location").value;
var tp = _("estimatetype").value;
var url = "ajax.php";
var vars = "ut="+title+"uf="+fname+"&ul="+lname+"&ue="+email+"&uloc="+loc+"&utp="+tp;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
_("statuscheck").innerHTML = xhttp.responseText;
}
};
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(vars);
}
And here is my html code:
<div id="startbuts" style="display:none">
<form class="pure-form" name="startbutsform" id="startbutsform" onsubmit="return false;">
<button type="submit" id="newusersbtn" onclick="show('newusers'); hide('existingusers'); hide('existingusersbtn');"class="pure-button pure-button-primary">New Estimate</button>
<button type="submit" id="existingusersbtn" onclick="show('existingusers'); hide('newusers'); hide('newusersbtn');" class="button-secondary pure-button">Load Previous Estimate</button>
</form>
<div id="existingusers" style="display:none">
<form class="pure-form" name="signupex" id="signupex" onsubmit="return false;">
<fieldset>
<legend>Existing users: login with your email and Data ID.</legend>
<input type="email" id="dataemail" placeholder="Email" >
<input type="text" id="dataid" placeholder="DataId"><br/>
<button id="signupexbtn" type="submit" onclick="signinold()" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</div>
<div id="newusers" style="display:none">
<form class="pure-form" name="signupnew" id="signupnew" onsubmit="return false;">
<fieldset>
<legend>New users start here.</legend>
<div class="pure-control-group">
<label for="salutation">Title: </label>
<select id="salutation" name="salutation">
<option>Title....</option>
<option>Prof. Dr.</option>
<option>Prof.</option>
<option>Dr.</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss.</option>
</select>
</div>
<div class="pure-control-group">
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text" placeholder="First Name">
</div>
<div class="pure-control-group">
<label for="lname">Last name:</label>
<input id="lname" name="lname" onfocus="emptyElement('errorcheck')" type="text" placeholder="Last Name">
</div>
<div class="pure-control-group">
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" onfocus="emptyElement('errorcheck')" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="location">Project Location: </label>
<input id="location" name="location" type="text" onfocus="emptyElement('errorcheck')" placeholder="Enter City ex Buea...">
</div>
<div class="pure-control-group">
<label for="estimatetype">Type of Estimate: </label>
<select id="estimatetype" name="estimatetype" onchange="estimatetypeimg()">
<option value="Select">Select...</option>
<option value="solarpv">Solar PV</option>
<option value="solarthermal">Solar Thermal</option>
</select>
</div>
<div id="estimate_pv" style="display:none" >
<img id="solarpvimg" src="images/solarpv.png" width="250" height="109" alt="Solar PV" />
</div>
<div id="estimate_thermal" style="display:none">
<img id="solarthermalimg" src="images/solarthermal.png" width="250" height="109" alt="Solar PV" />
</div>
<hr/>
<button id="signupnewbtn" type="button" class="pure-button pure-button-primary" onclick="newUsers()" >Start Calculator</button>
<button onclick="emptyElement('errorcheck'); hide('estimate_pv'); hide(estimate_thermal);" class="pure-button pure-button-primary" type="reset">Reset </button>
</fieldset>
</form>
</div>
</div>
Thank you David Lavieri and especially Sher Kahn. Your responses got me thinking and i finally figured out why I was not getting any response from my PhP script. As Khan also mention, I am just a hobby coder and you are absolutely right my code is not very clean. I cleaned the code on JSLint and realised i had too many bad coding habits. :). Thanks also for giving me a heads up with malsup query plugins. they are very handy and will help a lot.
So finally to the problem I had. The actual problem was the link to the php file. The url was poorly defined which made it impossible for the communication between the ajax and the php file. I use Dreamweaver and when i used the browse tool it gave me a link to the file, but because my javascript was external, the link was only relative to the Javascript file, and not the main html file. Also when i double checked my data vars, i missed and "&" for my second variable in the string before "uf"
var url = "ajax.php";// i changed the path file to scripts/ajax.php and it worked like magic.
var vars = "ut="+title+"uf="+fname+"&ul="+lname+"&ue="+email+"&uloc="+loc+"&utp="+tp;// before
var vars = "ut="+title+"&uf="+fname+"&ul="+lname+"&ue="+email+"&uloc="+loc+"&utp="+tp;// After
Hope this can be of help to someone else.
regards and thanks David and Khan.