表单的提交按钮不起作用。你能告诉我我在做什么错吗?

时间:2018-12-28 08:16:58

标签: javascript jquery html css ajax

<form id="contactForm" name="enquiryform" method="POST" action="enquirymail.php" class="contact-form">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
        <div class="help-block with-errors"></div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
        <div class="help-block with-errors"></div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
        <div class="help-block with-errors"></div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <textarea id="message" rows="7" placeholder="Massage" class="form-control" required data-error="Write your message"></textarea>
        <div class="help-block with-errors"></div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 text-center">
        <button type="submit" id="submit" class="contact-btn">Submit</button>
        <div id="msgSubmit" class="h3 text-center hidden"></div>
        <div class="clearfix"></div>
    </div>
</form>

这是我的脚本:----------------------------------------- -

< script >
    $(function() {

        $('#contactForm').on('#submit', function(e) {

            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'http://companyname.in/enquirymail.php',
                data: $('form').serialize(),
                success: function() {
                    alert('form was submitted');
                }
            });

        });

    }); < /script>

5 个答案:

答案 0 :(得分:4)

由于。submit()方法只是.on( "submit", handler )的简写,因此可以使用.off( "submit" )进行分离

$("#contactForm").submit(function(event) {
    event.preventDefault();

    $.ajax({
        type: 'post',
        url: 'http://companyname.in/enquirymail.php',
        data: $('form').serialize(),
        success: function() {
            alert('form was submitted');
        }
    });
});

答案 1 :(得分:2)

您在代码中使用#submit,这是submit方法所不允许的。 #用于访问元素的id属性并执行诸如click change之类的事件或其他事件以执行操作。

您必须直接使用submit来提交表单。希望这可以帮助您了解submit和'#submit`的实际作用。

< script > $(function() {

    $('#contactForm').on('submit', function(e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'http://companyname.in/enquirymail.php',
            data: $('form').serialize(),
            success: function() {
                alert('form was submitted');
            }
        });

    });

}); < /script>

尝试这个..

答案 2 :(得分:2)

您的问题出在.on()行:

$("#contactForm").on("#submit", function(e) {...}

您将#submit作为事件,它是无效的-它不存在。您想改用submit

$("#contactForm").on("submit", function(e) {...}

完整的JavaScript代码:

<script>
    $(function() {
        $('#contactForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: 'http://companyname.in/enquirymail.php',
                data: $('form').serialize(),
                success: function() {
                    alert('form was submitted');
                }
            });
        });
    }); 
</script>

答案 3 :(得分:1)

希望这个答案对您有帮助。

在监听事件时,我们只需要传递和事件名称,而不是传递#submit作为ID。您只需从第3行中删除#。

你做到了,

$("#contactForm").on("#submit", function(e) {/* do here*/}

但是应该是:

$("#contactForm").on("submit", function(e) {/*Write your own logic here*/}

答案 4 :(得分:1)

尝试这样

<script>$("#contactForm").on("submit", function(e) {...}