从输入按钮阻止表单提交

i have a live chat messaging system whenever user press enter button it refreshes the page i have tried using prevent default code also but did not worked for me.... here is the code and if there is any problem in the below code please let me know as i'm totally new to website programming

我有一个实时聊天消息系统,每当用户按下输入按钮它刷新我尝试使用的页面也防止默认代码但也没有为我工作....这里是代码,如果下面的代码有任何问题请让我知道,因为我对网站编程完全陌生

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();
            }
        });
    }); 
});

Edited part

<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>

3 个解决方案

#1

if you want to prevent from submitting the form you can use return false if you want to stop executing the function and stop submitting it

如果你想阻止提交表单,你可以使用return false,如果你想停止执行该功能并停止提交它

#2

You need to use preventDefault in order to stop form submission on clicking enter because by default form gets submitted when anyone presses enter. So use preventDefault like this:

您需要使用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>

#3

Here You should not stop form default action you to prevent enter key default answer here is the code to prevent.

这里你不应该停止表单默认操作你要防止输入键默认答案这里是防止的代码。

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

#1