onkeyup javascript attribute set text in textbox - javascript

I have this TextArea
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
and this hidden text box
<input type="hidden" name="Textarea" id="txtArea" value="" required>
and this is my JavaScript
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
}
As you can see here I used alert just to make sure that the onkeyup is working by getting the value of textarea and as of now it successfully gets the value of textarea and showing to the alert.
But when I tried to set the value of textarea to hidden textbox the script of onkeyup doesn't work anymore
This is the jQuery I used when I'm trying to set a text to a textbox
$("#txtArea").val(txtAreaValue);

You can use this context and remove the invoke ().
<textarea class="textarea" onkeyup="deltxtArea" id="txtID1" placeholder="Remarks"></textarea>
And into your script file, just do:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
Or a better way, do your keyup event into the script file, and remove the inline attribute of your html:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
$(function() {
$("#txtID1").keyup(deltxtArea)
})

function deltxtArea(){
var txtAreaValue = document.getElementById('txtID1').value;
document.getElementById('txtArea').value = txtAreaValue;
}
<textarea class="textarea" onkeyup="deltxtArea()" id="txtID1" placeholder="Remarks"></textarea>
<input type="hidden" name="Textarea" id="txtArea" value="" required>

All this looks fine but i think difficult to find the issue
I have tried as per your requirement all this looks fine , so kindly tried this code , you can avoid to include jquery if you already included
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
<input type="text" name="Textarea" id="txtArea" value="" required>
<script type="text/javascript">
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
$("#txtArea").val(txtAreaValue);
}
</script>
</body>
</html>
if it works for you after that you can change input type from text to hidden

Related

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Javascript for validating Multiline Text area's input characters

