Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

javascript / jquery textbox value

Posted on 2011-09-21
18
Medium Priority
?
574 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:Gurvinder Pal Singh
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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:Gurvinder Pal Singh
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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

972 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