I have the following html code
<form method="POST" action="http://localhost:8000/machines/11" accept-charset="UTF-8" role="form" id="formMachine" class="form-horizontal">
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#generalInfo"> <i class="fa fa-comment"></i> General Information</a></li>
<li class=""><a data-toggle="tab" href="#customMacros"><i class="fa fa-paperclip"></i> Custom Macros</a></li>
</ul>
<div class="tab-content">
<div id="generalInfo" class="tab-pane active">
<div class="panel-body" style="height:490px;">
<div class="form-group">
<label class="col-sm-2 control-label">Machine</label>
<div class="col-sm-10">
<input class="form-control" name="name" type="text" value="machine1">
</div>
</div>
</div>
</div>
</div>
<div id="customMacros" class="tab-pane">
<div class="panel-body">
<label>My Macros</label>
<div style="margin-top :20px;">
<table class="table table-striped">
<thead>
<tr>
<td><strong>MacroName</strong></td>
<td><strong>MacroValue</strong></td>
<td><strong>Description</strong></td>
<td><strong>Action</strong></td>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>testmacro</td>
<td>this is test maro</td>
<td>1</td>
<td>
<form action="http://localhost:8000/machines/macro/delete" class="form-horinzontal" id="deleteCustomMacroForm19" method="POST" >
<input type="hidden" name="customMacroID" value="19">
<input type="hidden" name="_token" value="Ikt1wt7grJskDVY652xYi61G89nyZKhcjMdMSGfG">
<input type="hidden" class="custommacroname" value="testmacro">
<a href="#" id="deleteCustomMacroButton19" class="btn btn-sm btn-white deleteButton"><i class="fa fa-close"></i></a>
</form>
</td>
</tr>
<tr>
<td>macro2</td>
<td>macro2</td>
<td>this is macro2</td>
<td>
<form action="http://localhost:8000/machines/macro/delete" class="form-horinzontal" id="deleteCustomMacroForm21" method="POST" >
<input type="hidden" name="customMacroID" value="21">
<input type="hidden" name="_token" value="Ikt1wt7grJskDVY652xYi61G89nyZKhcjMdMSGfG">
<input type="hidden" class="custommacroname" value="macro2">
<a href="#" id="deleteCustomMacroButton21" class="btn btn-sm btn-white deleteButton"><i class="fa fa-close"></i></a>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
When the delete button is clicked , the form is being posted. Following is the JS code that does that.
$('tbody').on('click', 'a.deleteButton', function(e) {
var buttonID = this.id;
console.log(buttonID);
var form = $(this).closest('form')[0];
console.log(form);
var formID = form.id;
console.log("Form ID : "+ formID)
var macroName = $(this).prev().val();
// delete machine record
var message = "Are you sure you want to delete <strong> " + macroName + " </strong> macro ?";
var params = {title:"Delete Macro ? ", text: message, type:"warning", showCancelButton:true, allowEscapeKey:true,allowOutsideClick:false,confirmButtonText:'Yes'};
submitAForm(buttonID,formID, params );
});
Problem The problem that I am facing is whenever the second item is clicked the form iD is working fine and the item is indeed getting deleted, but when the first item is clicked , the form id is all wrong. This is only happening with the first item (its not getting deleted) but for every other item its working fine.
When I click the second item this is what I see (and which are the correct values)
However when I click the first item this is what I see
In the second case, the FormID is all wrong. Can you please let me know what am I doing wrong ?
Thanks
