troubleshooting Question

Add row control values to JS confirmation

Avatar of Daniel Pineault
Daniel Pineault asked on
JavaScriptjQuery
12 Comments1 Solution92 ViewsLast Modified:
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>     
             

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.
ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Join our community to see this answer!
Unlock 1 Answer and 12 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros