CODEWITHSUNDEEP
javascriptjquery
KumarM
KumarM

Reputation: 1699

How to find a sibling element's value using jQuery upon click

I'm trying to find the value of the userid and password in the below HTML using the following jQuery code, but it doesn't return any value. What am I doing wrong?

<div id='mainpane'>
    <form id='login' method='post' action='#'>
        <p>User Id:<input id='userid' type='text' name='userid'></input></p>
        <p>Password:<input id='password' type='text' name='password'></input></p>
        <p><input id='submit' type='submit' name='Submit' value='Submit'></input></p>           
    </form>
    <div id="message"></div>
    <p>Not a member? <a href="user-signup.html">Signup</a></p>
</div>

Here's the jQuery code:

$(document).ready(function() {
    $('#login').delegate('input#submit','click',function(){
        alert('user id is: '+$(this).parent().parent().find('#userid').html());
        var request = $.ajax({
            type:"POST",
            url:"/login",
            data: {userid:$('#userid').text(), password:$('#password').text}
            });

        });

The alert comes back with an empty data. Appreciate any pointers on what am I doing wrong.

Thanks, Kalyan.

Upvotes: 3

Views: 1824

Answers (4)

iambriansreed
iambriansreed

Reputation: 22241

You have quite a few issues so here's the corrected code with notes:

jQuery

$(function() {
// same as document.ready
    $('#login').submit(function(event){            
    // runs whenever the form is submitted - either enter or submit button is clicked
        event.PreventDefault();
        // since the form is submitted via ajax you wil want to keep the page from changing
        alert('user id is: '+$('#userid').val());
        // no need to reach back through the DOM with .parent() use the ID its the fastest, also you get input values with .val()
        $.ajax({
            type:"POST",
            url:"/login",
            data: $('#login').serialize()
            // serialize() creates an object of all the form data based on the name attribute and values - very clean
        });
    });
});

HTML

<div id='mainpane'>
    <form id='login' method='post' action=''>
        <p>User Id:<input id='userid' type='text' name='userid'/></p>
        <p>Password:<input id='password' type='text' name='password'/></p>
        <p><input id='submit' type='submit' name='Submit' value='Submit'/></p>           
    </form>
    <div id="message"></div>
    <p>Not a member? <a href="user-signup.html">Signup</a></p>
</div>

Inputs are self closing.

Upvotes: 2

MR. X
MR. X

Reputation: 1

you try this code 

 $(document).ready(function() {
        $('#login').delegate('input#submit','click',function(){

            alert('user id is: '+$(this).parent().parent().find('#userid').val());
            var request = $.ajax({
                type:"POST",
                url:"/login",
                data: {userid:$('#userid').val(), password:$('#password').val()}
                });

            });
        });

Upvotes: -1

Andreas Wong
Andreas Wong

Reputation: 60516

Just do:

$.post('/login', $('#login').serialize(), function() {});

in place of your $.ajax call :), the .serialize() takes all the form inputs' values and pass them to the server, encoded for you as well :)

Upvotes: 2

ahren
ahren

Reputation: 16961

use .val() to retrieve an input's value.

var userid = $("#userid").val();
var pass   = $("#password").val();

Upvotes: 4

Related Questions