Question

I have a form where you fill and when you click the submit button a js script is called which by it’s turn call a php script to get results and displays them in the user in the form of an alert box.

The weird thing is that if i have the command “alert(“msg”)” in my js( you can see it below) evertyhing works great but if i remove it nothing seems to work….any idea why is this happening?
Thnx

<form action="#" method="post">
 <label for="userFirstName">Name </label>
 <input name="userFirstName" id="userFirstName" type="text" placeholder="First Name"        autofocus  /><br>
 <label for="userLastName">Surname </label>
 <input name="userLastName" id="userLastName" type="text" placeholder="Surname"  /><br>
 <label for="phonenumber">Phone Number</label>
  <input name="phonenumber" id="phonenumber" type="text" placeholder="Your Telephone  Number(10 digits))"  /><br>
 <label for="email">Email Address</label>
 <input name="email" id="email" type="text" placeholder="Your Email Address"  /><br>
 <button class="clearbutton" type="submit" value="Submit" onclick="checkInput(userFirstName.value,userLastName.value,phonenumber.value,email.value)">Add Partner</button>

The js script

//the first is the file and the second the value
function checkInput(name,surname,tel,email) {
//alert(name+" "+surname+" "+tel+" "+email);    
xmlhttpURL=GetXmlHttpObjectURL();
if (xmlhttpURL==null) {
    alert ("Your browser does not support AJAX!");
    return;
}

var url = "AddPartnersDb.php";
url = url + "?n=" + name + "&l=" + surname + "&t=" + tel + "&m=" + email;                           
    // Adds a parameter (q) to the URL with the content of the drop-down box
url = url + "&sid=" + Math.random();                    
    // Adds a random number to prevent the server from using a cached file
xmlhttpURL.onload = stateChanged;   // Each time the readyState property changes, the stateChanged() function will be executed
xmlhttpURL.open("GET",url,true);                // Opens the XMLHTTP object with the given URL
xmlhttpURL.send(null); 
alert("msg"); //<---------------------When i have this everything sees ok...
    } 

function stateChanged() {
    if (xmlhttpURL.readyState==4) {
        var res = xmlhttpURL.responseText;      
        //if(res.length>0)
            alert(res);
    }
}

function GetXmlHttpObjectURL() {
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}

the php script:

<?php

//database connection
$dbc = mysqli_connect('localhost','root','root','WTHw3') or die('Error connecting to MySQL server.');

//the values sent from the ajax script
$name = mysqli_real_escape_string($dbc,trim($_GET["n"]));
$surname = mysqli_real_escape_string($dbc,trim($_GET["l"]));
$email=mysqli_real_escape_string($dbc,trim($_GET["m"]));;
$tel=mysqli_real_escape_string($dbc,trim($_GET["t"]));

//a var to store the result(if any) and show the error to the admin
$result="";
if ( !eregi ( '[a-z||0-9]@[a-z||0-9].[a-z]', $email ) ) { //checks to make sure the email address is in a valid format  
    $result .= "Not Valid e-mail!\n";
}   

if(strlen($tel) != 10){
    $result .= "Telephone must be a numeric with 10 nums length!";
}elseif(!is_numeric($tel)) {        
    $result .= "Telephone must be a numeric with 10 nums length!!!";
    }

//check for a validation error
if($result==""){
    //query to be executed
    //$query = "INSERT INTO  Partners(partnerName,partnerSurname,partnerTel,partnerEmail) values  ('$name','$surname','$tel','$email')"; 
    //query execution
    //$dbResult = mysqli_query($dbc,$query) or die('Error querying database.');
    echo "wtf";

}else {
    echo $result;
}
//close connection
mysqli_close($dbc);

?>

Answer 1

Your problem is that your button shouldn’t be type “submit”, since you are calling a webservice via AJAX when user clicks: when the alert() is called it gives time for the ajax call to be completed before submitting the form.

Try changing the type of your submit button to button, and add a return false and the end of checkInput().