从输入按钮阻止表单提交

时间:2015-10-29 10:01:36

标签: javascript ajax chat

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

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>

3 个答案:

答案 0 :(得分:0)

如果您想阻止提交表单,可以使用private static final int MODE_BUSISH = MODE_CABLE_CAR | MODE_BUS; ,如果您想停止执行该功能并停止提交

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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