提交此表单后,如何弹出消息?

时间:2014-12-01 14:43:29

标签: javascript html

我需要弹出一条消息告诉用户他们的查询已经提交。验证工作,但我必须删除旧的弹出消息,因为它与验证代码冲突。我需要知道将弹出消息代码放在我用于验证的现有javascript代码中的哪个位置。我用来制作弹出消息的代码是:

<script>
function EnquireButton() {
   alert("Thank you for your enquiry!");
}
</script> 

我确信它很简单,我已经尝试将其实现到验证代码中,但它只是重新加载页面而不显示弹出窗口。

HTML:

    <form name="Contact_Us_Form" method="post" action="">
        <table width="450px">
            <p>One time Message</p>
            <tr>
                <td valign="top">
                <label for="full_name">Full Name *</label>
            </td>
            <td valign="top">
                <input  type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
                </td>
            </tr>

            <tr>
                <td valign="top">
                <label for="landline">Landline Number *</label>
            </td>
            <td valign="top">
                <input  type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
            </td>
            </tr>
            <tr>
             <td valign="top">
                <label for="Email">Email Adress *</label>
            </td>
            <td valign="top">
                <input  type="text" name="email" maxlength="80" size="30" placeholder="you@yourdomain.com" title="Your email" required/>
            </td>

            </tr>
            <tr>
            <td valign="top">
                <label for="house_number">House Number *</label>
             </td>
             <td valign="top">
                <input  type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
            </td>
            </tr>
            <tr>
                <td>
                    <label for="postal_code">Post Code *</label>
                </td>
                <td>
                <input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
            </td>
            </tr>
            <tr>
            <td valign="top">
                <label for="">Enquiry</label>
            </td>
            <td valign="top">
                <textarea  name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
            </td>
            </tr>
            <tr>
            <td colspan="2" style="text-align:center">
            <button onclick="Enquirebutton()">Enquire</button>
    <script>
    $(document).ready(function (){
    validate();
    $('#full_name, #landline, #Email').change(validate);
});

function validate(){
    if ($('#full_name').val().length   >   0   &&
        $('#landline').val().length  >   0   &&
        $('#Email').val().length    >   0) {
        $("input[type=Enquirebutton()]").prop("disabled", false);
    }
    else {
        $("input[type=Enquirebutton()]").prop("disabled", true);
    }   
}
</script>
    </td>
    </tr>
    </table>
    </form>

2 个答案:

答案 0 :(得分:3)

只需添加一个属性即可形成标签onsubmit =&#34; EnquireButton()&#34;

<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">

答案 1 :(得分:2)

首先,将您的按钮设为提交:

<button type="submit">Enquire</button>

然后,您可以使用提交按钮中的onclick="Enquirebutton()"或表单中的onsubmit="Enquirebutton()"

请查看onsubmit Event了解详情。