I hope someone will help me with this. I have a problem of not showing my modal when I click edit in my crud table. Here is my code to my table, I hope everyone will help me with this. Thank you in advance. :)
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row["brand_name"]; ?></td>
<td><?php echo $row["brand_status"]; ?></td>
<td>
<a href="brand.php?edit=<?php echo $row["brand_id"]; ?>">
<button type="button" data-toggle="modal" data-target="#modal-default" class="btn btn-success"><i class="fa fa-edit"></i> Edit</button>
</a>
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<?php } ?>
This is also the code of my modal. I think there is no error in this code. Because there is no unnecessary output in this. I hope someone will really help me with this. Thank you.
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<form action="server.php" method="POST">
<input type="hidden" name="brand_id" value="<?php echo $brand_id; ?>"/>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add a brand</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="brand_name">Brand Name</label>
<input type="text" class="form-control" name="brand_name" value="<?php echo $brand_name; ?>" placeholder="Brand Name"/>
</div>
<?php if ($edit_state == false): ?>
<div class="form-group">
<label for="brand_status">Status</label>
<select class="form-control select2" style="width: 100%;" name="brand_status">
<option>Available</option>
<option>Not Available</option>
</select>
</div>
<?php else: ?>
<div class="form-group">
<label for="brand_status">Status</label>
<select class="form-control select2" style="width: 100%;" name="brand_status">
<option><?php echo $brand_status; ?></option>
</select>
</div>
<?php endif ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<?php if ($edit_state == false): ?>
<button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button>
<?php else: ?>
<button type="submit" class="btn btn-primary" name="btn_update">Update</button>
<?php endif ?>
</div>
</form>
</div>
</div>
</div>
First of all your html markup is wrong, you cant have button as a descendant of the a element.
You need to have one element button or anchor tag.
The best way would to use the anchor tag then use jquery to open modal when the link is clicked.
Create a dynamic id for the button then use jquery to find out which of the button was clicked.
This is how you can approach this:
<?php while ($row = mysqli_fetch_array($results))
$brand_status = $row['brand_status'];
$brand_name = $row['brand_name'];
$brand_id = $row['brand_id'];
{ ?>
<tr>
<td><?php echo $brand_name; ?></td>
<td><?php echo $brand_status; ?></td>
<td>
<a href="#" data-brand="<?=$brand_name?>" data-status="<?=$brand_status?>" class="btn btn-success" id="brand_<?=$brand_id?>"><i class="fa fa-edit"></i> Edit </a>
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<?php } ?>
Then your modal
div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<form action="server.php" method="POST">
<input type="hidden" name="brand_id">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add a brand</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="brand_name">Brand Name</label>
<input type="text" class="form-control" name="brand_name" placeholder="Brand Name"/>
</div>
<?php if ($edit_state == false): ?>
<div class="form-group">
<label for="brand_status">Status</label>
<select class="form-control select2" style="width: 100%;" name="brand_status">
<option>Available</option>
<option>Not Available</option>
</select>
</div>
<?php else: ?>
<div class="form-group">
<label for="brand_status">Status</label>
<select class="form-control select2" style="width: 100%;" name="brand_status">
<option><?php echo $brand_status; ?></option>
</select>
</div>
<?php endif ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<?php if ($edit_state == false): ?>
<button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button>
<?php else: ?>
<button type="submit" class="btn btn-primary" name="btn_update">Update</button>
<?php endif ?>
</div>
</form>
</div>
</div>
</div>
I'm not quite sure what does the $edit_state does? Also it would be better to use jquery to do that control statement.
Then your jquery :
<script type="text/javascript">
$('document').ready(function(){
$('[id^="brand_"]').on('click',function(){
var index = $(this).attr('id').split("_")[1]; // brand ID
var brandname = $(this).data('brand'); // get the click brandname
var status = $(this).data('status'); // get the status of the clicked brand
$('#modal-default').modal('toggle'); // open modal
$('input[type="hidden"][name="brand_id"]').val(index); // assign the id to the input field
$('input[type="text"][name="brand_name"]').val(brandname);
});
});
</script>
That is how far I can go with the current info you have.