I have a multiline text area which accepts 42 characters and if the user exceeds the limit and clicks on submit button, he will get a alert message like 'exceeded the limit so remove '***' characters. Below is the code which performs the same.
<head runat="server">
<title></title>
<script type="text/javascript">
function ok(maxchars) {
if (document.ourform.box.value.length > maxchars) {
alert('Too much data in the text box! Please remove ' +
(document.ourform.box.value.length - maxchars) + ' characters');
return false;
}
else
return true;
}
</script>
</head>
<body>
<div>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
method="post" name="ourform" onsubmit="return ok(42)">
Please enter data, at most 42 characters:<br/>
<textarea name="box" rows="5" cols="30">
</textarea>
<br/><input type="submit"/>
</form>
</div>
</body>
</html>
But my problem is I should get the same alert message once I de-focus the control from the text box area instead of clicking on submit button.
So Please help me for achieving it...!!
Thanks in advance...
Additional requirement: After getting the alert message and clicking on ok button,the extra characters should be deleted. Please help..
Here is a simple solution using jQuery
$(function(){
$("#box").keypress(function(){
if($(this).val().trim().length > $(this).data("limit") - 1) {
alert("You have reached the limit");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="ourform">
Please enter data, at most 42 characters:<br/>
<textarea name="box" rows="5" cols="30" data-limit="10" id="box"></textarea>
<br/><input type="submit"/>
</form>
Please try this.
You'll need to use the onchange or keyup event to bind this to the textarea.
First add an ID to your textarea. Then bind the event listener to it, and call your function.
document.getElementById("textAreaBox").addEventListener("keyup", ok(42));
Alernatively, you can use the onpropertychange event in HTML.
<textarea name="box" rows="5" cols="30" onpropertychange="ok(42)">
</textarea>
add this onblur="ok(42)" or onkeyup="ok(42)" inside ur textarea
<textarea name="box" rows="5" cols="30" onblur="ok(42)">
</textarea>
OR
<textarea name="box" rows="5" cols="30" onkeyup="ok(42)">
</textarea>
You can give an id/class for the textarea and go using simple
JqueryEvents - Onblur or FocusOut event to trigger your function.
--> https://api.jquery.com/blur/
Javascript blur event
--> http://www.w3schools.com/jsref/event_onblur.asp
You can give 'maxlength' attribute to your text area. Here is example.
It works.
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
method="post" name="ourform" onsubmit="return ok(42)">
Please enter data, at most 42 characters:<br />
<textarea name="box" rows="5" cols="30" maxlength="42">
</textarea>
<br />
<input type="submit" />
</form>

Getting HTML DOM element and setting it to a value of a input tag

There is an element on my page with the id last_name. I would like to get its value and pass it along to my input tag.
I am essentially trying to do something like this (doesn't work).
<input type="hidden" name="lastName" value=document.getElementById("last_name").value>
Is there anyway to do this?
This is not only on load.
Essentially, I have a bunch of textboxes grouped together in a form.
Then I have another form with a button. When the user hits the button, I want my input tags' values be the current values entered in the textboxes.
EDIT: Thanks all! Got it work. I essentially had to remove the "value" attribute of the input tags and then add an "onclick" attribute to my button and then call those javascript codes you guys provided me.
for only loading page:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#lastName').val($('#last_name').val());
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
</body>
</html>
for button click:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#btn-save').on('click', function() {
$('#lastName').val($('#last_name').val());
// other work
return false;
}
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
<button id="btn-save">Save</button>
</body>
</html>
without jQuery use:
<script>
window.onload = function(){
var src = getElementById('last_name');
var dst = getElementById('lastName');
dst.value = stc.value;
}
</script>
Try this:
var lastName = document.getElementById("last_name");
var input = document.getElementById("yourInputId");
input.value = lastName.value;
Try the following code
HTML
<input type="hidden" name="lastName" id='hidLastName' />
and javascript code:
var input = document.getElementById("hidLastName")
input.value = document.getElementById("last_name").value
You should move the logic to a .js file or inside a <script></script> element. Preferrably the former. Try something like this:
Put an id to the receiving input:
<input type="hidden" id="lastName" name="lastName">
And this to your .js file
window.onload = function(){
var lastNameInput = document.getElementById('lastName');
var sourceInput = document.getElementById('last_name');
lastNameInput.value = sourceInput.value;
}
Try This:
Java Script
<script>
function setInput() {
document.getElementById("lastname").value = document.getElementById("last_name").value;
}
</script>
HTML
<input type="text" id="last_name" onblur="setInput()"/>
<input type="hidden" id="lastname" />

How to make a input field readonly with JavaScript?

I know you can add readonly="readonly" to an input field so its not editable. But I need to use javascript to target the id of the input and make it readonly as I do not have access to the form code (it's generated via marketing software)
I don't want to disable the input as the data should be collected on submit.
Here is the page I have added in the below suggestion with no luck so far:
https://www.pages05.net/engagedigital/inputReadOnly/test?spMailingID=6608614&spUserID=MTI5MDk4NjkzMTMS1&spJobID=Nzk4MTY3MDMS1&spReportId=Nzk4MTY3MDMS1
Make sure you use <body onload="onLoadBody();"> for anyone using this in the future.
You can get the input element and then set its readOnly property to true as follows:
document.getElementById('InputFieldID').readOnly = true;
Specifically, this is what you want:
<script type="text/javascript">
function onLoadBody() {
document.getElementById('control_EMAIL').readOnly = true;
}
</script>
Call this onLoadBody() function on body tag like:
<body onload="onLoadBody">
View Demo: jsfiddle.
The above answers did not work for me. The below does:
document.getElementById('input_field_id').setAttribute('readonly', true);
And to remove the readonly attribute:
document.getElementById('input_field_id').removeAttribute('readonly');
And for running when the page is loaded, it is worth referring to here.
document.getElementById('TextBoxID').readOnly = true; //to enable readonly
document.getElementById('TextBoxID').readOnly = false; //to disable readonly
document.getElementById("").readOnly = true
Try This :
document.getElementById(<element_ID>).readOnly=true;
<!DOCTYPE html>
<html>
<body>
<input id="balloons" type="number" step="10" min="1" max="1000" size="25" value="60" >
<input id="bloquear" type="checkbox" onclick="validate()" />
<p id="demo1"></p>
<p id="demo2"></p>
<script type=text/javascript>
function validate(){
document.getElementById("bloquear").checked == (bloquear.checked == 1 ? false : true );
document.getElementById("demo1").innerHTML = bloquear.checked;
document.getElementById("demo2").innerHTML = balloons.readOnly;
if (balloons.readOnly) document.getElementById("balloons").removeAttribute("readonly");
else balloons.setAttribute("readonly", "readonly");
}
</script>
</body>
</html>
Here you have example how to set the readonly attribute:
<form action="demo_form.asp">
Country: <input type="text" name="country" value="Norway" readonly><br>
<input type="submit" value="Submit">
</form>
I think you just have readonly="readonly"
<html><body><form><input type="password" placeholder="password" valid="123" readonly=" readonly"></input>

clear text onclick - textfield

What is the best method to clear text in a text field, when the user clicks on it?
I.e., if the text search field says "search" and when they click it, it clears the value.
You could do like:
<input type="text" onfocus="if(this.value == 'search') {this.value=''}" onblur="if(this.value == ''){this.value ='search'}">
<input name="foo" placeholder="Search" />
The placeholder tag is a new HTML5 tag that does exactly what you want to do here.
Normal HTML:
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<input type="text" value="Search" onfocus="clearThis(this)" />
jQuery:
<script type="text/javascript">
function clearThis(target){
$(target).val = "";
}
</script>
<input type="text" value="Search" onfocus="clearThis(this)" />
In JavaScript you can simple set the value of the contorol to an empty string in the OnFocus event handler.
If jquery's an option, I'd consider the watermark plugin
It achieves what you're after, but with a bit more style

Categories

Resources