February 9, 201214 yr Hi, I have an ajax login form in Jquery, but it doesn't work in IE9 nor IE8, here's what I think is the issue: $.post("ajax_login.php",{ username:$('#username').attr("value"),password:$('#password').attr("value"),rand:Math.random() } ,function(data){}); I have replaced .val() with .attr("value"), so I've tried them both there. This works fine on chrome, safari an FF. However if I place this in the code: alert("User: "+$('#username').attr("value")+" password: "+$('#password').attr("value")); it shows me an alert box with the details I put into the inputs with id=username and id=password respectively. What is going on here? shouldn't it pass the values onto the ajax_login.php file? Thanks. Edited February 9, 201214 yr by Script©
February 9, 201214 yr Yes it should pass the values onto the PHP file, and as far as I'm aware there aren't any major bugs with jQuery post requests and IE so it's a little odd. For arguments sake, if you replaced your ajax_login.php script with a simple test script that just returns the values, eg: <?php extract($_POST); echo "Username: ".$username."<br />Password: ".$password."<br />Rand: ".$rand; ?> And then made your $.post request print out the returned values onto the page, eg: $.post("test.php",{ username:$('#username').attr("value"),password:$('#password').attr("value"),rand:Math.random() } ,function(data){ $('#returned').html(data); }); Does that work in your IE? Edited February 9, 201214 yr by Spitfire
February 9, 201214 yr Author Cheers for the quick reply And nope, ajax_login returns an error saying password and username variables are undefined. However on chrome I get the expected output and no errors...
February 9, 201214 yr This might help you, just a quick example of a working version, just whipped it up in a few mins so will almost certainly be buggy. Trying out my new code editor Runs as a full standalone script (on Apache, obviously): <? //You shouldn't mix PHP with HTML, //but it's a super quick example! if (!empty($_POST)){ extract($_POST); //Return a JSON string for this example die ( json_encode( array( 'username' => $username, 'password' => $password, 'rand' => $rand ) ) ); } ?> <!DOCTYPE html> <html> <head> <title>AJAX Login</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Received a login response //@param JSON json_resp //Implement handling of response here var login_response = function(json_resp){ //Decode the JSON response var response = $.parseJSON(json_resp); //You now have an accessible 'response' object //@see http://api.jquery.com/jQuery.parseJSON/ alert("Username: " + response.username + "\nPassword: " + response.password + "\nRand: " + response.rand); }; $("#ajax-login").submit(function(e){ //Stop the form submitting e.preventDefault(); //Keep code size down a bit by using this variable var fields = $(this).find("input"); //Stop blank submissions for (var i=0; i<fields.length; i++){ if (!$(fields[i]).val()){ alert("The " + $(fields[i]).attr("name") + " field cannot be left blank"); return; } } //Send the post request $.post( 'ajax-example.php', $(this).serialize() + "&rand=" + Math.floor(Math.random() * 10000), login_response ); }); }); </script> </head> <body> <form id="ajax-login" action="" method="post"> <input type="text" name="username" /><br /> <input type="password" name="password" /><br /> <input type="submit" value="Login" /> </form> </body> </html>
February 9, 201214 yr Hmmmm... I'd hazard a guess that it might actually be the HTML of the form or the actual page it's on, not the jQuery. All the code you posted should work fine in any browser. If it's just IE that's causing the trouble then it's probably an issue with validation or scripts being in the wrong place. Have you got a link for the site it's on? Edited February 9, 201214 yr by Spitfire
February 9, 201214 yr Author The full page is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Administração do site</title> <!-- CSS --> <!-- Reset Stylesheet --> <link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" /> <!-- Main Stylesheet --> <link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" /> <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid --> <link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" /> <link rel='stylesheet' href='resources/css/bar_style.css' type="text/css" media="screen"/> <!-- Javascripts --> <!-- jQuery --> <script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script> <!-- jQuery Configuration --> <script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script> <!-- Facebox jQuery Plugin --> <script type="text/javascript" src="resources/scripts/facebox.js"></script> <!-- jQuery WYSIWYG Plugin --> <script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script> <script src="resources/scripts/jquery.js" type="text/javascript" language="javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> // Developed by Roshan Bhattarai // Visit http://roshanbh.com.np for this script and more. // This notice MUST stay intact for legal use $(document).ready(function(){ $("#login_form").submit(function(){ //remove all the class add the messagebox classes and start fading $("#msgbox").removeClass().addClass('messagebox').text('A Autenticar...').fadeIn(1000); //check the username exists or not from ajax $.post("ajax_login.php",{ username:$('#username').attr("value"),password:$('#password').attr("value"),rand:Math.random() } ,function(data){ alert("User: "+$('#username').attr("value")+" password: "+$('#password').attr("value")); if(data == 'yes'){ //if correct login detail $("#msgbox").fadeTo(200,0.1,function(){ //start fading the messagebox $(this).html('A Carregar...').addClass('messageboxok').fadeTo(900,1, function(){ //redirect to secure page document.location='panel/index.php'; }); }); } else { $("#msgbox").fadeTo(200,0.1,function(){ //start fading the messagebox $(this).html('Username ou Password incorrecta!').addClass('messageboxerror').fadeTo(900,1); $(".button").fadeIn("fast"); $(".meter").hide(); }); } alert(data); }); return false; //not to post the form physically }); //now call the ajax also focus move from $("#password").blur(function() { $("#login_form").trigger('submit'); return false; }); $("#login_form").submit(function() { $(".meter").show(); $(".button").fadeOut("fast"); $(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); }); return false; }); $(".meter").hide(); return false; }); </script> <?php if(isset($_POST["float_username"]) && isset($_POST["float_password"])){ ?> <script type="text/javascript"> $(document).ready(function(){ $("#login_form").trigger('submit'); return false; }); </script> <?php } ?> </head> <body id="login"> <div id="header"></div> <div id="login-wrapper" class="png_bg"> <div id="login-top"> <img id="logo" src="resources/images/dinamiccms.png" alt="Simpla Admin logo" /> </div> <div id="login-content"> <form method="post" action="ajax_login.php" id="login_form"> <p> <label></label> <input name="username" type="text" id="username" value="<?php if(isset($_POST["float_username"])){ print $_POST["float_username"]; } else { print "Username"; }?>" maxlength="20" onFocus="if(this.value==this.defaultValue){this.value='';}" onBlur="if(this.value==''){this.value=this.defaultValue;}"/> </p> <div class="clear"></div> <p> <label></label> <input name="password" type="text" id="password" value="<?php if(isset($_POST["float_password"])){ print $_POST["float_password"]; } else { print "Password"; }?>" maxlength="20" onFocus="if(this.value==this.defaultValue){this.value=''; this.type='password';}" onBlur="if(this.value==''){this.value=this.defaultValue;}"/> <a href="panel/pass_recovery.php">Esqueceu a sua password?</a> </p> <div class="clear"></div> <input class="button" type="submit" value="Entrar" /> <div class="blue meter animate"> <span style="width: 100%"></span> </div> <p> <div id="msgbox" style="display:none; text-align:center;"></div> </p> </form> </div> <!-- End #login-content --> </div> <!-- End #login-wrapper --> </body> </html> It worked flawlessly in another page that is exactly the same except for the loading bar. Forgot to mention, that php "if post'username' and password are set trigger submit" There is a small login form in the index page so the user can login through there too and to avoid having the same form with the jQuery twice I decided to make it post the data to this form, and this form then posts the data to ajax_login.php, and this way it works on IE! so I have no idea what's up, I set the value"" property with php if the login form in the index was the one to post the data Edited February 9, 201214 yr by Script©
Create an account or sign in to comment