0

I have a php code that reiterates a list from a database. Each list has the same elements with just different contents. Each list has an edit,cancel,and save button, as well as read-only input fields displaying value fetched from the database. Clicking on the edit button hides it, and reveals the cancel and save button, and makes the input fields write-able. Clicking on the cancel or save button reverts this. The save button submits the form data for processing.

Now, when I click on an edit button from any list, it just affects the input fields and the buttons on the first list. How can I map the buttons to the input fields in the same list. I tried so many methods but nothing just works.

HTML block:

<ul class="productList" name="prodUl">

<?php

    $sql = "SELECT img,name,price,qty,code,details,prod_id FROM products WHERE seller_id='".$acctID."'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
      // output data of each row
      while($row = $result->fetch_assoc()) {
?>

            <li name="prodLi">
                    
                <a href="SellerPage.php?code=<?php echo $row["code"]; ?>" onclick="return confirm('This item will be deleted permanently')">Remove Item</a>
                <?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['img'] ).'" id="productImg">'; ?>
                <form method="post" action="sProdImgProcess.php" enctype="multipart/form-data" name="sProdImg">
                <input type="file" accept="image/*" name="pProfPic" id="pImg"  />
                <input type="hidden" name="prodID2" value="<?php echo $row['prod_id']; ?>">
                <button type="submit" class="pImgUpld" name="pImgUpld" id="upldAcctB2">Upload</button>
                </form>
                <form method="post" action="sellerProdProcess.php" enctype="multipart/form-data" name="sProdForm">
                <input type="hidden" name="prodID" value="<?php echo $row['prod_id']; ?>">
                <div class="productDiv1">
                    <div class="productDiv2">
                        <input type="text" value="<?php echo $row['name'];?>" name="pname" readonly>
                        <br>
                        <input type="number" step=".01" value="<?php echo $row['price']; ?>" name="pprice" class="price" readonly>
                        <br>
                        <input type="number" value="<?php echo $row['qty'];?>" name="pqty" readonly>
                    </div>
                </div>
                <input type="text" value="<?php echo $row['details'];?>" name="pdetails" id="<?php echo $row['prod_id']; ?>" class="details"  size="50" readonly>
                <button type="submit" class="prodSave" name="pSubmit">Save</button>
                <button class="prodCancel" name="pCncl">Cancel</button>
                <button class="prodEdit" name="pEdt">Edit</button>
                </form>
            </li>
            <?php
                }
                }

                $conn->close(); 
            ?>
        </ul>

Javascript block:

<script>
(function(W) {
  var D, form, formImg2, prodUl, bts, ipt;

  function init() {
    D = W.document, previous = [];
    form = D.getElementsByName('sProdForm')[0];
    formImg2 = D.getElementsByName('sProdImg')[0];
    prodUl = D.getElementsByName('prodUl');
    bts = prodUl[0].getElementsByTagName('button');
    ipt = prodUl[0].getElementsByTagName('input');
    form.addEventListener('submit', save, false);
    for (var i = 0; i < bts.length; i += 4) {
      bts[i + 2].addEventListener('click', cancel, false);
      bts[i + 3].addEventListener('click', edit, false);
    }
  }

  function save() {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    var l = ipt.length;
    while (l--) {
      ipt[l].readOnly = true;
    };
    previous = [];
    //send your info here 
  }

  function edit(e) {
    e.preventDefault();
    form.classList.add('invert');
    formImg2.classList.add('invert');
    var l = ipt.length;
    while (l--) {
      previous[l] = ipt[l].value;
      ipt[l].readOnly = false;
    }
  }

  function cancel(e) {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    e.preventDefault();
    var l = ipt.length;
    while (l--) {
      ipt[l].value = previous[l];
      ipt[l].readOnly = true;
    }
  }
  W.addEventListener('load', init, false);
})(window)
</script>

CSS block:

button.prodSave {
  display: none;
}

button.prodCancel {
  display: none;
}

button.prodEdit {
  display: inline-block;
}

form.invert>button.prodSave {
  display: inline-block;
}

form.invert>button.prodCancel {
  display: inline-block;
}

form.invert>button.prodEdit {
  display: none;
}

#pImg {
  display: none;
}

#upldAcctB2 {
  display: none;
}

form.invert>#pImg {
  display: inline-block;
}

form.invert>#upldAcctB2 {
  display: inline-block;
}
dashingdove
  • 304
  • 1
  • 4
  • 15
Gavin Tarrega
  • 39
  • 2
  • **Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) – Dharman Aug 04 '20 at 13:18

2 Answers2

0

You may need to add a unique id for each li element, then using that id to scope the buttons and inputs.

Max Peng
  • 2,879
  • 1
  • 26
  • 43
0

You have multiple forms with the same name but your init function only gets the first form:

form = D.getElementsByName('sProdForm')[0];

You may want to change this to loop through each of the forms, e.g.:

forms = D.getElementsByName('sProdForm');
for (var i = 0; i < forms.length; i++) {
    var form = forms[i]
    //your code here
}
dashingdove
  • 304
  • 1
  • 4
  • 15