I have been scouring the interwebs and stackoverflow, but I have not come across a solution that works. I need to erase the default text from the textbox when onfocus happens. I know it is hitting onfocus because my class for text color is set in there also and the color is changing. Here's my code and what I have tried.
ASP:
<asp:TextBox ID="txtAddEditDel" runat="server" CssClass="txtAddEditDel" ></asp:TextBox>
The default text is some random instructions it populates on Page_Load.
Jquery:
$(".txtAddEditDel").focus(function () {
var selectedRoleText = $(this).find('option:selected').text();
var selectedRoleId = $(this).find('option:selected').val();
var selectedRoleIndex = $(this).find('option:selected').index();
//enable add button
enableDisableLinkButtons(true, true, true);
if (selectedRoleText == 'Create, Edit, or Delete a Role Name.') {
$(".txtAddEditDel:text").val('');
}
$(".txtAddEditDel").removeClass('placeholderText');
});
The removeClass function is hit, but my value is not cleared.
Heres what I have tried:
$(".txtAddEditDel").val('');
$(".txtAddEditDel").val("");
$(".txtAddEditDel").text("");
$(".txtAddEditDel").text == '';
$(".txtAddEditDel").text == "";
$(this).val('');
document.getElementbyId('<%= txtAddEditDel.ClientID %'>.value = "";
$(".txtAddEditDel").val(''); should work, assuming its getting there. Have you put some debugging information to check the if clause is true? It may be a better idea to check against the value of the option rather than the text, as the text could easily be misspelt or changed where as a default value will, in my experience, be '' or 0 in this scenario
Related
I'm trying to use a JavaScript popup box (prompt) to get some user input on my website, and then do some more actions on the server-side based on what the user does.
The popup box is, for lack of words, popping up.
The following is the code that I have tried to use for this:
<div>
<asp:HiddenField ID="hidden" runat="server" />
</div>
<script>
function userInput() {
var reason = prompt("Enter reason for deleting:", "");
//User pressed okay but didn't type anything
while (reason == "") {
//Keeps cycling until reason given or cancel is hit
reason = prompt("Enter reason for deleting:", "");
}
if (reason != "" && reason != "Code:CancelDelete") {
//User typed something and hit okay
document.getElementById('hidden').innerHTML = reason.toString();
$('#deleteReason').val(reason.toString());
$("#hidden").val(reason.toString());
}
else {
//User hits cancel
document.getElementById('hidden').nodeValue = "Code:CancelDelete";
}
}
</script>
The while loop in the script works for what I need it to do. The problem from what I can tell is trying to set the value of the HiddenField. I have tried the following ways:
innerHTML
innerText
nodeValue
While looking into this, I have seen .value used a lot and have tried it myself but when I go to type document.getElementById('hidden').value =, there is no popup option or description for .value.
I have tested the server side code and so I know that works. It all comes down to getting the user input. Either way, here is an excerpt from the c# code:
string deleteReason = hidden.Value;
//string deleteReason = test.InnerHtml.ToString();
if (deleteReason.Equals("Code:CancelDelete"))
{
}
else if (!deleteReason.Equals("Code:CancelDelete") && !deleteReason.Equals(""))
{
More or less at a loss on this one.
Update 1:
Here is the html code generated on the client side browser(Firefox) for the hidden field:
<input name="ctl00$IndividualPageContent$hidden"
id="IndividualPageContent_hidden" type="hidden">
When you type an element ID on webform, the asp.net gives it a unique ID based on some things (Your form, your repeater, etc...)
If you want to use jQuery with this ID, you can use the ClientId prop.
Something like this:
if (reason != "" && reason != "Code:CancelDelete") {
//If your server id= "hidden"
ele = $("#<%= hidden.ClientID %>");
ele.html() = reason.toString();
...
}
Another option is to add the static ID to your server element, and then your code will work as is. (the html will be rendered with ID = hidden)
ClientIDMode="static"
<div>
<asp:HiddenField ID="hidden" runat="server" ClientIDMode="static"/>
</div>
You are trying to set the value of an element with id 'hidden', but that's not the id of your hidden input.
The correct id is 'IndividualPageContent_hidden'.
Set the value like this instead:
document.getElementById('IndividualPageContent_hidden').value = 'Your value here';
I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event.
I have tried some code for achieve this but not able to get the textbox1 value on textbox2.
My Code is:
<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()" ></asp:TextBox>
Script code is:
function copyText() {
var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName = givenName;
}
but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this?
(Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)
Thanks.
I got the exact answer for this feature by using below mentioned script code.
Solution:
function OneTextToOther() {
var first = document.getElementById('<%= txtGivenName.ClientID %>').value;
document.getElementById('<%= txtDisplayName.ClientID %>').value = first;
}
Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.
You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.
function copyText() {
var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
displayName.value = givenName.value;
}
You can try keyup event but I know only Jquery method to do it.
<input class="one" type="text"/>
<input class="two" type="text"/>
$(".one").on("keyup", function(){
$(".two").val($(".one").val());
});
here is the demo: http://jsfiddle.net/pUpZA/
PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes
This is my first real attempt to write a JS function. I want to set the value of a text field depending on the selction of a pair of radio buttons.
<script type='text/javascript'>
function setInputValue(){
if(document.getElementById('choice_8_0').checked) {
document.getElementById('input_6_18').value = '1';
}else if(document.getElementById('choice_8_1').checked) {
document.getElementById('input_6_18').value = '0';
}}
</script>
Can anyone help me with where I went wrong? I am not even sure how to name the function really.
You could use:
document.getElementById('elementId').checked = true;
or
document.getElementById('elementId').checked = false;
To select a radiobutton, you can use the checked property of the radiobutton:
document.getElementById('input_6_18').checked = true/false;
EDIT: seems like you want to set the text of an input type text?
Than your code is correct, the property is value. So what is the problem?
On my website, users can enter their name, but they can also click a check box in order to post anonymously. I'm not that good with JS, so can anyone guide me in making it so when the check box is clicked the user becomes unable to write in the name input field? Thanks.
function toggleReadonly(element) {
var inputName = document.getElementById('inputName');
if(element.checked) {
inputName.setAttribute('readonly', true);
}
else {
inputName.removeAttribute('readonly');
}
}
<input type='text' id="inputName"/>
<input type='checkbox' onclick='toggleReadonly(this)'/>
You can see it working here.
You want to toggle the 'disabled' property of the input element, e.g.
var input = document.getElementById('theInput')
input.disabled = !input.disabled;
Add that in a function to the change event of the checkbox and you should be good to go.
EDIT: I whipped it up in a jsfiddle to make sure it would work.
i have an annoying issue with watermarked text for a textbox.
what i want is if user click away of the textbox and there is no text in the textbox than the default text should appear (e.g. Search...)
i have this function to check it:
document.getElementById("searchtextbox").onblur = function() {
if (document.getElementById("searchtextbox").value == "") {
document.getElementById("searchtextbox").setAttribute("value", "Search...");
}
it works great if i just click inside and click out. the problem comes when i click inside, enter text and delete it and then click outside.
i tried doing it with Length == 0, value == null, value.trim() == "", !value.match(/.+/) and none of them return true for this case.
Please consider using the HTML5 placeholder attribute.
<input type="text" id="searchtextbox" placeholder="Search..." value="" />
As a lot of people under my answer pointed out, Internet Explorer won't be really keen on displaying your placeholder text (what a surprise). Still, it is way more semantic to use placeholder, and do a feature detection whether the browser supports it or not.
You can do feature detection like this (from diveintohtml5.ep.io):
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
If this is false, you can use your Javascript placeholder hack.
UPDATE: If you need help how to implement in a nice way, please refer to Html placeholder text in a textarea form.
I also took a look at your code and fixed it:
jsFiddle Demo
document.getElementById("searchtextbox").onblur = function() {
if (this.value == "") {
this.value="Search...";
}
}
Using setAttribute is not the right way here, you do not want to set the attribute, but the live property (.value). Your if condition actually worked, but the change was not reflected.
As bazmegakapa suggested, consider the placeholder attribute.
To answer your question, your code isn't working because you're using setAttribute, while the user just modified the property value. Instead of using setAttribute, try using .value = 'Search...'