简体   繁体   中英

Jquery shoutbox IE error

Hey I have some jquery/ajax code for a shoutbox and the problem I am having is that in IE when I had the form tags around the input message and submit button in the html code, upon pressing the enter key in the message box it was reloading the page, this was not occuring in other browsers, so I removed the form because it was not needed, and the enter key is now submitting the message in IE but not in chrome or firefox. Is there a way I can have both an onclick event and enter event together to correct this? at the moment once the button is clicked the button is disabled for 2 seconds and then renabled, I need this to also happen if the enter button is pressed.

I know I have a lot of inline css for the shoutout box but its just a testing version at the moment, I will tidy that up once its completed.

Any help is much appreciated.

I had the form tag like so 
<form method="POST" action=""/>

    <div id="shoutout" style="position:absolute; height:auto; overflow-x:hidden; overflow-y:hidden; float:right; right:10px; background-color:#121212; color:#FFFFFF; font-size:14px; width:305px; padding-left:1px; padding-right:1px; padding-bottom:1px; font-family: Arial, Helvetica, sans-serif;">
         <h2>Shout Out!</h2>                
                <strong>Message:</strong>
                <input type="text" id="message" name="message"/>
                <input type="submit" id="submit" value="Submit"/>
        <div id="messagecontainer" style="position:relative; height:240px; overflow-x:hidden; overflow-y:auto; background-color:#F5F5F5; color: #F6221D; font-size:12px; width:305px; margin-top:5px;">
        <div id="shoutmessages" style="position:relative; word-wrap: break-word; padding-left:5px; width:auto; height:auto; overflow-y:hidden; overflow-x:hidden;"> 
        </div>
        </div>
        </div>

//JQUERY AJAX CODE BELOW

<script type="text/javascript">
$(function(){

refresh_shoutbox();
setInterval("refresh_shoutbox()", 10000);

var running = false;

$("#message").keypress(function(e){ 
    if (e.which == 13 && running === true){ 
        return false; 
    } 
}); 

 $("#submit").click(function(){
    if ($("#message").val() != ''){
        running = true;
        $("#submit").attr("disabled","disabled");
        setTimeout(function(){  
        $("#submit").removeAttr("disabled")
        running = false;
        }, 2000);
        }else{                  
        return false;
        }

     var name = $("#name").val();
     var message = $("#message").val();
     var data = 'name=' + name + '&message=' + message;

    $.ajax({
        type: "POST",
        url: "shout.php",
        data: data,
        success: function(html){
            $("#shoutmessages").slideToggle(0, function(){
            $(this).html(html).slideToggle(0);
            $("#message").val("");
            });
        }
    });    
    return false;       
});
});

function refresh_shoutbox(){
    var data = 'refresh=1';
    $.ajax({
        type: "POST",
        url: "shout.php",
        data: data,
        success: function(html){
        $("#shoutmessages").html(html);
    }
    });
}

Since all this is done via AJAX anyway, you may find it easier just to not include the <form> element at all.

That way, you avoid all of the annoying browser-specific behaviors that occur with form elements in a <form> - like automatically submitting forms if a <button> is pressed.

You said when you removed it in the other browsers, the enter key didn't work- did you receive any errors from the Chrome or Safari JS debug console, for example?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM