I am hoping to get this fixed, so I have a textbox that's for initials and I want to copy that to the next 26 initial boxes so it's a bit easier for the user.
I want to do this on the Client-Side so I don't use up the performance on the server-side.
The issue I am having is that whenever I call the function that's supposed to copy the text over, somehow disables the textbox, I am unable to type anything in the textbox. Please see the code below, please let me know where I am going wrong!
<script type="text/javascript">
function copyText() {
var UI = document.getElementById("txtinitialOriginal").value;
document.getElementById("initial1").innerHTML = UI;
}
</script>
<input type="text" onkeypress="copyText(); return false" runat="server" id="txtinitialOriginal" style="font-size:20px" />
<asp:TextBox ID="initial1" placeholder="Initial Here" style="float:right" runat="server"></asp:TextBox>
What am I doing wrong?
Using InnerHtml will not set the value of a text box. InnerHTML replaces the HTML inside of the input.
Try setting the textbox with this value
document.getElementById("initial1").value = UI;
or
document.getElementById("<%= initial1.ClientID %>").value = UI;
Edit:
Your textbox is disabled because you have
onkeypress="copyText(); return false"
you need to return true
Related
I have tried a bunch of different things as well as searching and googling but I just can't see how to make some very basic code work.Trying to let the user submit text input.
This code below should just change the first paragraph to say working.
<HTML>
<CENTER>
<BR>
<H1>Test</H1>
<BR>
<p id="ParaOne"></p>
<BR>
<input type="text" id="TextInput" Value="" onsubmit="Test">
<script>
var CharOne = ["name"]
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
document.getElementById("ParaOne").innerHTML = "Enter Name:";
</script>
</HTML>
Ideally I would able to save whatever they entered into a variable and then display the entered name but as of now I can't get anything to work. not even a basic function to update the paragraph to sy working.
There is no onsubmit event for the textbox. You can use that event on the form (which I don't see in your question). Although not required, I would also add a submit button, because that's a better design.
Also it's wasteful to assign an initial value to ParaOne in JavaScript, simply type the value inside the element.
<form onsubmit="Test();">
<p id="ParaOne">Enter Name:</p>
<input type="text" id="TextInput">
</form>
<script>
function Test() {
document.getElementById("ParaOne").innerHTML = "Working";
}
</script>
Important note: Although the code above is how you should do it, I don't really see the point. The form will be submitted immediately after changing the text of ParaOne which will reload the page and you will see the initial value again (and probably think it didn't work). It will work but very fast so nobody will really see it, so what's the point?
You can use the javascript methods onchange or onkeydown to trigger input from the input field, you don't need to submit a form. But in case you needed just that I added the example. I used jQuery instead of plain javascript to write the functions because now they practically become one-line functions.
onchange will wait for the user to press enter or for the input element to loose focus to call the function.
onkeydown will call the function on every key press.
e.preventDefault() cancels the default action of the element, which in this case is a submit action, and lets us make the decision through code whether to submit or not.
Below are some javascript/jQuery test functions and a sample HTML file so you can test out what works best for you.
EDIT: I added some examples on how to store the current value of an input field into a variable
// get the Value of input element directly into a variable
var myVariable = $('#theInput_1').val();
// myVariable will return empty string since the input element is empty
console.log('This is the starting value of the 1st input element: ' + myVariable);
// Function for onkeydown test
function testKeyDown()
{
// stored in a variable which is not available outside the function
var myVariable = $('#theInput_1').val();
$('#paraOne').text(myVariable);
// test output - $('#theInput_1').val() will return empty
console.log('This is the changed value of the 1st input element: ' + myVariable);
}
// Function for onchange test
function testOnChange()
{
$('#paraTwo').text($('#theInput_2').val());
}
// Function for submit test
$( "#submit" ).on( "click", function(e)
{
e.preventDefault(); // Prevents default action of submit
$('#paraThree').text($('#theInput_3').val());
});
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p id="paraOne">This text will be replaced on success.</p>
<input type="text" id="theInput_1" onkeydown="testKeyDown();" size="50" value="" placeholder="onkeydown test" />
<p id="paraTwo">This text will be replaced on success.</p>
<input type="text" id="theInput_2" onchange="testOnChange();" size="50" value="" placeholder="onchange test" />
<p id="paraThree">This text will be replaced on success.</p>
<form>
<input type="text" id="theInput_3" size="50" value="" placeholder="form submit test" />
<input type="submit" id="submit" value="Submit me" />
</form>
</body>
</html>
I have a text box that is filled in with a date based on the Calendar.js file that I use (can be found at http://www.mattkruse.com/javascript/calendarpopup/source.html)
The user clicks on the image button, which pops open a calendar and then fills the textbox.
It clearly works when I use it; however, when I debug my VB.net coding in Visual Studios the textbox shows empty:
Any suggestions why this is happening? I will need to read the string in the textbox later. I need to somehow convert the text that is filled from the Calander.js file and save it as a string inside the textbox.
<script type="text/javascript" id="js1">
var cal1 = new CalendarPopup();
</script>
HTML:
<td style="padding-top:20px; padding-left:15px;">
<asp:TextBox runat="server" id ="CERT_AGENCY_EXP1" Cssclass="fieldrequired" name="Agency1 Date Txt" size="10" maxlength="10" BackColor="#CCCCCC" ReadOnly="True" TabIndex="40"/>
<asp:ImageButton name="anchor1" id="anchor1" runat="server" style="padding-top:30px; float:left;" value=""/>
<img src="Images/calendar.png" value=""
onClick="cal1.select(document.forms[0].CERT_AGENCY_EXP1,'anchor1','MM/dd/yyyy'); return false;" title="cal1.select(document.forms[0].CERT_AGENCY_EXP1,'anchor1','MM/dd/yyyy'); return false;" name="anchor1" id="a1" />
</td>
Your Textbox (CERT_AGENCY_EXP1) is marked as ReadOnly. Remove that attribute and you will see the changes after the postback.
If you still want to keep the Textbox as ReadOnly, but still get the modified values do this:
CERT_AGENCY_EXP1.Attributes.Add("readonly", "readonly")
I have a select list
<select id="type" name="type" onchange="type_Change(this.id)">
and i want to maintain selected value after the postback.
how will i acheive through jquery.
please anyone???
If you change the selected value of select through javascript/jQuery code then you can store the changed selected value in some hidden field and later using it in code behind.
Html
<input type="hidden" runat="server" id="hdnForSelect" />
Javascript
function type_Change(idOfSelect)
{
//your code
document.getElementById('%= hdnForSelect.ClientID %>').value = "changed value";
}
Code behind
string changedValue = hdnForSelect.Value;
I have this input text in my application
<asp:TextBox ID="note" runat="server" Text='<%#Eval("Note")%>' />
The default Foreground-color is Black .I'd like to change this property when i write in textbox, the letters will be in another color like Red.
So :
What is the easiest way to do this?
Did a property in the <asp:TextBox /> which can do this exists?
Easiest way to do this is with CSS. Add following class:
#note:focus {
color: red
}
When the textbox receives focus and ready to accept text - the color will be turned to red.
As an alternative, if for some reason you need to do this inline - you can, but this time with JavaScript. Modify your textbox like this:
<asp:TextBox ID="note" runat="server" Text='<%#Eval("Note")%>' onfocus="this.style.color='red'" onblur="this.style.color='black'" />
This will achieve the same results as above.
Demo: http://jsfiddle.net/S48tb/
I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!
3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.
You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.
you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.