Javascript / PHP交互仅在第二次单击时出现

Question

Have searched for the answer but no joy, so here goes...

I'm working on a mobile hybrid app. I want the user to fill in their id number, which is then submitted to a javascript function for basic validation, then kicks in a jQuery.getJSON request to my serverside PHP which returns the data and then my jQuery will repopulate the form div with the data.

Currently it doesn't really work at all in Firefox, and only works correctly in Safari after I press the submit button for a second time. It returns the correct data, so the link is ok.

My problem is: Why does the div not get repopulated after the first click?

HTML:

<div id="login540div">
<form id="login540form" onSubmit="login540()">
Enter Student ID number<input type="text" name="login540id" id="login540id"/>
<input type="submit" value="Submit" />
</form>
</div>

Javascript:

function login540(){
// validates the data entered is an integer. 
var loginNo = document.getElementById("login540id").value;
//if(!isNaN(loginNo))
 if((parseFloat(loginNo) == parseInt(loginNo)) && !isNaN(loginNo))
{

 //jSonCaller(loginNo); 
 $.getJSON('http://localhost:8888/c05673160/login540.php?q='+loginNo, function(data){

//alert(data);
$('#login540div').html("<p>First Name ="+
data.firstName+
"</p> Last Name ="+data.lastName+" </p>Module No.1 ="+
data.moduleNo1+"</p> Module No.2 ="+
data.moduleNo2+"<p> Course ID="+
data.courseID+"</p>");
    })

}
  else 
    {
    // alert(loginNo);  CHECKED
    alert("Please make sure to insert only a whole number");
        } 

Then the PHP goes like this...

    <?php
include ("config.php");
/*
require_once('FirePHPCore/FirePHP.class.php');
ob_start();
$firephp = FirePHP::getInstance(true);

$var = array('i'=>10, 'j'=>20);

$firephp->log($var, 'Iterators');
*/

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'root';
$dbname = 'collegeData';

$q=$_GET["q"];

$table = "studentTable";
$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if (!$conn)     
    die('Could not connect: ' . mysql_error());
if (!mysql_select_db($dbname))    
    die("Can't select database");   

$result = mysql_query("SELECT * FROM {$table} WHERE studentID = '".$q."'");
if (!$result)  
    die("Query to show fields from table failed!" . mysql_error());

$json = array();
while($row = mysql_fetch_array ($result))     
{
    $json = array(
        'firstName' => $row['firstName'],
        'lastName' => $row['lastName'],
        'moduleNo1' => $row['moduleNo1'],
        'moduleNo2' => $row['moduleNo2'],
        'courseID' => $row['courseID']
    );
}

$jsonstring = json_encode($json);
echo $jsonstring;

mysql_close($conn);
?>

I can't figure out what's wrong, and I've been messing around with various things for the last few days trying to fix it, but no joy, so I'd really appreciate any help you can give.

Answer 1

The bottom of Function login540() is missing, but this needs to kill the default "submit" action: this can be done with "return false;" at the end. As I can't see the end, not sure if this happens or not, but the form probably "submits" while the AJAX is running.

This is compounded as the form doesn't have an action, which probably explains the different browser behaviour. I suggest setting action to "#" and then, if you see "#" added in the URL then the form has submitted and not been stopped by your function.

Answer 2

@Robbie had a good point that you don't appear to be stopping the default behavior of the form submission. To do this you need to change a couple things:

1. onSubmit="login540()" needs to change to onSubmit="return login540()" otherwise whatever you return from the login540() function will be ignored.
2. At the end of the login540() function you need to return false; to stop the form from submitting normally. You can also pass in the event object as the first argument and use event.preventDefault() instead: function login540(event){event.preventDefault();...} .

To do yourself a favor however, you can use jQuery to bind the submit event handler to the form rather than using inline JS (tisk, tisk, :) )

$('#login540form').on('submit', login540);

This way you can keep all of your JS in one place rather than spread-out all over your HTML.