asked on
Add row control values to JS confirmation
I have a table structure which has rows setup like:
each row has a delete button that calls
and I'd like to make the confirmation message more explicit so as to include the LegNo value and LocOrigin value.
If it helps, I can easily add a hidden input with the row number, something like:
I don't quite get the e, item in the function call and thought the solution would lie there, but couldn't get anything to work.
Can anyone show me how this can be done. Please note that I am completely new to JS/jQuery.
Thank you.
<tr>
<td style="width: 25px;">
<!-- <button type="button" class="del-load btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> -->
<button type="button" class="remove-leg btn btn-danger btn-xs table-control"><i class="glyphicon glyphicon-minus"></i></button>
<input id="projectslegs-1-legid" class="table-control" name="ProjectsLegs[1][LegId]" value="41214" type="hidden"><a class="btn btn-info btn-xs" href="index.php?r=projects/gen-trip-sheet&legId=41214" title="Generate the Trip Sheet 41214" target="_blank"><i class="glyphicon glyphicon-file"></i></a> </td>
<td style="width: 65px;">
<div class="table-control field-projectslegs-1-legno"><input id="projectslegs-1-legno" class="form-control" name="ProjectsLegs[1][LegNo]" value="2" type="text"><div class="help-block"></div></div> </td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-locorigin has-success"><input id="projectslegs-1-locorigin" class="form-control" name="ProjectsLegs[1][LocOrigin]" value="ID" aria-invalid="false" type="text"><div class="help-block"></div></div> </td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-locdest"><input id="projectslegs-1-locdest" class="form-control" name="ProjectsLegs[1][LocDest]" value="ID" type="text"><div class="help-block"></div></div> </td>
<td style="width: 280px;">
<div class="col-md-12" style="vertical-align: top; float: left;">
<div class="col-md-8">
<div class="table-control field-projectslegs-1-startdt"><input id="projectslegs-1-startdt" class="form-control" name="ProjectsLegs[1][StartDt]" type="text"><div class="help-block"></div></div> </div>
<div class="col-md-4" style="vertical-align: top; float: left; margin-left: 0px;">
<div class="table-control field-projectslegs-1-startdttzoneid"><select id="projectslegs-1-startdttzoneid" class="form-control" name="ProjectsLegs[1][StartDtTZoneId]">
<option value=""></option>
</select><div class="help-block"></div></div> </div>
</div>
</td>
<td style="width: 280px; clear: both;">
<div class="col-md-12" style="vertical-align: top; float: left;">
<div class="col-md-8">
<div class=" field-projectslegs-1-enddt"><input id="projectslegs-1-enddt" class="form-control" name="ProjectsLegs[1][EndDt]" type="text"><div class="help-block"></div></div> </div>
<div class="col-md-4" style="vertical-align: top; float: left; margin-left: 0px;">
<div class="table-control field-projectslegs-1-enddttzoneid"><select id="projectslegs-1-enddttzoneid" class="form-control" name="ProjectsLegs[1][EndDtTZoneId]">
<option value=""></option>
</select><div class="help-block"></div></div> </div>
</div>
</td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-servtypeid"><select id="projectslegs-1-servtypeid" class="form-control" name="ProjectsLegs[1][ServTypeId]">
<option value="">Select a Service...</option>
</select><div class="help-block"></div></div> </td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-empid"><select id="projectslegs-1-empid" class="form-control" name="ProjectsLegs[1][EmpId]">
<option value="">Select an Employee...</option>
</select><div class="help-block"></div></div> </td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-emprate"><input id="projectslegs-1-emprate" class="form-control" name="ProjectsLegs[1][EmpRate]" type="text"><div class="help-block"></div></div> </td>
<td style="width: 180px;">
<div class="table-control field-projectslegs-1-dispatcherid"><select id="projectslegs-1-dispatcherid" class="form-control" name="ProjectsLegs[1][DispatcherId]">
<option value="">Select a Dispatcher...</option>
</select><div class="help-block"></div></div> </td>
<td>
<div class="table-control field-projectslegs-1-empinvrcvd"><input name="ProjectsLegs[1][EmpInvRcvd]" value="0" type="hidden"><input id="projectslegs-1-empinvrcvd" class="col-md-12 center-block" name="ProjectsLegs[1][EmpInvRcvd]" value="1" type="checkbox"><div class="help-block"></div></div> </td>
</tr>
each row has a delete button that calls
$(".projectlegs").on("beforeDelete", function(e, item) {
if (! confirm("Are you sure you want to delete this item?")) {
return false;
}
return true;
});
and I'd like to make the confirmation message more explicit so as to include the LegNo value and LocOrigin value.
If it helps, I can easily add a hidden input with the row number, something like:
<input class=".rowSeqNo" name="rowSeqNo" value="0" type="hidden">
I don't quite get the e, item in the function call and thought the solution would lie there, but couldn't get anything to work.
Can anyone show me how this can be done. Please note that I am completely new to JS/jQuery.
Thank you.
JavaScriptjQuery
Last Comment
Daniel Pineault
ASKER
<button type="button" class="remove-leg btn btn-danger btn-xs table-control"><i class="glyphicon glyphicon-minus"></i></but
performs the deletion.
This is all based off of https://github.com/wbraganca/yii2-dynamicform. I'm simply wanting to make it more informative as it can be easy to press the wrong deletion button in a listing and end up accidently deleting the wrong row.
performs the deletion.
This is all based off of https://github.com/wbraganca/yii2-dynamicform. I'm simply wanting to make it more informative as it can be easy to press the wrong deletion button in a listing and end up accidently deleting the wrong row.
how many button do you have on the page? if only one, how do you know what row to delete?
ASKER
There's one per row.
ok, thank you.
so why don't we see it in your original post ?
so why don't we see it in your original post ?
ASKER
It's there in the 1st <td></td>
ok so you have this code using the class : projectlegs
but your button don't have this class, how the code is executed?
but your button don't have this class, how the code is executed?
ASKER
Not 100% sure, as I'm simply using a widget created by someone else, I haven't dissected it (nor do I have the expertise to do so). All I know is that I can use
to provide a custom prompt to the user (this works). The question being how can I extract the value of individual controls from the e or item in the function or some other variable that I'm not aware of. item.innerhtml seems to return the <tr></tr> content for the clicked row (so the html I originally supplied), but from that, how can I extract the value of the LocOring control.
I've tried things like
but I don't seem to be able to get the element I'm after.
$(".projectlegs").on("beforeDelete", function(e, item) {
to provide a custom prompt to the user (this works). The question being how can I extract the value of individual controls from the e or item in the function or some other variable that I'm not aware of. item.innerhtml seems to return the <tr></tr> content for the clicked row (so the html I originally supplied), but from that, how can I extract the value of the LocOring control.
I've tried things like
item.innerHTML.getElementByName('rowSeqNo').value
...getElementsByClassName
but I don't seem to be able to get the element I'm after.
what do you get in the alert with this :
$(".projectlegs").on("beforeDelete", function(e, item) {
var ProjectsLegs = $(":hidden[name^='ProjectsLegs']", item);
alert(ProjectsLegs.val());
ASKER
41214 which represents the PK value for the leg.
Now with your code I was able to write the following, but is it the best way to do this?
I've also found, thanks to your code, that the following seems to works as well
Is one method more efficient than the other?
Now with your code I was able to write the following, but is it the best way to do this?
var i = $(":hidden[name^='rowSeqNo']", item).val(); //Get the number of the row selected for deletion to be able to build the other control name from
var LocOrigin = document.getElementById('projectslegs-'+i+'-locorigin').value;
alert(LocOrigin); // returns correctly the value of the LocOrigin input for the row selected for deletion
I've also found, thanks to your code, that the following seems to works as well
var i = $(":hidden[name^='rowSeqNo']", item).val();
var LocOrigin = $(":input[id^='projectslegs-"+i+"-locorigin']", item).val();
alert(LocOrigin);
Is one method more efficient than the other?
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you for all your help!
Could you explain the difference between
[name^='ProjectsLegs'] and [name$='[LocOrigin]'
more importantly would you happen to know of the proper term to search for or resource that covers this so I can learn this aspect of JS properly.
Also, I see you are search on the name attribute, is there a reason not to do so based on the id, class, ...? Is name the preferred approach?
Thank you once again.
Could you explain the difference between
[name^='ProjectsLegs'] and [name$='[LocOrigin]'
more importantly would you happen to know of the proper term to search for or resource that covers this so I can learn this aspect of JS properly.
Also, I see you are search on the name attribute, is there a reason not to do so based on the id, class, ...? Is name the preferred approach?
Thank you once again.
First, you post a row in your first code snippet but I don't see any delete button in that row