1

I have one row that has input fields as the td. One of the columns has a button for deleting the row and after the table, there is a button for adding another row. When the user adds a row, the new row's delete button is somehow acting as the form submit button... Why?

Table Code:

<?php
$conn = new mysqli(LOLLY);
$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>
<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>
<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>
<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>

Bulk.js:


/*==================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>
<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='t` + ((tr.lenght) + 1).toString() + `' required>
<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='s` + ((tr.lenght) + 1).toString() + `' required>
<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</button></td>`;
/*==================Delete Rows======================*/


$('.del').click(function(e){
   $(this).closest('tr').remove()
})

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

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

Note: This Uses JQuery!

Please let me know what I am doing wrong and how to fix it!

Thanks!

P.S. How do I make the same select options come in the new rows?

0 Answers0