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.

If you could've just looked up at the console screen, you would've been able to find the error. — Akshay
– Akshay, Commented Oct 12, 2015 at 17:37
console screen by pressing F12 button there will be a screen appear and at the end of there will be a console tab. Click on console tab and see the error — innovative kundan
– innovative kundan, Commented Oct 12, 2015 at 17:44
well you are not passing any argument to the method myFunction() while you are using a parameter in the function. so pass this to the function. <input type="submit" onclick="myFunction(this)" class="remove-product" name="delete" value="Remove"> — innovative kundan
– innovative kundan, Commented Oct 12, 2015 at 17:46
yup i try myFunction(this) already the code juz return delete sucessful from the php code but the tab bar wont call the javascript function to fade away the cart bar — user3711175
– user3711175, Commented Oct 12, 2015 at 17:52

Alexandr Lazarev · Accepted Answer · 2015-10-12 17:38:36Z

4

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

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

edited Oct 12, 2015 at 17:38

answered Oct 12, 2015 at 17:34

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3711175 Over a year ago

erm the cart bar juz wont delete fade away but it return delete successful and when i check mysql database the data is sucesfully remove but i want the data to be able to remove and the same time the submit button also able to call the javascript remove fade away function effect

Alexandr Lazarev Over a year ago

Well, provide more code please then. From the snippet that you have shown in your post, it is impossible to figure out what the problem is. The only mistake was the absence of the argument.

user3711175 Over a year ago

to be noted lazarev when i run the myAlert() function it work the pop up box appear

Alexandr Lazarev Over a year ago

If i understood you correctly, you don't want the page to be reloaded after submitting data but you still want the animation to be shown and data to be saved?

user3711175 Over a year ago

actually to correct a little bit is data to be deleted not saved hahaha :)

|

Akshay · Accepted Answer · 2015-10-12 17:54:26Z

0

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>

answered Oct 12, 2015 at 17:54

Akshay

2,2393 gold badges17 silver badges35 bronze badges

1 Comment

user3711175 Over a year ago

bro it work but the php function return delete unsuccessful the value cant be deleted what is wrong then?

Collectives™ on Stack Overflow

HTML javascript onclick event not working on input type submit

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related