Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

javascript / jquery textbox value

Posted on 2011-09-21
18
Medium Priority
?
572 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

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 …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

715 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