I have four text boxes in 4 different tabs of an ASP.NET Page. I need to provide same validation message to all the text boxes. Presently I am using four different functions with same functionality. Kindly suggest a way to identify which textbox is being used make that a single funtion
Code from Commend:
<asp:TextBox ID="textBox1" runat="server" ValidationonGroup="abcd"></asp:TextBox>
<asp:CustomValidator ID="ID1" runat="server" ValidationGroup="abcd"
ControlToValidate="textBox1" ErrorMessage="message"
ClientValidationFunction="fname"></asp:CustomValidator>
--Javascript Fn--
function fname(sender, args) {
var x = document.getElementById('<%=txtBox1.ClientID%>').value;
if (some condition) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
Edit
if you are using Asp.Net then you should use like this
Aspx page code
<div>
<asp:TextBox runat="server" ID="txt1" ClientIDMode="Static" onKeyPress="javascript:text_changed(this.id);"></asp:TextBox>
</div>
JS Code
<script type="text/javascript">
function text_changed(event)
{
var id = event;
alert(id);
}
</script>
You got the textbox id in id variable and now u can get value etc using this id you are applying your conditions.... i hope this will help u
Related
I have a function on JS that must execute before the codebehind, but i'm having trouble retrieving it.
It will return a variable that i should use on the codebehind. The function i created is this one:
<script type="text/javascript" >
function returnHash() {
var checkout = new DirectCheckout('086F7D02A071267FEBF102EB759D9845B8B3333DFA65BC45B807F41A8525AD8D'); /* Em sandbox utilizar o construtor new DirectCheckout('SEU TOKEN PUBLICO', false); */
debugger;
var month = document.getElementById("txtDataVencUser").value;
var year = document.getElementById("txtDataVencUser").value;
var cardData = {
cardNumber: document.getElementById("txtNumeroCartaoUser").value,
holderName: document.getElementById("txtNomeCartaoUser").value,
securityCode: document.getElementById("txtCodSegurancaUser").value,
expirationMonth: month.substring(0, 2),
expirationYear: "20" + year.substring(3, 5)
};
checkout.getCardHash(cardData, function (cardHash) {
----------------------------> I NEED TO RETRIEVE "cardHash" VALUE IN CODEBEHIND
}, function (error) {
console.log(error);
});
}
</script>
I don't know if this step is correct, but i am using the onClientClick to try to execute the JS before the codebehind:
<asp:Button ID="btnFinalizarCompraJunoUser" runat="server" Text="FINALIZAR COMPRA" OnClientClick="returnHash()" OnClick="btnFinalizarCompraJunoUser_Click" Visible="true" />
I am having trouble figuring out what to do next, can someone help me please?
There are a number of ways - perhaps as many flavors of ice cream.
But, since you are going to run a "code behind" stub based on the click?
I would just drop a hidden field on the page, and then just set that value in js
So right below your button - add a hidden field say like this:
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick="myfun();return true" Width="68px"
ClientIDMode="Static"/>
<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
</form>
<script type="text/javascript">
function myfun() {
// do whatever - walk the dog - have fun!!!
var f1 = document.getElementById("HiddenField1");
f1.value = "2222";
}
</script>
So in above I just shove 2222 into the hidden1 field.
Now, in the the code behind button stub, you can do this:
Debug.Print("my click f1 = " & HiddenField1.Value);
So the code behind will now have a good old regular plane jane control to look at and get the value in question.
So, it depends on how many values - but using a code behind friendly (asp.net) control and setting the value with the js client side code probably is the least effort here.
I also of course used "staticID" for the above. If you for some reason don't like (or want) to use staticID for above, then the js selection would be:
var f1 = document.getElementById("<%=HiddenField1.Clientid%>");
f1.value = cardHash;
I have Parent repeater which contains another child repeater.
For simplicity let's say that the child repeater contains text box and Requiredvalidator.
Simple example of the markup:
<asp:Repeater ID="rpt1" runat="server">
<HeaderTemplate>
....
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1" runat="server" CssClass=".."></asp:Label>
<div class="..">
<asp:Repeater ID="rpt2" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="...">
<asp:TextBox ID="txt21" runat="server" CssClass="..." MaxLength="7" CssClass="ErrorMessage" ErrorMessage="*" />
<asp:RequiredFieldValidator ID="rfv21" runat="server" CssClass="ErrorMessage" ErrorMessage="*" />
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
I create a method like this to get the second repeater's RequiredField id:
function getId(){
var myId = document.getElementById('<%= rfv21.ClientID %>');
}
but of course it didn't work and there was an exception:
The name control-name Does Not Exist in the Current Context
So how can i do this?
I want to mention that the business need for me is that when the onchange, onkeyup, onkeydown events fires for the txt21 it will get it's equivalent rfv21 and enbale it:
I create this method which fires for onchange, onkeyup, onkeydown events changed:
function txt21_onChange(txtbox) {
var newValue = this.value;
var oldValue = this.oldvalue;
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
if (newValue != oldValue) {
ValidatorEnable(myRfv2, true);
}
}
and i update txt21 to be:
<asp:TextBox ID="txt21" runat="server" CssClass=".." MaxLength="7" onkeyup="javascript: txt21_onChange(this);this.oldvalue = this.value;" />
but this line want work:
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
as i explained before.
I think Item.FindControl(..) may help but how can we use it in this case?
You can bind the javascript function call from Repeater Repeater.ItemDataBound event.
Code Bahind
void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
TextBox txt21 = (TextBox)e.Item.FindControl("txt21");
RequiredFieldValidator rfv21 = (RequiredFieldValidator)e.Item.FindControl("rfv21");
txt21.Attributes.Add("onclick", "txt21_onChange('" + txt21.ClientID + "','" + rfv21.ClientID + "'" )
}
}
Javascript
function txt21_onChange(txt21ID, rfv21ID)
{
txt21ID = document.getElementById(txt21ID);
rfv21ID = document.getElementById(rfv21ID);
//The above are TextBox and RequiredFieldValidator objects of row of TextBox that triggered change event.
//You can use these object
}
The problem here is that there going to be many such controls, one per each row of each child repeater. All will have slightly different generated IDs. So instead of querying them by id (impossible), you can use jQuery to quickly find them relatively to the txt that fired an event:
function txt21_onChange(txtbox) {
var rfv2 =
$(textbox) // gives you the jquery object representing the textbox
.closest("div") // the parent div
.find("id*='rfv2'"); // the element you are looking for, id contains rfv2
This answers the immediate question in this thread on how to get hold of the element. But I am not sure it will solve your bigger problem of enabling/disabling validation. You cannot easily do so with server side controls in javascript. Besides, validator is not disabled by default in your code. Although I believe all this is worth a separate question here on SO>
I am trying to use JavaScript to set a textbox text equal to "" or NULL. I am using visual studio 2013 and have created an asp.net web application. I am also using telerik controls(not sure if that will affect anything). I currently have a combobox(ddlMaritalStatus) and a textbox(txtSpouseName). I currently have JavaScript that when ddlMaritalStatus selected text is set to single then txtSpouseName is disabled. I would also like to have txtSpouseName have its text erased when ddlMaritalStatus is changed back to single. I have been researching through Google and through stack overflow and have not come across an option that works. Every answer I have found says to use document.getElementById("txtSpouseName").value = ""; but my program is not reading the .value with JavaScript.
<telerik:RadComboBox ID="ddlMaritalStatus" runat="server" EmptyMessage="--Select--" OnClientSelectedIndexChanged="DisableBox" TabIndex="15" AutoPostBack="false"></telerik:RadComboBox>
<script type="text/javascript">
function DisableBox() {
var TextBox = $find("<%=txtSpouseName.ClientID %>");
var Location = $find("<%=ddlMaritalStatus.ClientID %>");
if (Location.get_text().length < 7) {
TextBox.disable();
document.getElementById("txtSpouseName").value = "";
}
else {
TextBox.enable();
}
}
</script>
<telerik:RadTextBox ID="txtSpouseName" runat="server" Enabled="false" AutoPostBack="false" TabIndex="16"></telerik:RadTextBox>
Here is the code that I have so far. Any help or suggestions would be great! Thanks!
EDIT
I am using IE 11.
Please try with the below code snippet.
<script type="text/javascript">
function ClientSelectedIndexChanged(sender, args) {
if (sender.get_selectedItem().get_value() == "Single") {
document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).value = "";
document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).disabled = "disabled";
}
else {
document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).value = "";
document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).disabled = "";
}
}
</script>
...........
...........
<asp:Panel ID="Panel1" runat="server">
<telerik:RadComboBox ID="ddlMaritalStatus" runat="server" OnClientSelectedIndexChanged="ClientSelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem Value="Married" Text="Married" />
<telerik:RadComboBoxItem Value="Single" Text="Single" />
</Items>
</telerik:RadComboBox>
<asp:TextBox ID="txtSpouseName" runat="server"></asp:TextBox>
</asp:Panel>
Let me know if any concern.
This is the answer I found from another post. This disables the textbox when "Married" is selected and erases and disable the textbox when "Single" is selected. Thank you to everyone who tried to help me!
function DisableBox(sender, args) {
var TextBox = $find("<%=txtSpouseName.ClientID %>");
if (args.get_item().get_text() == "Married") {
TextBox.enable();
}
else {
TextBox.clear();
TextBox.disable();
}
}
I have two javascript functions to change background color on enter and leave events.
function ColoronEnter()
{
var txt1 = document.getElementById("<%=txtID1.ClientID%>");
txt1.style.backgroundColor = "red";
}
function ColoronLeave()
{
var txt2 = document.getElementById("<%=txtID1.ClientID%>");
txt2.style.backgroundColor = "";
}
I am calling them as
<asp:TextBox ID="txtID1" runat="server" MaxLength="20" AutoCompleteType="FirstName" onfocus="ColoronEnter()" onblur="ColoronLeave()" ></asp:TextBox>
It is working well. But I want to apply one javascript function to all my textboxes. I have tried something like
function onEnter(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="yellow";
}
function onLeave(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="";
}
trying to call them as
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(txtID2)" onblur="onLeave(txtID2)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(txtID3)" onblur="onLeave(txtID3)"></asp:TextBox>
It is throwing an error as
Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.
How can I call one function to all my textboxes. Thank in advance.
Use like
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
function onEnter(_input)
{
_input.style.backgroundColor ="yellow";
}
function onLeave(_input)
{
_input.style.backgroundColor ="";
}
If you don't have any restrictions to use jQuery, use jQuery hover event to handle this.
Hi, I have following java script function:
function EnableDisableTextBox(chkBoxId, txtBoxId) {
var isChk = document.getElementById(chkBoxId);
document.getElementById(txtBoxId).disabled = !(isChk.checked);
}
When I am trying to call above function, by clicking check box its not working as expected
<asp:CheckBox ID="chkBachelors"
onclick="javascript:EnableDisableTextBox('chkBachelors','txtFirstDegree');"
runat="server" Text='<%$Resources:Resource, FirstDegree %>' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
Expected Result (When user click chkBachelors check box):
if "chkBachelors" check box is checked
then enable "txtFirstDegree" text box
else
disable "txtFirstDegree" text box
What is the problem and how to solve it?
<asp:CheckBox ID="chkBachelors"
onclick="EnableDisableTextBox(this);"
runat="server" Text='' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
<script language ="javascript" type="text/javascript">
function EnableDisableTextBox(checkbox)
{
var txtBoxId= "<%=txtFirstDegree.ClientID%>";
document.getElementById(txtBoxId).disabled = !(checkbox.checked);
}
</script>
<%=chkBachelors.ClientID%> and <%=txtFirstDegree.ClientID%> will give the client side ID of the Asp.Net controls .You don't need to pass them explicitly
function EnableDisableTextBox() {
var isChk = document.getElementById(<%=chkBachelors.ClientID%> );
document.getElementById(<%=txtFirstDegree.ClientID%>).disabled = !(isChk.checked);
}