CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Srikanth Chilukuri
Srikanth Chilukuri

Reputation: 573

Unable to get data from content in jQuery?

I have 2 HTML files and 2 js files.

In App.html I want to include login.html and need to fetch the data from login.html and need to use in in App.

App.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>    
        <script type="text/javascript" src='js/jquery.js'></script>        
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
    </head>
    <body>  
        <div id="content"></div>
    </body>
</html>

Login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>    
        <script type="text/javascript" src='js/jquery.js'></script>
    </head>     
    <body>      
    <div>
        <div data-role="fieldcontain">
            <label for="userid" id="luserid" ><strong>UserId : </strong></label>
            <input type="text" name="userid" id="userid" value="" class="logon" placeholder="Username" required/>
        </div>
        <div data-role="fieldcontain">
            <label for="password" id="lpassword"><strong>Password :</strong></label>
            <input type="password" name="password" id="password" class="logon" value="" placeholder="Password" required/>
        </div>
        <div class="ui-body">
            <fieldset class="ui-grid-a">                            
                    <div class="ui-block-a"><a data-role="button" id="loginbtn" data-theme="b">Login</a></div>                          
            </fieldset>
        </div>              
    </div>
    </body>
</html>

app.js 

  $(document).ready(function(){ 
  $('#content').load('login.html'); 
  });

login.js

$(document).ready(function(){   
    var userid= $("#userid").val();
    var upassword= $("#password").val();
    alert(userid);
    alert(upassword);               
});

Please help me out on this.

Note: I do not want to include the login.js in the Login.html.

Upvotes: 0

Views: 266

Answers (2)

Littm
Littm

Reputation: 4947

You should try the following:

$(document).ready(function(){ 
    $('#content').load('login.html', function() {
        var userid= $('#content').find("#userid").val();
        var upassword= $('#content').find("#password").val();
        alert(userid);
        alert(upassword); 
    }); 
});

This will make sure that the content of login.html has been loaded successfully. If so, you can fetch the values of #userid and #password.

Since these were not created when the DOM was created, you cannot access their values directly through $('#userid') and $('#password') and you may have to use the method find() instead.

PS: I thougth this link might interest you: Calling function after .load (Jquery)

Hope this helps.

Upvotes: 0

Simone
Simone

Reputation: 21272

You should check for the user and password on the submit event, i.e:

$("form").submit(function(e){
  var userid= $("#userid").val();
  var upassword= $("#password").val();
  alert(userid);
  alert(upassword); 
});

You also need to wrap your code inside a <form>:

<form>
    <div data-role="fieldcontain">
    ...
    </div>    
</form>

Upvotes: 1

Related Questions