Add row control values to JS confirmation

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.
LVL 13
Daniel PineaultPresident / Owner CARDA Consultants Inc.Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
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.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.
leakim971PluritechnicianCommented:
how many button do you have on the page? if only one, how do you know what row to delete?
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
Daniel PineaultPresident / Owner CARDA Consultants Inc.Author Commented:
There's one per row.
leakim971PluritechnicianCommented:
ok, thank you.
so why don't we see it in your original post ?
Daniel PineaultPresident / Owner CARDA Consultants Inc.Author Commented:
It's there in the 1st <td></td>
leakim971PluritechnicianCommented:
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.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.
leakim971PluritechnicianCommented:
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.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?
leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Daniel PineaultPresident / Owner CARDA Consultants Inc.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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.