Question

192

jQuery closest button after input

rated 0 times [ 199] [ 7] / answers: 1 / hits: 15832 / 10 Years ago, wed, may 21, 2014, 12:00:00

I need the name of the next button from the input feald, the button can be in different positions(in table, in div after table, etc.). Like a find next in quelltext.

http://jsfiddle.net/LF6pK/

HTML:

<table>

    <tr>

        <td>Benutzer:</td>

        <td><input type=text id=Benutzername name=Benutzername/></td>

    </tr>

    <tr>

        <td>Passwort:</td>

        <td><input type=password id=Passwort name=Passwort/></td>

    </tr>

    <tr>

        <td></td>

        <td class=fr><a href=#info class=submit onclick=login()>

                <button>Login</button>

            </a></td>

    </tr>

</table>

JS:

    $('input').keypress(function(event){

    if(event.which==13){

        event.preventDefault();

        alert($(this).closest('button').html());

        alert($(this).next('button').html());

    }

});

The alert is always undefined.

EDIT:
Sure i can give the button a unique id but i have 1 page with 10 buttons and each 10-20 inputs. So i hope a easy way to call always the next and dont give alle buttons a uniqe id and a seperate funktion to all inputs.

EDIT2:
I meen with the name the innerHTML of the button.

EDIT3:
The table is not always around the inputs.

EDIT4:
Better example http://jsfiddle.net/LF6pK/7/ and i prefer a dynamic like next button solution.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

domeniccolti

Add To Favorites

Follow

Total Points: 276

Total Questions: 98

Total Answers: 93

Location: India

Member since Fri, May 13, 2022

2 Years ago

domeniccolti questions

1 MUI Autocomplete custom options, not showing selected option

Mon, Oct 18, 21, 00:00, 3 Years ago

1 Discord.JS V13 client.on messagecreate not firing

Thu, Oct 14, 21, 00:00, 3 Years ago

1 Using Fetch API to create a Login form

Thu, Jul 15, 21, 00:00, 3 Years ago

1 React JS - How to detect navigator.platform in Next JS

Sat, Oct 24, 20, 00:00, 4 Years ago

1 jsPDF is not defined in javascript

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 10 Years ago breanab · Accepted Answer

Look, the problem is:

.closest() is used to call the closest PARENT.

.next() is used to call the next SIBLING, within the same parent of element.

How you should do it:

Use .closest() to call the CLOSEST PARENT that wraps the <input> AND the <button>.
As i can see in you HTML, the closest parent that wrap both is <table> tag. Then you have to use:

$('input').keypress(function(event){

    if(event.which==13){

        event.preventDefault();

        alert($(this).closest('table').find('button').text());

    }

});

Fiddle:

http://jsfiddle.net/LF6pK/5/

UPDATED:

var closest = $(this).closest(':has(button)') will find the closest parent that has a button

.parentsUntil(closest) will call all parents until the closest parent that has a button

.nextAll('button') will call the buttons that comes only next each parents

.first() will filter the first one that comes next

jQuery:

$('input').keypress(function(event){

    if(event.which==13){

        var closest = $(this).closest(':has(button)')

        event.preventDefault();

        alert($(this).parentsUntil(closest).nextAll('button').first().text());

    }

});

Fiddle:

http://jsfiddle.net/LF6pK/9/

UPDATED [2]:

$('input').keypress(function(event){

    if(event.which==13){

        var closest = $(this).closest(':has(button)')

        event.preventDefault();

        if($(this).parentsUntil(closest).nextAll('button').length >= 1){

            alert($(this).parentsUntil(closest).nextAll('button').first().text());

        } else {

            alert($(this).parentsUntil(closest).nextAll().find('button').first().text());

        }

    }

});

Fiddle:

http://jsfiddle.net/LF6pK/11/