How to prevent the submit button in the related row in a table from working?-CodePudding

I have a table that contains certain data. This data is dynamic and fetched from the database. I want to prevent the button from working if there is no relevant data (long straight line — ) in a column of this table. That is, the post(submit) operation should not occur.

Why do I want this? If there is no long straight line ( — ), then there is data here. Therefore, the relevant submit button should not work again. I wrote the following code to accomplish this. However, this is not working. Actually, I'm accessing the data but not deactivating the button.

<?php 
//$args = array(1,2,3,4...); 
$args = array(1,2,3); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>Column 1</tr>
            <tr>Column 2</tr>
            <tr>Column 3</tr>
        </thead>
        <tbody>
        <?php foreach ($args as $key => $value) { ?>
            <tr>
                <td>A</td>
                <td><span > <?php echo !empty($value) ? $value:' — '; ?></span></td> 
                    <form action="" method="post">
                        <td>
                            <input type="hidden" name="id">
                            <button type="submit" ></button>
                            <button type="submit" ></button>
                            <button type="submit" ></button>
                        </td>
                    </form>
                <script type="text/javascript"> 
                jQuery(".create-1").submit(function(e){
                    jQuery(function() {
                        jQuery("span.related").each(function(index, element) {
                            if(jQuery(this).text() !== ' — '){
                                e.preventDefault();
                            }
                        });
                    });
                });
                </script>
            </tr>
        <?php }?>
        </tbody>
    </table>
</body>
</html>

CodePudding user response：

Try this, I've moved the form to inside the TD as it's invalid inside the TR as mentioned by brombeer. Also I've changed the code to find the closest TR then locate .related text.

<?php
$args = array(1, 2, 3);
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Document</title>
</head>

<body>
  <table>
    <thead>
      <tr>Column 1</tr>
      <tr>Column 2</tr>
      <tr>Column 3</tr>
    </thead>
    <tbody>
      <?php foreach ($args as $key => $value) { ?>
        <tr>
          <td>A</td>
          <td>
            <span >
              <?php
              echo !empty($value) ? $value : ' — ';
              ?>
            </span>
          </td>
          <td>
            <form action="" method="post" >
              <input type="hidden" name="id">
              <button type="submit" ></button>
              <button type="submit" ></button>
              <button type="submit" ></button>
            </form>
          </td>
        </tr>
      <?php } ?>
    </tbody>
  </table>
  <script type="text/javascript">
    jQuery(".create button").click(function(e) {
      var form = jQuery(this);
      e.preventDefault();
      if (form.closest("tr").find("span.related").text() !== ' — ') {
        return false;
      }else{
        $(this).closest("form").submit();
      }
    });
  </script>
</body>

</html>