未單擊按鈕時顯示工具提示

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>