javascript - Not getting the proper form value using jquery -
i have 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 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 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 delete button clicked , form being posted. following js code 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 sure want 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 problem facing whenever second item clicked form id working fine , item indeed getting deleted, when first item clicked , form id wrong. happening first item (its not getting deleted) every other item working fine.
when click second item see (and correct values)
however when click first item see
in second case, formid wrong. can please let me know doing wrong ?
thanks
first things first : not nest forms (as explained in detail here : can nest html forms?).
fix this, , should go.
Comments
Post a Comment