I have an ASPX that has a repeater. Inside the repeater is a text box with a JQuery datepicker attached to it. The text box's ID is static, so it is the same for all of those items within the repeater. However, when I make a change to the second or subsequent repeater item's date box using a datepicker, it changes the first item's date box and leaves the one actually attached to the selected datepicker alone.
Other than the obvious solution of "don't define items with the same ID," which results in another problem that will probably end up in another question, is there a way to fix this problem?
This example
<asp:Repeater runat="server"
ID="rptWhatever"
ClientIDMode="Predictable">
<ItemTemplate>
<asp:TextBox runat="server"
ID="tbxWhoCares"
CssClass="ImaDatePicker">
</asp:TextBox>
</ItemTemplate>
</asp:Repeater>
Will render the textbox to something like:
<input id="tbxWhoCares" type="text" class="ImaDatePicker"/>
So regardless of the id you should be able to do this in your script:
$(".ImaDatePicker").datepicker();
The problem with non-unique ID's is a big one but should be an easy fix if you set the attributes in the Repeater to ClientIDMode="Predictable" and leave the same attribute in the TextBox to its default.
Update
It seems jquery UI datepicker requires a unique id.
So you can select multiple inputs using a common css class but the id's must be unique otherwise you run into that problem.
It shouldn't work that way...but it does.
Alternatively you could just use the native <input type="date" ... />
$(function() {
$(".ImaDatePicker").datepicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<br><br><br>
<input id="tbxWhoCares_1" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_2" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_3" type="text" class="ImaDatePicker" />
Related
Hello I changed the the html Code of a bootstrap template,
Here is the old line
<input type="submit" id="AbteilungSearch" class="form-control" value="Suche starten" style="height:25px;">
and here is the new one
<asp:button Text="Suche starten" id="AbteilungSearch" cssclass="form-control" runat="server" style="height:25px;" />
Well my problem is that the Form-control does not get used anymore.
In my asp.net website I have created a user control called GlobalHeader.ascx to make header content consistent throughout the website and put a text box control for search functionality as given below:
<div style="display:none;">
<form id="sample"></form>
</div>
<div>
<form id="cse-search-box" name="cse-search-box" method="get" action="/Search Results.aspx">
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="text" name="q" id="q" class="search-txt" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" value="Search"/>
<input type="submit" name="sa" value="Search" class="search-iocn" />
</form>
Now in child page I'm having a drop-down control having AutoPostBack=true and OnSelectedIndexChanged="DrpdwnListSelectedIndexChanged" i.e. on item change event DrpdwnListSelectedIndexChanged is fired and and show some data just under drop-down list. BUT this functionality is ONLY work when I remove search functionality from Header user control.
<asp:DropDownList runat="server" ID="drpdwnList" AutoPostBack="True" OnSelectedIndexChanged="DrpdwnListSelectedIndexChanged">
</asp:DropDownList>
This means form tag preventing drop-down list AutoPostBack functionality to work.
Why so?
How can I make both functionality work together?
Interesting thing is that If I remove <form id="sample"></form> from top search functionality doesn't work.
Thanks
I have the following html:
<html>
<body>
<form runat="server">
Name: <input type="text" name="name" />
<br />
<input type="submit" name="submit" />
</form>
</body>
</html>
How do I retrieve the value in the "name" textbox posted back to the webserver to manipulate in ASP.NET WebForms?
(I know about the ASP.NET built-in controls and the possibilities with them, but I am looking for a "clean" solution without the use of built-in ASP.NET controls)
If you can't, or don't want to use asp.net textboxes, then you can retrieve the name of a regular html textbox like this:
string nameTextPosted = Request.Form["name"];
Just note that textboxes created in this manner will not automatically persist their values across postbacks like asp.net textboxes will.
Simplest solution would be to turn it into a server-side component and access it by it's name. e.g.
<asp:TextBox Id="Name" runat="server"></asp:TextBox>
...
string name = Name.Text;
Unless you have other reasons not to use a component, you'd only be making things much more difficult on your part for no justification.
ASP.net includes Html server controls for backward compatibility for just someone like you fond of html. make your html tags server controls by adding the runat="server" and id properties and you are able to access them inside your server side code with their id.
<form runat="server">
Name: <input type="text" name="name" id="name" runat="server" />
<br />
<input type="submit" name="submit" id="name1" runat="server" />
</form>
Now after this you can control their behavior:
name.Value="Hellow World !"
You have to add id and runat="server" in each control. like this :
<input type="text" name="name" id="name" runat="server" />
Its better to use asp:TextBox like this :
<asp:TextBox ID="name" runat="server"></asp:TextBox>
I have a web application in which I am dynamically generating and displaying checkboxes at runtime. Each checkbox corresponds to an item. I need to find which items are selected. However I cannot set the id of the item in the ID attribute of Checkbox control while generating the control as the same item can appear multiple times on the web page.The ID attribute enables me to use the Page.Form() method but now I cannot use. Please suggest an alternate method to find which checkboxes are checked.
If you use JQUERY you can assign a common class to each checkbox and then use a "class selector" to get an array of items on a page that all have the same class. With that you may iterate through the array and identify which items have been checked.
The relevant code will look something like:
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function findCheckedBoxes() {
var AllBoxes = $(".productCheckBox");
for(i=0;i<AllBoxes.length; i++)
{
if(AllBoxes[i].checked)
{
//do something with it...
alert(AllBoxes[i].value);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server" onsubmit="return validatefields();">
<input id="Checkbox1" type="checkbox" class="productCheckBox" value="one" />One<br />
<input id="Checkbox2" type="checkbox" class="productCheckBox" value="two" />Two<br />
<input id="Checkbox3" type="checkbox" class="productCheckBox" value="three" />Three<br />
<input id="Checkbox4" type="checkbox" class="productCheckBox" value="four" />Four<br />
<input id="Button2" type="button" value="button" onclick="findCheckedBoxes()" />
</form>
</body>
</html>
How this code should be (asp.net standard)?
<label for="jobno">Job#</label>
<input id="TextBox_JobID" name="jobno" runat="server"/>
<input type="button" value="Show Job" class="fbutt"
id="Button_showJob" onserverclick="Button_showJob_ServerClick"
runat="server" />
</p>
<p>
<asp:Label ID="Label_error" runat="server" class="error"></asp:Label></p>
I think the for attribute is not ok, or not written in correct way?
The value of the for attribute must match the id of a form control (such as an input element or a select element), not the name.
As the textbox is marked runat="server", I would suggest using the ClientID property of the control:
<label for="<%=TextBox_JobID.ClientID%>">Job#</label>
Then if you use master pages/user controls etc, you can be sure it will always contain the right value.
It should probably read
<label for="TextBox_JobID">Job#</label>