Question

需要一些帮助......

我正在使用表单和脚本来显示警告......

我使用此代码来实现此目的并且工作正常：

        <input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>                              
        <input id="input_send" class="input_send" type="submit" name="send" value="SEND">

但如果我放了一些表单方法，我的脚本上的警报就不起作用..

    <form enctype="multipart/form-data" method="post">
        <input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>                              
        <input id="input_send" class="input_send" type="submit" name="send" value="SEND">
    </form>

这是我的剧本：

<div id="alertbox">
<script>
$(document).ready(function(){
    $('#input_send').click(function(){
        var post = $('#autocomplete').val();
        if(post==""){   
            alert('Enter Message Please');  
        }else{
        $('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle">&nbsp;<span class="loading">sending</span>');
        var datasend = "alert";
        $.ajax({
            type:'post',
            url:'./includes/alerts.php',
            data:datasend,
            cache:false,
            success:function(msg__){    
                $('#autocomplete').val('');
                $('#loader').hide();
                $('#alertbox').fadeIn('slow').prepend(msg__);
                $('#alerts').delay(5000).fadeOut('slow');   
            }
        });
        }
    })          
});
</script>
</div>

提前感谢..

Answer 1

提交按钮将表单发布到服务器，然后重新加载页面;

你可以添加return false;，在ajax函数之后，则不会发送到服务器

Answer 2

需要阻止表单提交

$(document).ready(function(){
    $('#input_send').click(function(e){
       e.preventDefault();//here
        var post = $('#autocomplete').val();
        if(post==""){   
            alert('Enter Message Please');  
        }else{
        $('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle">&nbsp;<span class="loading">sending</span>');
        var datasend = "alert";
        $.ajax({
            type:'post',
            url:'./includes/alerts.php',
            data:datasend,
            cache:false,
            success:function(msg__){    
                $('#autocomplete').val('');
                $('#loader').hide();
                $('#alertbox').fadeIn('slow').prepend(msg__);
                $('#alerts').delay(5000).fadeOut('slow');   
            }
        });
        }
    })          
});

或者将#input_send的类型从submit更改为button，以便不会触发表单提交

<input id="input_send" class="input_send" type="button" name="send" value="SEND">

表单操作和Javascript冲突

2 个答案: