HTML javascript onclick event not working on input type submit

Question

function myAlert(){
	alert("yo");
}



/* Recalculate cart */
function recalculateCart()
{
    var subtotal = 0;
  
    /* Sum up row totals */
    $('.product').each(function () {
        subtotal += parseFloat($(this).children('.product-line-price').text());
     });
  
   /* Calculate totals */
  
}


/* Update quantity */
function updateQuantity(quantityInput)
{
    /* Calculate line price */
    var productRow = $(quantityInput).parent().parent();
    var price = productRow.children('.product-price').text();
    var quantity = $(quantityInput).val();
    var linePrice = price * quantity;
  
    /* Update line price display and recalc cart totals */
    productRow.children('.product-line-price').each(function () {
        $(this).fadeOut(fadeTime, function() {
            $(this).text(linePrice.toFixed(2));
            recalculateCart();
            $(this).fadeIn(fadeTime);
        });
    });  
}


/* Remove item from cart */
function myFunction(removeButton)
{
  /* Remove row from DOM and recalc cart total */
    var productRow = $(removeButton).parent().parent();
    productRow.slideUp(fadeTime, function() {
       productRow.remove();
       recalculateCart();
    });
  return true;
}

<?php
session_start();
mysql_connect('localhost','root','');
mysql_select_db('ecommerce');

	 if(isset($_SESSION['username'])){
	
	?>
<div class="shopping-cart">
    <div class="column-labels">
        <label class="product-image">Image</label>
        <label class="product-details">Product</label>
        <label class="product-price">Price</label>
        <label class="product-quantity">Quantity</label>
        <label class="product-removal">Remove</label>
        <label class="product-line-price">Total</label>
    </div>
<?php
$query = mysql_query("SELECT * FROM cart");
    while($array=mysql_fetch_assoc($query)){
	    $dbtitle = $array['name'];
	    $dbprice = $array['price'];
	    $dbdescription = $array['description'];
     	    $dbproductid = $array['product_code'];

            echo $dbproductid;
?>
  <div class="product">
      <div class="product-image">
      </div>
      <div class="product-details">
          <div class="product-title"><?php echo $dbtitle; ?></div>
              <p class="product-description"><?php echo $dbdescription; ?></p>
         </div>
         <div class="product-price"><?php echo $dbprice; ?></div>
         <div class="product-quantity">
             <input id="quantity-option" type="number" value="2" min="1">
         </div>
   
         <form action="cart.php" method="post">
             <input type="submit" onclick="myFunction(this)" class="remove-product" name="delete" value="Remove">
             <input type="hidden" name="remove_item" value="<?php echo $dbproductid;  ?>">
        </form>
        <div  id="js-price" class="product-line-price"></div>
    </div>
<?php
}

?>

When I press submit nothing happen, but when I press onclick alert() function alert box will appear. Please help me out. The post juz updated help me to check what's the error. Your help will be much appreciate.

Answer 1

Why don't you use jquery for the function

$("#btn").click(function(e){
/* Remove item from cart */
e.preventDefault();
  /* Remove row from DOM and recalc cart total */
  var productRow = $("#btn").parent().parent();
  productRow.slideUp(fadeTime, function() {
    productRow.remove();
    recalculateCart();
  });
  return true;
});

Your HTML :-

<form action="cart.php" method="post">
      <input type="submit" id="btn" class="remove-product" name="delete" value="Remove">
        <input type="hidden" name="remove_item" value="<?php echo $dbproductid;  ?>">
    </form>

Answer 2

You do not pass the removeButton argument to myFunction(). Try:

<input type="submit" onclick="myFunction(this)" class="remove-product" name="delete" value="Remove">