Solved

javascript / jquery textbox value

Posted on 2011-09-21
18
559 Views
Last Modified: 2012-05-12
The task is simple - I have an asp:TextBox control inside a <div>.  It has OnClick event defined.  The function for OnClick is triggered.  I need to get the text of the text box with javascript / JQuery, but it's not working.  I tried getting client id, using sender and this objects, value and jquery val() - it either comes back as undefined or raises an exception.

Please help.
0
Comment
Question by:Mare22
  • 7
  • 7
  • 2
  • +2
18 Comments
 
LVL 6

Expert Comment

by:kswathi
ID: 36572139
can you please show the script and the implementation
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36572158
<input type="text" onclick="alert(this.value)">

try the above
0
 
LVL 9

Expert Comment

by:user_n
ID: 36572306
The html should be correctly written, otherwise such problems may show.
You can use https://addons.mozilla.org/en-US/firefox/addon/total-validator/ to validate the page.
And you can debug the java script with http://getfirebug.com/javascript in firefox
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36573263
Try this
Your aspx code
<div>
<asp:TextBox id="tb1" runat="server" CssClass="mytextbox" />
</div>

Open in new window


Your jquery code

 $(document).ready(function(){

   (".mytextbox").click(function(){
    alert($(this).val());
});
});

Open in new window


OR you can use below jquery code  also
 $(document).ready(function(){

   ("#<%=tbl.ClientID%>").click(function(){
    alert($(this).val());
});
});

Open in new window

0
 

Author Comment

by:Mare22
ID: 36574489
user_n, thank you, this is a good advise, but I can't use it now.  I use a corporate laptop with only IE installed and no installation rule; I am hesitant to break that rule.
0
 
LVL 9

Expert Comment

by:user_n
ID: 36574594
You can give a link to the web html site and we to try to debug  and validate the code.
0
 

Author Comment

by:Mare22
ID: 36574838
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationTest1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .myRadioButton {}
    </style>

    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
                function tb_click() {
                    debugger

                    var val = $(this).parent.val();
                    alert(val);
                }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This is a test.
    </div>
    <div>
        <asp:TextBox runat="server" ID="tb" OnClick="tb_click()" />
    </div>
    </form>
</body>
</html>
0
 

Author Comment

by:Mare22
ID: 36574843
I'm running Visual Studio '10.
0
 

Author Comment

by:Mare22
ID: 36574860
Another question - let me know if I should open a separate question for this.  OnClick event is not really what I want.  I want an event to fire when text box is changed 9does not have to be clicked).
Thanks.
0
 

Author Comment

by:Mare22
ID: 36574893
This

 var val = $(this).parent.val();

is invalid, but it does not work when parent reference is removed.
0
 
LVL 9

Expert Comment

by:user_n
ID: 36574971
Can you compile the code and give me just the html result?
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575033
Validation Output: 1 Error

    Error Line 37, Column 54: there is no attribute "OnClick"

            <input name="tb" type="text" id="tb" OnClick="tb_click()" />

    ¿

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575035
so the onclick method is not getting invoked? what is the output you are getting? what is the output if you replace it with normal textbox?
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575501
I think that it is what html code you looking for

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head id="Head1">

<title>test</title>
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
      if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus();
            return false;
      }
      else {
            alert(elem.value);
      }
      return true;
}
</script>
<form method="post" action="Default.aspx" id="form1">

Required Field: <input type='text' id='req1'/>
<input type='button' onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')" value='Check Field' />
</form>

</html>



if you want to send infromation to the surver from the form and this information to be processed on the server by Default.aspx you should add submit button to the form to send information to the server. Or you can use formObject.submit() http://www.w3schools.com/jsref/met_form_submit.asp. You can just add the needed asp code to the html above
0
 
LVL 9

Accepted Solution

by:
user_n earned 500 total points
ID: 36575531
some better aligment

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
      <head id="Head1">
            <title>test</title>
                  <script type='text/javascript'>
                        function notEmpty(elem, helperMsg){
                                    if(elem.value.length == 0){
                                    alert(helperMsg);
                                    elem.focus();
                                    return false;
                              } else {
                                    alert(elem.value);
                              }
                              return true;
                        }
                  </script>
      </head>
<body>
                  <form method="post" action="Default.aspx" id="form1">
                        Required Field: <input type='text' id='req1'/>
                        <input type='button' onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')" value='Check Field' />
                  </form>
</body>
</html>
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575560
Your tb_click is invoked whenever you are trying to type something in the input field
0
 

Author Comment

by:Mare22
ID: 36577012
user_n, thank you for your responses.  I am not getting the error message you mentioned above.
gurvinder372, the method gets invoked.  All I need is to get the text from textbox, that's all.

I've slightly changed the sample code.  Here it is my test page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationTest1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .myRadioButton {}
    </style>

    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
                function tb_change() {
                    //debugger
                    alert("here");
                    //var val = $(this).val(); // val=""
                    //var val = this.value; // val undefined
                    //var val = $('<%=tb.ClientID%>').val(); // undefined
                   
                }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This is a test.
    </div>
    <div>
        <asp:TextBox runat="server" ID="tb" onchange="tb_change()" />
    </div>
    </form>
</body>
</html>

/////////////////////////////////////////////
Here is generated page:

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
    <style type="text/css">
        .myRadioButton {}
    </style>
 
    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
                function tb_change() {
                    //debugger
                    alert("here");
                    //var val = $(this).val(); // val=""
                    //var val = this.value; // val undefined
                    //var val = $('tb').val(); // undefined
                   
                }
    </script>
</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjgzMDgzOTgzZGRGm1KyU3wVJ13T7ki/dAVjXq+mLw==" />
</div>
 
<div>
 
      <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK1ho70BQLM76LvDKdj71D5TX+i2sjmfJa+MueZJjGf" />
</div>
    <div>
        This is a test.
    </div>
    <div>
        <input name="tb" type="text" id="tb" onchange="tb_change()" />
    </div>
    </form>
</body>
</html>

//////////////////////////////////////
I need to read the text of the textbox from inside the tb_change function.  Thank you.
0
 

Author Comment

by:Mare22
ID: 36577421
All set:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationTest1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
                function tb_change(text) {
                    debugger
                    var val = text;
                    //alert("here");
                }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This is a test.
    </div>
    <div>
        <asp:TextBox runat="server" ID="tb" onchange="tb_change(this.value)" />
    </div>
    </form>
</body>
</html>
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Capture logon name 13 70
How can i open a .fxp file 3 29
jquery datepciker end date add 6 days 6 33
JavaScript let vs var 5 20
This article will show, step by step, how to integrate R code into a R Sweave document
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now