title: How to make a setTimeout script work properly with an html form?
body: <p>This is the script:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
                  function addedCart() {
        document.getElementById("msgs-box").innerHTML = "Item added successfully to cart";
        setTimeout(function() {
          $('#msgs-box').html('');
        }, 6000);
      }
                 &lt;/script&gt;
  </code></pre>
  
  <p>The form:</p>
  
  <pre><code>&lt;form action="addToCart" method="post"&gt;
  &lt;input name="productId" value="${product.id}" type="hidden"&gt;
  &lt;input class="submit" onclick="addedCart()" value="&lt;fmt:message key='AddToCart'/&gt;" type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The issue:</p>
  
  <p>When I put <code>type="submit"</code> and click on <code>"addToCart"</code>, the script is fired and the message displays but the time isn't working. Whether I put 3 secs (3000) or 30 secs (30 000) as time value, the script will not play the time right. The message will just appear and disappear.</p>
  
  <p>On the other hand, When I put <code>type="button"</code> and click on <code>"addToCart"</code>, the script is fire, the message displays and the script is playing the time right <strong>but</strong> the values aren't sent to the <code>cart.jsp</code>.</p>
  
  <p>How can I solve this issue? I need to send the values to the cart and I need the script to work and play the time right.</p>
  
  <h1>Edit --- The New Code With Ajax</h1>
  
  <pre><code>    var $msgBox = $('#msgs-box');
  
  function addedCart() {
  
      event.preventDefault(); // Prevent default Form Submit Action
  
      $msgBox.html("Item added successfully to cart");
      setTimeout(function() {
          $msgBox.html('');
      }, 6000);
  
      $.ajax({
         url : 'cart.jsp',
         data: $("#cartForm").serialize(), // (tip: assign and use an ID for your form)
         success: function( addedCart ) {
           alert( "Item added successfully to cart", addedCart);
         }
      });
  
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;form id="cartForm" action="addToCart" method="post"&gt;
                &lt;br&gt;
                &lt;br&gt;
  
                &lt;input name="productId" value="${product.id}" type="hidden"&gt;
                &lt;input class="submit" onclick="addedCart()" value="&lt;fmt:message key='AddToCart'/&gt;" type="submit"&gt;
  </code></pre>