Solved

javascript / jquery textbox value

Posted on 2011-09-21
18
554 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
Comment Utility
can you please show the script and the implementation
0
 
LVL 40

Expert Comment

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

try the above
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
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
 
LVL 17

Expert Comment

by:sonawanekiran
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<%@ 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
Comment Utility
I'm running Visual Studio '10.
0
 

Author Comment

by:Mare22
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Mare22
Comment Utility
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
Comment Utility
Can you compile the code and give me just the html result?
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Your tb_click is invoked whenever you are trying to type something in the input field
0
 

Author Comment

by:Mare22
Comment Utility
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
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

772 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

12 Experts available now in Live!

Get 1:1 Help Now