阻止表單提交進入輸入按鈕

Question

每當用戶按下Enter鍵時，我都會有一個實時聊天消息傳遞系統，它會刷新我嘗試使用的頁面，也使用了默認代碼，但對我沒有用....這是代碼，如果下面的代碼有任何問題，請讓我知道我是網站編程的新手

jQuery(document).ready(function() {
    jQuery('.btn-success').click(function() {
        var form_name  = jQuery(this).attr('title');
        var obj = jQuery(this);
        jQuery(".ajax_indi").show();
        switch (form_name) {
            case "npost":
            var message = jQuery("#message").val();
            break;
            default:
            alert("something went wrong!");
        }
        if((jQuery(message) == ''))
        {
           alert("Message Cannot be Empty");
           jQuery(".ajax_indi").hide();
           return false;
        } else {
        jQuery(this).attr("disabled", "disabled");
        jQuery(this).prop('value', 'Loading...');
        jQuery(this).css('cursor', 'default');
        }
        var str = jQuery("#"+form_name).serialize();
        jQuery.ajax({
            type: "POST",
            url: "chat.php",
            data: str,
            cache: false,
            success: function(html){
                jQuery('#chat1').append(html);
                obj.attr("disabled", false);
                obj.prop('value', 'Post');
                obj.css('cursor', 'pointer');
                jQuery(".ajax_indi").hide();
                document.getElementById(form_name).reset();
            }
        });
    }); 
});

編輯部分

<form id="npost"  name="npost">
    <input class="form-control" placeholder="Type your message here..." 
    type="text" name="message">
    <input type="hidden" name="id" value="1">
    <span class="input-group-btn">
        <button type="button" class="btn btn-success" title="npost" >Send</button>

Answer 1

如果要阻止提交表單，可以在return false執行該函數並停止提交該函數時使用return false

Answer 2

您需要使用preventDefault來停止單擊Enter時提交表單，因為默認情況下，當任何人按下Enter時都會提交表單。 所以像這樣使用preventDefault：

<script type="text/javascript" >
jQuery(document).ready(function(){

jQuery('.btn-success').click(function(e){         // added e
 e.preventDefault();                              // added this line
var form_name  = jQuery(this).attr('title');
var obj = jQuery(this);
jQuery(".ajax_indi").show();
var message = '';
        switch (form_name)
        {

        case "npost":
                var message = jQuery("#message").val();
        break;
        default:
        alert("something went wrong!");
        }

        if((jQuery(message) == ''))
        {
             alert("Message Cannot be Empty");
             jQuery(".ajax_indi").hide();
             return false;
        } else {
            jQuery(this).attr("disabled", "disabled");
            jQuery(this).prop('value', 'Loading...');
            jQuery(this).css('cursor', 'default');
        }

        var str = jQuery("#"+form_name).serialize();

        jQuery.ajax({
            type: "POST",
            url: "chat.php",
            data: str,
            cache: false,
            success: function(html){
                jQuery('#chat1').append(html);
                obj.attr("disabled", false);
                obj.prop('value', 'Post');
                obj.css('cursor', 'pointer');
                jQuery(".ajax_indi").hide();
                document.getElementById(form_name).reset();
            }
        });
           });

       });
   </script>

Answer 3

在這里，您不應停止要阻止輸入默認操作的默認操作，這里是要防止的代碼。

$('#npost').on('keyup keypress', function(e) {
   if (e.which== 13) { 
       e.preventDefault();
       return false;
   }
});