javascript not accessing asp .net based html page element - javascript

I'm just trying to access the value of a textbox control (which has the runat="server" attribute). Been stuck for hours looking for an answer. Every time I try to get the value, it is null.
The javascript file:
function validateRegistration() {
var username = document.getElementById("<%=username.ClientId%>").value;
document.write(username);
}
The aspx file:
<asp:Content ID="Content3" ContentPlaceHolderID="mainContentPlaceHolder" runat="server">
<p>
Fill in the following form to register:</p>
<p>
Username:
<asp:TextBox ID="username" name="username" runat="server"></asp:TextBox></p>
<input id="register" type="submit" value="Register" onclick="validateRegistration()"/>
</asp:Content>

Did you try using
var username = document.getElementById('<%= username.ClientID%>').value;?
i have similar code in my page and works fine.

It should be (note the capital D):
var username = document.getElementById("<%=username.ClientID%>").value;
document.write(username);

Related

html textbox funtion onkey_Up is not working on ascx control

i tried onkey_up to copy one textbos data to another textbox on an user control ascx file but when i run its not wroking.is it because of i wrote onkey_up function on .ascx , i should write on master page?
function sync() {
var TextBoxA1 = document.getElementById('TestAmountTextBox');
var TextBoxA2 = document.getElementById('TestAmountTextBox_2');
TextBoxA2.value = TextBoxA1.value;
}
html inpoutbox :
<input type="text" runat="server" id="TestAmountTextBox" class="form-control currency-input" placeholder="From " aria-label="From Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="7" onkeyup="sync()"/>
<input type="text" runat="server" id="TestAmountTextBox_2" class="form-control currency-input" placeholder="To " aria-label="To Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="13" />
By default, adding a textbox to a usercontrol will force ASP.NET to render a unique ID. Something like "usercontrolId_textboxId". You can find the actual ID, by viewing HTML source.
There are a few options to get around ASP.NET generated IDs:
Option 1:
You can turn off ASP.NET autogenerated IDs, by setting ClientIDMode="Static" E.g:
<input type="text"
runat="server"
id="TestAmountTextBox"
ClientIDMode="Static"
... [the rest of the attributes]
There are alternative properties in ClientIDMode that can be used. Also it can be turned off completely in web.config.
If ClientIDMode is set to Static, then ASP.NET will throw an error if the same ID is reused. For example using the usercontrol on more than once on the same page.
Option 2:
Bind the ASP.NET ID to the JavaScript code, using ClientID, For example:
function sync() {
var TextBoxA1 = document.getElementById('<%= TestAmountTextBox.ClientID %>');
var TextBoxA2 = document.getElementById('<%= TestAmountTextBox_2.ClientID %>');
TextBoxA2.value = TextBoxA1.value;
}
This will only work if the JavaScript is placed on the usercontrol.
Option 3:
A third option is to replace getElementById with getElementsByClassName and add another class to the textboxes.

Why does submit button have a Webresources.axd?

I have a very basic submit button without a postbackurl specified but it creates a webresources.axd reference. I did see Why is my ASP.NET page injecting this WebResource.axd Javascript file? but I don't have postbackurl in the statement.
<form method="post" action="/thispage" id="formAlpha">
<asp:button ID="cmdSubmit" text="Submit" runat="server" />
</form>
Remove the button, there's no axd. Is there something else that could be causing it? I don't use JQuery.

Adding date/time using JavaScript to my asp.net user control

I have a user control where I was getting the server time and doing using a AJAX timer to update it every second. This was very slow and I've been told it is better to do it on the client side.
So I came up with this...but it isn't working. Any suggestions?
<%# Control Language="VB" AutoEventWireup="false" CodeFile="DateTime.ascx.vb" Inherits="UserControls_WebUserControl" %>
<script type="text/javascript">
window.onload = function () {
getDate();
};
function getDate() {
var dt = new Date();
var element = document.getElementById("client_time");
element.text = dt.toDateString();
}
</script>
<form name="headerForm">
<asp:Table Width="100%" ID="formatTable" runat="server">
<asp:TableRow>
<asp:TableCell ColumnSpan="2">
<asp:Image ImageUrl="~/Logo.jpg" ID="Image1" runat="server" />
</asp:TableCell>
<asp:TableCell>
<input type="text" size="10" maxlength="10" value="" name="client_time" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
You have filled out the name field of the element, but it lacks the id needed to find it via getElementById. Also, .text won't do anything, you need to set its value attribute.
Since your input has a limit of 10 characters you might try removing that to show the full date string or you could instead simply write to the table cell with innerHTML or some such method.
To get time in a human readable format you can take a look at: http://www.quackit.com/javascript/tutorial/javascript_date_and_time.cfm

assigning javascript variable to jsp in the same page

I need to assign a javascript variable to jsp. I am doing this by submitting a html hidden field inside a form to server.
But finally the value in jsp is alwasy null. These jsp code and javascript are in the same page. Please have a look a the code:
<html>
<body>
<form action= "Custom_DHTMLDashboard_Content.jsp" method="post">
<input type="hidden" id="hiddenField" />
document.getElementById("hiddenField").value = reportID;
<input type="submit" value="Submit" />
</form>
</body>
</html>
<%String MyID = (request.getParameter("hiddenField"));%>
alert("this is scriptlet" + "<%=MyID%>");//always null
You need to:
Put <script> tags around your script (document.getElementById("hiddenField").value = reportID;)
Define reportID somewhere (before you try to use it)
Escape the data you output with <%=MyID%>. Outputting unfiltered, unescaped data to the page is how you make XSS vulerabilities
If you fix that then:
The first time you load the page, <%=MyID%> will be null
When you submit the form, it will have a value

getting control ID inside repeater by Jquery

I have Entries I want to comment on them . So I created a Repeater with a TextBox and a
Button inside it . How can I get the id of the button and textbox for specific row by
Jquery ?
<ASP:REPEATER runat="server">
<ItemTemplate>
...
// Entries: bind data from DB
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" />
</ItemTemplate>
</ASP:REPEATER>
Thanks .
Your big problem is that your asp repeater control is going to generate ids like this ct100_repeater_txt1 which isn't going to help you get that comment associated with its corresponding db row
The common way I have found to accomplish this (which is a pretty standard way I believe) is to assign the elements id with the row id from the database, or if you have no control over the id, to create a custom attribute.
Pseudo code I have used looks something like this: (I'll try and make it language/platform agnostic so you can learn the concept, as opposed to only the language)
<repeater template>
<textbox id="txt1" dbid='<% eval database id>'/>
<button id="btn1" dbid='<% eval database id>'/>
</repeater template>
that should generate code that looks like:
<input type="textbox" value="" id="ct100_txt1" dbid="14" />
<input type="button value="submit" id="ct100_btn1" dbid="14" />
<input type="textbox" value="" id="ct100_txt2" dbid="12" />
<input type="button value="submit" id="ct100_btn2" dbid="12" />
<input type="textbox" value="" id="ct100_txt3" dbid="39" />
<input type="button value="submit" id="ct100_btn3" dbid="39" />
Then in whatever language you want you can read from that attribute:
Button.Click{
get attribute dbid of button clicked;
save text of textbox of same dbid to a database;
}
Many cheers! Hope that works for ya
EDIT
In response the the comment "where do id save the dbid?!" I'm assuming in a database :) How should you save it? There are lots of ways. Here's one you could try with jquery:
create a javascript function to save answers that takes a parameter. when you bind the dbid to the control, bind it into an onclick function and pass that id to the function. The function then gets the text where the dbid matches and saves the comment and id to a database.
<textbox dbid="14" />
<input onclick="doStuff(14)" />
<script>
function doStuff(var id){
var comment = $('textbox[dbid=id]').value();
ajax(your url and arguments);
};
</script>
Without more information this is the best I can offer you:
for html like this (which is how asp.net will render your button/textbox):
<div id="row1"><button type="button">Click Me!</button><input type="text" name="tb_info" /></div>
<div id="row2"><button type="button">Click Me again!</button><input type="text" name="tb_info" /></div>
You could select the button and textbox for specific row by using the following jQuery:
$("#row1 > button, #row1 > input")

Categories