HTML onclick function doesn't work

Question

I am wondering why my onclick function doesn't work in this particular case. My function is a pretty straightforward alert:

function confirmEditProduct(editProductID){
      alert("Worked");
  }

This is my HTML code echoed in PHP:

    echo "
      <img src='$directory/$productImage' width='200px;'></img><br><br>
      <p>Product Name: <p><input type='text' id='editName' name='editName' style='width:400px;' value='$productName'/>
      <p>Category:
          <select class='form-control' id='editCat' style='width:200px;' disabled>
            <option value='Cacti'"; if ($productCategory == '1') echo " selected='selected'"; echo ">Cacti</option>
            <option value='Succulents'"; if ($productCategory == '2') echo " selected='selected'"; echo ">Succulents</option>
          </select>

      <p>Description: <p><textarea rows='4' cols='50' id='editDesc' name='editDesc'>$productDesc</textarea>
      <p>Price: <input type='text' id='editPrice' name='editPrice' value='$productPrice'/>
      <p>Image: <input class='input-group' type='file' id='editImage' name='editImage' accept='image/*' />
      <p>Stock: <input type='text' id='editStock' name='editStock' value='$productStock'/>
      <p>
      <input type='button' class='btn btn-success' id='$productID' onClick='confirmEditProduct($productID);' value='Edit Product' />


  ";

This snippet is part of a modal btw.

Thank you to everyone who can help me out

do you have any errors in the developer tools console? if $productID is not a numeric value, then you need to put quotes around it — Jaromanda X
– Jaromanda X, Commented Dec 5, 2016 at 0:06
i think i should mention that this code results to a generation of a couple of modals which contains the edit product button. — Lewey Jimoya
– Lewey Jimoya, Commented Dec 5, 2016 at 0:06

arbybruce · Accepted Answer · 2016-12-05 00:11:25Z

2

This seems like it would be quite simple. Are you also echoing the Javascript? If so, take an extra precaution and move it before the HTML code. Some other things you may want to consider include making the input button into a straight up button and omitting the semicolon at the end of the onclick attribute. As for styling, you may want to put the value attribute after the type attribute. Hope this helps!

Edit: When I mean echoing the Javascript, make sure you have a <script src="main.js"> or the entire script within your echoed code.

edited Dec 5, 2016 at 0:11

answered Dec 5, 2016 at 0:09

arbybruce

1981 silver badge11 bronze badges

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

7 Comments

Lewey Jimoya Over a year ago

What does it mean to "take an extra precaution and move it before the HTML code"? Yes I am also echoing the javascript. If there's a better way to do it please let me know :)

arbybruce Over a year ago

My personal preference is to use a <button type="button">, if it's not nested within a form, and you want to use inline JS. I am not sure if this makes a difference...

Lewey Jimoya Over a year ago

I have new info: on the console there is an error that says: VM4004 admin.php:1 Uncaught ReferenceError: confirmEditProduct is not defined at HTMLInputElement.onclick

arbybruce Over a year ago

As others said too, your function should be global, not nested within another function. Try this code:

<button type='button' class='btn btn-success' id='$productID' onclick='confirmEditProduct($productID);' >Edit Product</button>

arbybruce Over a year ago

You may want to put the function within the echoed text in the echoed text,

echo " <script> function confirmEditProduct(editProductID){       alert("Worked");   } </script> ...       <input type='button' class='btn btn-success' id='$productID' onClick='confirmEditProduct($productID);' value='Edit Product' />  ";

|

Collectives™ on Stack Overflow

HTML onclick function doesn't work

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related