Powered by WHUK®

Announcement

Collapse
No announcement yet.

Need jQuery Help

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need jQuery Help

    How can I eliminate the form action and display an alert when submit button is clicked with HTML?

    HTML Code:
    <div id="booking-widget-content">
        <form class="iForm" action="https://www.the-domain.com/properties" method="get">
    
            <button type="submit" id="submit-button">Check Status</button>
        </form>
    </div>

  • #2
    What is the criteria for eliminating the form action?

    Comment


    • #3
      Using JavaScript

      "onclick" is the event in JavaScript will be is executed when the submit button is clicked


      HTML Code:
      <div id="booking-widget-content">
              <form class="iForm" action="" method="get">
                     <button type="submit" id="submit-button" onclick="alert('Success')">Check Status</button>
               </form>
      </div>
      Using Jquery

      HTML Code:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script>
      $(document).ready(function(){
        $("#submit-button").click(function(){
          alert("Success");
          return false;
      });
      });
      </script>
      return false will stop the page from being redirected after alert.

      Comment


      • #4
        Try this:

        HTML Code:
        $('.iForm').removeAttr('action').on('submit', function(e){
          e.preventDefault();
          alert('form submitted');
          // rest of the code
        });

        Comment


        • #5
          return false will avoid default behavior of submit button and stops the event bubbling up through the DOM.

          HTML Code:
          $('#submit-button').click(function(){
          
           alert('Submit button clicked!');
           return false;
          
          });

          return false does combined work of
          • event.preventDefault();
          • event.stopPropogation();

          Comment


          • #6
            Try to change the button type to “button” instead of using “submit”. It will submit the form when button click event is fired.

            HTML Code:
            <div id="booking-widget-content">
                  <form class="iForm" action="" method="get">
                     <button type="button" id="submit-button">Check Status</button>
                  </form>
            </div>
            
            $('#submit-button').click(function(){
            alert('Show Alert Message');
            });

            Comment

            Working...
            X