Avatar of Daniel Pineault
Daniel Pineault
 asked on

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.
JavaScriptjQuery

Avatar of undefined
Last Comment
Daniel Pineault

8/22/2022 - Mon
leakim971

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 Pineault

ASKER
<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.
leakim971

how many button do you have on the page? if only one, how do you know what row to delete?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Daniel Pineault

ASKER
There's one per row.
leakim971

ok, thank you.
so why don't we see it in your original post ?
Daniel Pineault

ASKER
It's there in the 1st <td></td>
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
leakim971

ok so you have this code using the class : projectlegs
but your button don't have this class, how the code is executed?
Daniel Pineault

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

$(".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.
leakim971

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Daniel Pineault

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?

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?
ASKER CERTIFIED SOLUTION
leakim971

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.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Daniel Pineault

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.