如果表格为空,则阻止模式启动

时间:2016-03-29 15:33:47

标签: jquery forms modal-dialog submit required

我在html的页脚中有一个表单,指向form.php,它将字段信息传递到电子邮件中。

Link to page(并滚动到底部)

我还提交了一个感谢模式,提交后会将提交延迟5秒(允许用户阅读感谢模式)。

问题在于,如果用户将字段留空并按下提交按钮,模式仍会显示,我想避免这种情况。

如果字段为空但我没有工作,我试图禁用该按钮。

表单代码

            <form method="post" action="form.php" class="form-horizontal" id="footer-contact-form">

                <fieldset>

                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-12">
                  <input id="name" name="name" type="text" placeholder="Full Name" class="form-control input-md" required>

                  </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-12">
                  <input id="email" name="email" type="text" placeholder="Email Address" class="form-control input-md" required>

                  </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-12">
                  <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md" required>

                  </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                  <div class="col-md-12">                     
                    <textarea class="form-control" id="message" type="text" name="message" required placeholder="Message"></textarea>
                  </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                  <div class="col-md-12">
                    <button id="Send-footer" type="submit" name="Send" class="btn btn-default btn-footer" data-toggle="modal" data-target="#thanks">Send</button>
                  </div>
                </div>

                </fieldset>
                </form>

脚本延迟提交

<script type="text/javascript">
$('#footer-contact-form').submit(function (e) {
    var form = this;
    e.preventDefault();
    setTimeout(function () {
        form.submit();
    }, 5000); // in milliseconds
});

脚本我试图禁用提交按钮(目前这对我不起作用,按钮永远不会再启用)

 <script>
$(document).ready(function (){
    validate();
    $('#name, #email, #subject, #message').change(validate);
});

function validate(){
    if ($('#name').val().length   >   0   &&
        $('#email').val().length  >   0   &&
        $('#subject').val().length  >   0   &&
        $('#message').val().length    >   0) {
        $("#Send-footer").prop("disabled", false);
    }
    else {
        $("#Send-footer]").prop("disabled", true);
    }
}

任何帮助都将受到高度赞赏。

2 个答案:

答案 0 :(得分:0)

也许试试这个?我不确定是否在没有“()”的情况下调用validate函数,因此我想象在document.ready上调用的validate是唯一被调用的时候。

  dummy_Var = struct_B_pointer[7].member_B1;

  struct_A_pointer[0].member_A1 = dummy_Var;

答案 1 :(得分:0)

实际上这个脚本适用于禁用提交按钮

 <script>
$('#Send-footer').attr('disabled', true);
$('input:text').keyup(function () {
    var disable = false;
       $('input:text').each(function(){
            if($(this).val()==""){
                 disable = true;                
            }
       });
  $('#Send-footer').prop('disabled', disable);
});