How to make a setTimeout script work properly with an html form?

This is the script:

<script src="http://ift.tt/1qRgvOJ"></script>
    <script>
                function addedCart() {
      document.getElementById("msgs-box").innerHTML = "Item added successfully to cart";
      setTimeout(function() {
        $('#msgs-box').html('');
      }, 6000);
    }
               </script>

The form:

<form action="addToCart" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input class="submit" onclick="addedCart()" value="<fmt:message key='AddToCart'/>" type="submit">
</form>

The issue:

When I put type="submit" and click on "addToCart", 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.

On the other hand, When I put type="button" and click on "addToCart", the script is fire, the message displays and the script is playing the time right but the values aren't sent to the cart.jsp.

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.