Develop Reference

How to Change textbox text into another textbox in asp.net C#?

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

onchange of javascript filled in field issue

I want to use onchange() event on a text field that may be filled in by a date picker using javascript. i tried to use onblur(), onmouseover() and etc but non of them can help me to catch its value just after changing by date picker.
a part of code that defined date picker and fill in text field is like below:
<script type="text/javascript" src="Scripts/cal_.js"></script>
<input type="text" name="receive_date" id="receive_date" style="width:75px" class="cdate" value="" {{attributes}}>
<script type="text/javascript">
new LCalendar('receive_date');
</script>
but when I want to add onchange="_do_something()" in place of {{attributes}} it does not work.

The text input is don't have change event. the event you can use to get the input change is to use 'input'. see sample
inputVar.addEventListener('input', function(){'what you want to do.'});

This is simplistic, but you could try this:
var val;
document.getElementById('receive_date').addEventListener('focus', function() {
// set the value
val = this.value;
});
document.getElementById('receive_date').addEventListener('blur', function() {
if (this.value !== val) {
// val was changed
} else {
// val was not changed
}
});

Thanks for good answers.
After testing so many solutions i changed my calendar library code.
Just after filling in date (text) field in code:
receive_date_field.value=...;
I tried to put:
a.focus();
a.blur();
twice and for catching its value after every filling in (either by another javascript code) i used:
onfocus="_do_something();"
in place of {{attributes}} !!! as you see this is not what i want but just is a temporary way to catch value of field after every filling in.

Make number in form go up every time button is clicked

I'm very new to HTML and JavaScript, but I wanted to know if there is any way to make the numeric value in a textbox go up by one each time a button is pressed. This needs to be done to multiple textboxes so I was thinking this could be made with a function.
<html>
<head>
function (add) {
function goes here
}
</head>
<input type="text">
<input type="button" value="Add One" onclick="add()">
</body>
</html>
I am sorry if my code makes no sense, because I don't know how to accomplish this. Any help is very appreciated!

This is quite simple, really. Your code will need the following elements:
A function in Javascript that is called whenever the button is pressed
A way to retrieve the current value of the text box
A way to put the new value back into the text box
To refer to a particular element in your page, you will need to give it an id. Don't forget to give it a default value, either in code or in HTML, as well, so that you don't start with an empty text box. For example:
<input type="text" value="0" id="textField"/>
You can then get the value of that text field in Javascript using the following:
var textField = document.getElementById( "textField" );
The Javascript variable textField now contains a reference to the text field, and we can just get its content using textField.value. You can also write back to the contents using the same value variable. You will also need to use the parseInt function to turn the text in the field into a number so that Javascript won't just try to stick the character '1' on the end of it.
In the <HEAD> section of your page, you would add the following:
<script language="Javascript>
function handleButtonClick() {
var textField = document.getElementById( "textField" );
var currentValue = parseInt(textField.value);
// Add one
currentValue = currentValue + 1;
// Put it back with the new +1'd value
textField.value = currentValue;
}
</script>
To call a function in Javascript whenever a button is pressed, you would use an event handler, which signals Javascript to run a particular snippet of code whenever an action happens in the browser. In this case, since you're wanting to run code when the user clicks a button, you would use the onClick handler. You can either set this as part of a script or in your HTML code. Doing it in Javascript is ultimately more robust, but for simplicity, I'm going to do it in HTML code.
<input type="button" onClick="handleButtonClick()"/>
And that's it. When you click the button, assuming you've got it all wired up correctly.
See this page for some basic information about getElementById and this page for some basic info about what other event handlers are available for you.

Try this.
<script type="text/javascript">
function add() {
var num = document.getElementById("mynum").value;
if(num == '') num = 0;
document.getElementById("mynum").value = parseInt(num ,10) + 1;
}
</script>
<html>
<head>
function (add) {
function goes here
}
</head>
<div id='txt'></div>
<form action="" method="post">
<input type="text" id='mynum'>
<input type="button" onclick="add()">
</form>
</body>
</html>
hope will help you

I would use jquery for this, so your html should be something like this:
<input type="number" id="numbox">
<button type="button" id="button">
In your javascript file add an event handler:
$("#button").click(addOne);
This means that whenever the element with the id "button" is pressed, the addOne function is called. So from here you write the addOne function, which takes the value of the number text box, adds one to it, and then sets the value of the text box to the new number.
var addOneToEach = function() {
$(":text").each(function(){
var num = $(this).val();
$(this).val(num + 1);
});
}

Set Text Field By Radio Choice

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?

How to Make a Text Input box become non-writable when a checkbox is clicked?

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.