Question 232346 in PHP Question posted in
Official manual can be found here.

Php – Java script function not working on button click

I have searched the internet and tried many things but am stuck on a relatively simple problem.

The below code is the entire scope of my issue

<script>
//Function to eventually copy the entire row to another table
function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // Find the row
    var $text = $row.find('drawingnum').text(); // Find the text
                            
    // Let's test it out
    alert($text);
}
</script>
                
<?php
if (isset($_POST['cars']))
{
    $category = $_POST['cars'];
}
//connect               
$con = mysqli_connect('localhost', 'root', '','ironfabpricing');

// Check connection
if ($con->connect_error)
{
      die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT `DWG_NO`, `Description`, `Profile`, `Pieces`, `Length`, `Ib/ft`, `Observ`  FROM `$category`";
$result = $con->query($sql);

// setting up the table header
echo "<div class='tableWrap'><table class='styled-table'><thead><tr><th>Add</th><th>DWG_NO</th><th>Description</th><th>Profile</th><th>Pcs</th><th>Length</th><th>Ib_ft</th><th style=width:100%>Observation</th></tr></thead><tbody>";

// output the database results into a table that can be viewed                  
if ($result->num_rows > 0)
{
      // output data of each row
      while($row = $result->fetch_assoc())
          {
        echo "<tr><td>
        <button type='button' onclick='dosomethingcrazy(this)'>Try</button>
        </td><td>".$row["DWG_NO"]."</td><td>".$row["Description"]."</td>
                <td>".$row["Profile"]."</td>
                <td><textarea rows='1' cols='3' id='myTextarea' name='something'>0</textarea></td>
                <td>".$row["Length"]."</td>
                <td>".$row["Ib/ft"]."</td>
                <td>".$row["Observ"]."</td></tr>";
      }
} 

// a last line in the table that the user can fill out to enter another item in to the database                 
echo "<tr><form id='form1' action='insert.php' method='post'>
      <input type='hidden' id='greeting' name='test' value='$category'>
      <td><button type='button' onclick='dosomethingcrazy(this)'>Try</button></td>
      <td><input type='text' name='drawingnum' placeholder='Drawing #'></td>
      <td><input type='text' name='type' placeholder='Type' required></td>
      <td><input type='text' name='profile' placeholder='profile' required></td>
      <td><input type='number' min='0' name='pieces' placeholder='0'></td>
      <td><input type='number' min='0' name='length' placeholder='0' required></td>
      <td><input type='number' min='0' name='ibft' placeholder='0' required></td>
      <td><textarea class='description' oninput = 'auto_grow(this)' type='text' name='description' value='initiate-value'></textarea></td></form></tr>";
echo "</tbody></table></div>";
                    
$con->close();
?>

The more basic parts that I am having issues with is this function:

function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // Find the row
    var $text = $row.find('drawingnum').text(); // Find the text
                            
    // Let's test it out
    alert($text);
}

is not being called by this button

<button type='button' onclick='dosomethingcrazy(this)'>Try</button>

and for the life of me can not figure out why. I originally thought it was a scope issue but it should be within the scope. I have also tried multiple different ways of calling the function from the button. I appreciate any help that you folks can provide. I tried referencing the button by using a class name instead and have tried multiple ways of calling a function that have been posted here on this site as well.

Tags:

3

Answers


  1. 0

    Your problem is because one of these is not working:

    var $row = a.closest('tr');    // Find the row
var $text = $row.find('drawingnum').text(); // Find the text

    If you replace both of those lines with this:

    var $text = "test";

    And then do it again it would probably work right? If that happens it’s because at least one of those two lines have an issue.

    Login or Signup to reply.
  2. 0

    When working with jQuery you are searching for elements by writing CSS selectors.

    For example you have $row = a.closest('tr'); which will find the closest <tr> element to whatever element the a variable is referencing, and it looks to be a <button> element. Since a is just a raw element you will need to select it with jQuery to be able to use it with jQuery. $(a).closest('tr') will fix that.

    Next you have $row.find('drawingnum') which will look in that <tr> element for a <drawingnum> element. This is not a real element and it’s not in your HTML.

    I see you have this though:

    <input type='text' name='drawingnum' placeholder='Drawing #'>

    I assume you want to select this element. So you need to find an <input> with a specific attribute value. In CSS you would target this with the selector: input[name="drawingnum"] so that means you can do the same thing in jQuery.

    Here it all is together

    var $row = $(a).closest('tr');
var text = $row.find('input[name="drawingnum"]').text();
    Login or Signup to reply.
  3. 0

    You’re problems lie in your JavaScript function.

    You are mixing up PHP and JavaScript notation. To declaring variables in JavaScript does not require a ‘$’. You might see ‘$’ used in jQuery, but you haven’t mentioned that you are using it.

    If you aren’t then find() and text() aren’t methods and you should use .querySelector and .value instead.

    Also, I don’t think you’re going to be able to select your row by name without explicitly putting ‘[name="whatever"] in your query.

    This is a working version of your function.

      <script>
    function dosomethingcrazy(a)
    {
      // mixing up php and javascript notation. 
      // javascript doesn't use '$' for variables.
        console.log('hello');
        var row = a.closest('tr');    // Find the row
        // Are you using jquery? if you are you can use find, but if not, then use querySelector.
        // If you are not using a library then use .value to get the input value.
        var text = row.querySelector('[name="drawingnum"]').value; // Find the text

        // Let's test it out
        alert(text);
    }
  </script>

    Here’s a jsbin to a working demo.

    One piece of general advice is to use your console in dev tools. It should give you some hints on any JavaScript problems.

    One extra warning would be to make sure you give everything a unique id. You shouldn’t have duplicate ids on any elements on your page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search