Solved

javascript / jquery textbox value

Posted on 2011-09-21
18
556 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
 
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
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.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

863 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

26 Experts available now in Live!

Get 1:1 Help Now