Question

I need to select previous control, at the click on a input box, say user clicks a input box, a, txtInputB I need value of txtInputA and so on..

The hard part is that previous input can be anyone, it could be in previous div or a table or a updatePanel or anything? I tried all of these but none of them worked..

$(event.target).prev('input')

$(event.target).prevUntil('input')

$(event.target).prevAll('input')

$(event.target).parent().find('input')

$(event.target).parent().prev('input')

They work for one condition, say for one textbox, but not for the other. I also found this

jquery get previous input text

but the difference btw that question and mine is, that the location/position of textbox is known beforehand, but in my case, I don’t wheather it would be in div or whatever. I just know the very first textbox before this one, may it be anywhere in page So, how do I get that?

UPATE
As I said, there’s a hack loads of code and the input can be anywhere in the page, but still I am pasting a bit of code..

                                                <div id="UpdatePanel12">

                                                        <input name="txtDueDate" type="text" value="10 Oct 2012" maxlength="11" id="txtDueDate" Border-Style="Solid" style="font-size:12px;width:80px;" />


        </div>
                                            </td>
        <td class="TableData" style="width: 35px;">
                                                Time
                                            </td>
        <td style="width: 50;">
                                                <input name="txtTime" type="text" value="1 AM" maxlength="10" id="txtTime" Border-Style="Solid" style="font-size:12px;width:49px;" />

                                            </td>
        <td class="TableData">
                                                <div>
                                                    <span id="lblCustomer">
                                                        Customer
                                                    </span>
                                                </div>
                                            </td>
        <td>
                                                <table >
                                                    <tr >
                                                        <td >
                                                            <div id="UpdatePanel3">

                                                                    <input name="txtCustomerName" type="text" maxlength="300" id="txtCustomerName" Border-Style="Solid" onfocus="javascript:select();" style="font-size:12px;" />



        </div>
                                                        </td>

                                                        <td>
                                                            <div id="UpdatePanel1">


                                                                    <div id="CustPanal1" class="popupMenu" style="height:50px;width:100px;">

                                                                        <table style="font-size: smaller; color: Black">
                                                                            <tr>
                                                                                <td align="left" style="color: Black">
                                                                                    Add new customer.
                                                                                </td>
                                                                            </tr>
                                                                        </table>

            </div>
                                                                    <input type="submit" name="imgBtnCustomerAdd" value="Add" onclick="ShowAddCustomer();" id="imgBtnCustomerAdd" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;border-radius: 7px; display: none;" />
                                                                    </td>

        </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
        <td>
                                                <span><input type="image" name="imgBtnCustAdd" id="imgBtnCustAdd" src="../images/icons.png" alt="Add customer" style="border-width:0px;" /></span></td>
    </tr>
</table>

                                    <table id="tblEntry1" width="100%">
    <tr>
        <td colspan="10">
                                                <div id="UpdatePanel2">

                                                        <table class="TableData">
                                                            <tr>
                                                                <td>
                                                                    Address :
                                                                </td>
                                                                <td id="td1" style="width: 475px" nowrap="nowrap">
                                                                    <span id="lblAddress" class="LabelBkgScrn" style="display:inline-block;font-weight:bold;width:250px;"></span>
                                                                </td>


                                                                <td>
                                                                    Priority :
                                                                </td>
                                                                <td id="td2" style="width: 260px" nowrap="nowrap">
                                                                    <span id="lblPriority" class="LabelBkgScrn" style="display:inline-block;font-weight:bold;width:60px;"></span>
                                                                </td>


                                                                <td style="width: 160px" nowrap="nowrap">
                                                                    <span><input id="chkToday" type="checkbox" name="chkToday" /><label for="chkToday">    Same Day</label></span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    Remarks :
                                                                </td>
                                                                <td style="width: 470px" nowrap="nowrap">
                                                                    <span id="lblRemarks" class="LabelBkgScrn" style="display:inline-block;font-weight:bold;width:160px;"></span>
                                                                </td>


                                                                    <td>
                                                                Mob. No. :
                                                                </td>
                                                                <td style="width: 250px" nowrap="nowrap">
                                                                    <span id="lblMobileNo" class="LabelBkgScrn" style="display:inline-block;font-weight:bold;width:160px;"></span>
                                                                </td>

                                                                <td style="width: 160px" nowrap="nowrap">
                                                                    <span><input id="chkNextDay" type="checkbox" name="chkNextDay" /><label for="chkNextDay">     Next Day</label></span>
                                                                </td>                                                                
                                                        </tr>
                                                        </table>

        </div>
                                            </td>
    </tr>
</table>

                                    <table id="tblEntry2" width="100%">
    <tr>
        <td colspan="15">
                                                <table style="width: 100%">
                                                    <tr>
                                                        <td>
                                                            <div id="pnlEntry" style="height:200px;overflow-y:scroll;">

                                                                <div>
                <table class="mGridEntry" cellspacing="0" cellpadding="4" rules="all" border="1" id="grdEntry" style="border-collapse:collapse;">
                    <tr style="color:White;font-size:Small;">
                        <th scope="col">
                                                                                <table>
                                                                                    <tr class="mGridCustomHeader">
                                                                                        <td style="color: orange; border-width: 0px">
                                                                                            S.No.
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td style="border-width: 0px">
                                                                                            <span id="grdEntry_ctl01_lblHSNo" style="color:Black;">1</span>
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>
                                                                            </th><th scope="col">
                                                                                <table>
                                                                                    <tr>
                                                                                        <td style="color: Orange; border-width: 0px" class="mGridCustomHeader">
                                                                                            Qty
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td style="border-width: 0px">
                                                                                            <input name="grdEntry$ctl01$txtQty" type="text" value="1" maxlength="4" id="txtQty" Border-Style="Solid" style="font-size:12px;width:25px;" />

                                                                                        </td>

Answer 1

What you need to do is to create a list of all inputs on your page, when it loads.

var list = $("input").toArray();

Then you can just find your input

var youtInput = $("...").get(0);
var previous = list[list.indexOf(yourInput) - 1];

That should do the trick.