We help IT Professionals succeed at work.

Add row control values to JS confirmation

Daniel Pineault
Daniel Pineault asked
on
12 Comments
1 Solution
87 Views
Last Modified: 2018-10-11
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

View Solution Only

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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.
CERTIFIED EXPERT
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
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
how many button do you have on the page? if only one, how do you know what row to delete?
Daniel PineaultPresident / Owner CARDA Consultants Inc.
CERTIFIED EXPERT
Distinguished Expert 2018

Author

Commented:
There's one per row.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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

Author

Commented:
It's there in the 1st <td></td>
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

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.
CERTIFIED EXPERT
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
CERTIFIED EXPERT
Distinguished Expert 2019

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.
CERTIFIED EXPERT
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
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Daniel PineaultPresident / Owner CARDA Consultants Inc.
CERTIFIED EXPERT
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.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions