Skip to content
Advertisement

Using PHP echoed options in JavaScript generated select options

WHAT AM I DOING?

I am making a transaction keeping application that has an option to bulk add transactions. It is a form which has a table inside. Each row of the table stands for one transaction with each cell having an input field. There is an option to remove a row and one to add a row.

Problems

I have two problems:

  1. When adding a row, how do I take original options for the select and then add them to the new selects.
  2. When deleting a row, shift all of the other input’s name attribute 1 down.

Code

Code Tried For The First Problem So Far 

<!-- HTML START -->

<?php
$conn = new mysqli('localhost', 'admin', 'myphpadmin', 'tests');
$merch = $conn->query("Select Name From options Where `Type` = 'Merchant'");
$type = $conn->query("Select Name From options Where `Type` = 'Type'");
$source = $conn->query("Select Name From options Where `Type` = 'Source'")
?>


<!DOCTYPE html>
<html>
<head>
<title>Add In Bulk</title>
<link rel='stylesheet' href='styles.css' type='text/css'>
<style>
td{width: calc(100% / 6);
overflow-x: hidden}
</style>
</head>
<body>
<h1>Add In Bulk</h1>
<form action='bulk.php' method='post'>
<table>
<tr>
<th>Description</th>
<th>Date</th>
<th>Amount</th>
<th>Merchant</th>
<th>Type</th>
<th>Source</th>
<th>Delete</th>
</tr>
<tr>
<td><input type='text' name='des1' required></td>
<td><input type='data' name='d1' required></td>
<td><input type='number' step='0.01' min='0' name='a1' required></td>
<td><select name='m1' required id='m'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($merch)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><select name='t1' required id='t'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($type)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><select name='s1' required id='s'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($source)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><button class='del'>Delete</td></tr>
</table>
</form>
<button id='add'>Add</button>
<script src='....jquery.js'></script>
<script src='bulk.js'>
</script>
</body>
</html>

<!-- HTML END -->

<!-- BULK.js START -->

/*==================Get The Option Values======================*/

var merchants = []
var type = []
var source = []

$("#m option").each(function() {merchants.push(this.value);});
$("#s option").each(function() {source.push(this.value);});
$("#t option").each(function() {type.push(this.value);});


/*==================ForEach Function======================*/

function addoptions(item){return "<option value='" + item + "'>" + item + "</option>";}

/*==================Declare Variables======================*/

var table = document.getElementsByTagName('table');
var tr = document.getElementsByTagName('tr');
var fun = `
<tr>
<td><input type='text' name='des` + ((tr.lenght) + 1).toString() + `' required></td>
<td><input type='data' name='d` + ((tr.lenght) + 1).toString() + `' required></td>
<td><input type='number' step='0.01' min='0' name='a` + ((tr.lenght) + 1).toString() + `1' required></td>
<td><select name='m` + ((tr.lenght) + 1).toString() + `' required id='m'>
<option value='' disable selected>Select One</option>` + merchants.forEach(addoptions); + `
</select>
</td>

<td><select name='t` + ((tr.lenght) + 1).toString() + `' required id='t'>
<option value='' disable selected>Select One</option>` + type.forEach(addoptions); + `
</select>
</td>

<td><select name='s` + ((tr.lenght) + 1).toString() + `' required id='s'>
<option value='' disable selected>Select One</option>` + source.forEach(addoptions); + `
</select>
</td>
<td><button class='del'>Delete</button></td>`;

/*==================Delete Rows======================*/


$(document).on("click", ".del" , function(){
   $(this).closest('tr').remove();
/*if(tr.lenght == 0){table.remove;}  Why Does This Not Work? */
})

/*==============Add Rows==========================*/

//Adding Rows
$('#add').click(function(e){
$(table).push(fun)})

<!-- BULK.js END -->

Second Problem

I have no idea where to begin!

Notes

JQuery Version: 3.5.1

PHP: Working – Confirmed

Getting Option Values: Working – Confirmed (Using console.log())

Any Questions For Me?

Thanks and I hope what I have provided is enough!

Advertisement

Answer

That is a nice job for jQuery .clone().

So basically, on page load, you “clone” the row and store it in a variable… Then on #add click, clone that again to append it to the table.

I made a rowNum function to loop all row and number them. Call that function on add and on delete.

Obviously, the PHP lines do not work here. 😉

/* Delete Rows */
$(document).on("click", ".del", function() {
  $(this).closest('tr').remove();
  rowNum();
})

// Keeping a clone safe (before any changes)
let rowClone = $(".clonable").clone();

/* Add Rows */
$('#add').click(function(e) {
  $("table").append(rowClone.clone().removeClass("clonable"));
  rowNum();
})

/* Row numbering */
function rowNum() {
  $("table tbody tr").each(function(index, row) {

    // Inputs
    $(row).find("input").eq(0).attr("name", "des" + (index + 1));
    $(row).find("input").eq(1).attr("name", "d" + (index + 1));
    $(row).find("input").eq(2).attr("name", "a" + (index + 1));

    // Selects
    $(row).find("select").eq(0).attr("name", "m" + (index + 1));
    $(row).find("select").eq(1).attr("name", "t" + (index + 1));
    $(row).find("select").eq(2).attr("name", "s" + (index + 1));
  })
}
form {
  margin-top: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Add In Bulk</h1>
<button id="add">Add a row</button>

<form action='bulk.php' method='post'>
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Merchant</th>
        <th>Type</th>
        <th>Source</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clonable">
        <td><input type='text' name='des1' required></td>
        <td><input type='data' name='d1' required></td>
        <td><input type='number' step='0.01' min='0' name='a1' required></td>
        <td>
          <select name='m1' required id='m'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($merch)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='t1' required id='t'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($type)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='s1' required id='s'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($source)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td><button class='del'>Delete</td>
    </tr>
    </tbody>
  </table>
</form>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement