Problems with HTML in IE

Question

I wrote html login code as follwing

<div id="wrapper"> <div id="page"> <div class="aLogin"> <label>User Name : </label> <input type="text" class="lname" /> <label>Password : </label> <input type="password" class="lpwd" /> <input type="submit" class="logSubmit" value="LOGIN" /> <p class="lalert">test alert</p> </div> </div> 

and wrote jQuery for validation. It will replace the warning (here I used <p class="lalert">test alert</p> ) dynamically.
The problem is that when I run this in IE, a warning was issued twice. But in other browsers there are no problems.

jQuery

 $(document).ready(function(){ $('.logSubmit').click(function(){ var name = $('.lname').val(); var pwd = $('.lpwd').val(); $.post("/login.php",{name:name,pwd:pwd}).success(function(data){ var obj = jQuery.parseJSON(data); $('.lalert').fadeIn('slow'); if(obj.success == 1){ $('.lalert').css('color','#067800'); $('.lname').val(''); $('.pwd').val(''); $('.lalert').html(obj.msg); }else{ $('.lalert').css('color','#CC0000'); $('.lalert').html(obj.msg); } }); }); }); 

login.php

  <?php $name = $_POST['name']; $pwd = $_POST['pwd']; $err['success'] = 0; $err['msg'] = ''; if($name != 'admin'){ $err['msg'] = 'Invalid Name'; }else if($pwd != 'admin'){ $err['msg'] = 'Invalid Password'; }else{ $err['success'] = 1; $err['msg'] = 'Success'; } echo json_encode($err); ?> 

I can’t understand why this is happening. Can someone help me ..?

Answer 1

Finally, I got a solution. The problem is due to the Node Blank Text . IE8 generates blank Node text for line breaks after the <input>,<select>,<img> tags.

I removed these spaces after the tags and now the problem is resolved.

Answer 2

Hi. You forgot to write "return false".

 $('.logSubmit').click(function(){ var name = $('.lname').val(); var pwd = $('.lpwd').val(); $.post("/login.php",{name:name,pwd:pwd}).success(function(data){ var obj = jQuery.parseJSON(data); $('.lalert').fadeIn('slow'); if(obj.success == 1){ $('.lalert').css('color','#067800'); $('.lname').val(''); $('.pwd').val(''); $('.lalert').html(obj.msg); }else{ $('.lalert').css('color','#CC0000'); $('.lalert').html(obj.msg); } }); return false; }); 

Answer 3

try using instead of $('.logSubmit').click(function(){ ...}

use the syntax below

 $('.logSubmit').unbind('click').click(function(){ .....} 

this can solve the problem.

Answer 4

Try adding return false; into your .logSubmit -click-linker. In addition, you can try replacing the input with the <→ button since the views are related to forms (submission), and this is not the case in your situation.