Add row control values to JS confirmation

Daniel Pineault
Daniel Pineault used Ask the Experts™
on
I have a table structure which has rows setup like:

<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&amp;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>     

Open in new window

             

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;
    });

Open in new window


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">

Open in new window


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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
each row has a delete button that calls

First, you post a row in your first code snippet but I don't see any delete button in that row
Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
<button type="button" class="remove-leg btn btn-danger btn-xs table-control"><i class="glyphicon glyphicon-minus"></i></button>

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.
leakim971Multitechnician
Top Expert 2014

Commented:
how many button do you have on the page? if only one, how do you know what row to delete?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
There's one per row.
leakim971Multitechnician
Top Expert 2014

Commented:
ok, thank you.
so why don't we see it in your original post ?
Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
It's there in the 1st <td></td>
leakim971Multitechnician
Top Expert 2014

Commented:
ok so you have this code using the class : projectlegs
but your button don't have this class, how the code is executed?
Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
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

$(".projectlegs").on("beforeDelete", function(e, item) {

Open in new window


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

Open in new window


...getElementsByClassName

Open in new window


but I don't seem to be able to get the element I'm after.
leakim971Multitechnician
Top Expert 2014

Commented:
what do you get in the alert with this :
$(".projectlegs").on("beforeDelete", function(e, item) {
var ProjectsLegs = $(":hidden[name^='ProjectsLegs']", item);
alert(ProjectsLegs.val());

Open in new window

Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
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?

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

Open in new window


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);

Open in new window


Is one method more efficient than the other?
Multitechnician
Top Expert 2014
Commented:
So I think you want this :
$(".projectlegs").on("beforeDelete", function(e, item) {
var LegNo = $("input[name$='[LegNo]']", item).val();
var LocOrigin = $("input[name$='[LocOrigin]']", item).val();
alert("LegNo : "+LegNo+"\nLocOrigin : "+LocOrigin);

Open in new window

Daniel PineaultPresident / Owner CARDA Consultants Inc.
Distinguished Expert 2018

Author

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial