Откройте диалоговое окно успешности начальной загрузки на кнопке отправки нажмите

Question

В качестве фиктивного уведомления, я хочу, чтобы диалоговое окно успеха появилось при нажатии кнопки кнопки отправки. Я использовал скрипт, найденный здесь на SO, но по какой-то причине он все еще не работает. Я уже пробовал объявить скрипт как function myFunction() и назвал его в action="myFunction(), но он все еще не работал.

Мой HTML:

<!-- HTML of contact form --> 

    <section id="contact"> 
     <div class="inner"> 
      <h2>Drop me a line. <i class="title_line"></i> </h2> 
      <p class="lead"> Don't hesitate to send me an email.<br> 
      I’d love to hear from you! </p> 
      <div class="row"> 
      <div class="col1"> 
       <form name="htmlform" method="post" action="" dir="ltr" lang="en" class=""> 
       <label>Name<span class="required">*</span></label> 
       <input type="text" name="first_name" placeholder="Your Name" required> 
       <label>Email<span class="required">*</span></label> 
       <input type="email" name="email" placeholder="E-Mail" required> 
       <label>Message<span class="required">*</span></label> 
       <textarea name="comments" cols="1" rows="5" placeholder="Tell me everything" required></textarea> 
       <button name="send" id="emailsend" type="submit" lang="en" class="submit">Send</button> 
       </form> 

        <div id="le-alert" class="alert alert-success fade"> 
        <button href="#" type="button" class="close">&times;</button> 
        <h4>Alert title</h4> 
        <p>Roses are red, violets are blue...</p> 
        </div> 
      </div> 
      <div class="col2"> 
       <h4>Meet Me</h4> 
       <br> 
       <p>1234 SE 42nd St.</p> 
       <p>Mercer Island, WA </p> 
       <p>USA </p> 
       <h4>My Email</h4> 
       <br> 
       <p><a href="mailto:vik.yaban@gmail.com">vik.yaban@gmail.com</a></p> 
       <h4>Employement</h4> 
       <br> 
       <p><a href="#">vik.yaban@gmail.com</a></p> 
      </div> 
      </div> 
     </div> 

     <div id="success-alert" class="alert alert-success fade"> 
     <button class="close" type="button" data-dismiss="alert"></button> 
     <h4 class="alert-heading">Success!</h4> 
     <p>Email Sent!</p> 
    </div> 
     </section> 
    <!-- End Contact Form --> 

    <!-- Javascript to make the dialog --> 
     <script type="text/javascript">$('#emailsend').click(function() { 
     $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation 
    }); 

    $('.close').click(function() { 
     $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation 
    });</script> 
<!-- End Javascript --> 

Answer 1

вы можете попробовать ваш код JQuery в document.ready функции.

$(document).ready(function(){ 
    $('#emailsend').click(function() { 
     $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation 
    }); 

    $('.close').click(function() { 
     $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation 
    }); 

})