Question

我想在用户在提交表单时没有点击特定按钮时显示工具提示。我阻止表单提交，我只想显示工具提示，说“你应该先点击按钮”。提前谢谢。

<form id="signUpForm">
    <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
    <input type="hidden" id="hidden" value="0">
    <input type="submit" id="btn-submit" value="submit">
</form>

<script>
    $('#signUpForm').submit(function(e) {
        if ($('#hidden').val() == '0') {
            e.preventDefault();
            //show the tooltip that "you first click the agree button" and fadeOut(1000)
        }
    });
</script>

Answer 1

试试这个，将按钮类型设为按钮而不是提交：

<form id="signUpForm" >
 <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7" >I Agree</button>
 <input type="hidden" id="hidden" value="0">
 <input type="button" id="btn-submit" value="submit">
</form>

 <script>
 $('#btn-submit').click(function(e){
   if($('#hidden').val()=='0'){

   }
   else {
      $('#signUpForm').submit();
   }
 });
 </script>

Answer 2

检查下面的脚本，它将有助于您显示工具提示。

<script>
    $(".tooltip").hide();
    $('#signUpForm').submit(function (e) {
        if ($('#hidden').val() == '0') {
            e.preventDefault();
            //show the tooltip that "you first click the agree button" and    fadeOut(1000)
            $("#signUpForm").find(".tooltip").stop().fadeIn();
            setTimeout(function () {
                $("#signUpForm").find(".tooltip").stop().fadeOut();
            }, 1000);
        }
    });
</script>

HTML部分

<form id="signUpForm">
    <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
    <input type="hidden" id="hidden" value="0">
    <input type="submit" id="btn-submit" value="submit">
    <div class="tooltip">
        you first click the agree button
    </div>
</form>

未单击按钮时显示工具提示

2 个答案: