The value gets copied to the textarea but disappears after a moment - javascript

I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.

Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />

Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/

http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.

Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})

Related

HTML form input equal to var = go to URL

I have tried to create a html form where I want to be redirected to a url if the input you insert is the same as the value of a variable. I have tried to make it work in many different ways, but I have not succeeded. : - /
Someone who can help?
Here is my code:
My HTML-form:
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
My JS:
var country = 'Brazil';
var input = $("input[id='myInput']").val();
$("#submit").on("submit", function(event){
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
Few things. Since you are targeting the submit button and not the form, your event listener should be "click" not "submit." Next, call event.preventDefault() inside the click function. Finally, you want to get the input value after you click the button, so that assignment has to go inside your click function:
var country = "Brazil";
$("#submit").on("click", function(event) {
event.preventDefault();
var input = $("input#myInput").val();
if (country == input) {
console.log("redirect");
window.location.href = "https://www.google.com/";
} else {
console.log("don't redirect");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
You need to init the value after the form is submitted otherwise it will be undefined.
var country = 'Brazil';
$("#submit").on("submit", function(event){
let input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
This should work:
$("#submit").on("click", function(e){
e && e.preventDefault();
var country = 'Brazil';
var input = $('#myInput').val();
if (country === input) {
window.location.href = "https://www.google.com/";
}
});
You need to get the value of the input after the click (or submit) event is fired
Place input = $("input[id='myInput']").val(); as first line inside the function which handles the submit.
So your code actually almost work. Minor adjustments:
var country = 'Brazil';
$("#submit").on("click", function(event){ // this event change to click since we change the type=submit on the input
var input = $("input[id='myInput']").val(); // this line moves inside the event
if (country == input) {
window.location.href = "https://www.google.com/";
}
else { alert('B R A Z I L type Brazil to redirect');}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form autocomplete="off" onsubmit="script.js">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="button" value="GO?" /> <!-- Changed from submit to button -->
</form>
try like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
var country = 'Brazil';
var input = $("input[id='myInput']").val();
if (country == input) {
window.location.href = "https://www.google.com/";
}
});
});
</script>
</head>
<body>
<form autocomplete="off" id="submit">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input id="submit" type="submit">
</form>
</body>
</html>

call function after filling form and pressing enter

In script below
<html>
<body>
<form>
First Name: <input type="text" id="myText" maxlength="30" >
</form>
<button onclick="procesText()">get name</button>
<script>
function procesText()
{
var y = document.getElementById("myText");
alert(y.value);
y.value="";
}
</script>
</body>
</html>
i want to call function procesText Not by clicking get name button, but by clicking enter when i fill input with text. How to achieve that?
HTML:
<form id="myform">
First Name: <input type="text" id="myText" maxlength="30" >
</form>
JS: (If you want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = procesText;
JS: (If you don't want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = function(e) {
procesText();
e && e.preventDefault && e.preventDefault();
return false;
}
Just remove the button, call the function onsubmit, and prevent it from submitting:
<form onsubmit="return procesText()">
First Name: <input type="text" id="myText" maxlength="30" />
</form>
<script>
function procesText() {
var y = document.getElementById("myText");
alert(y.value);
y.value = "";
return false;
}
</script>
Fiddle: Fiddle

javascript not able to detect right click and delete and cut text

I have a textbox and save button. If anything changed on textbox then only save button should be enabled. I am able to take care this using javascript event, but when i select some text and right click and delete that selected text then, I do not get any event. Below is my sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var hiddenfield = document.getElementById("hide").value;
var textboxval = document.getElementById("me").value;
if (textboxval != hiddenfield) {
document.getElementById("xx").disabled = false;
} else {
document.getElementById("xx").disabled = true;
}
}
function load() {
document.getElementById("hide").value = document.getElementById("me").value;
}
</script>
</head>
<body onload="load();">
<input id="me" type="text" value="test test" onkeyup="myFunction()" onmouseup="myFunction()"
onmousedown="myFunction()">
<input type="button" id="xx" value="Save" disabled="disabled" />
<br>
<input id="hide" type="hidden" value="">
</body>
</html>
Is there way to detect if user delete the text via right button click?
Try onchange, since the context-menu control changes the contents.

Javascript output text based on input value

I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>

How to force "enter key" to act as "tab key" using javascript?

I'm working on a site that is full of forms to be filled and I it's required that when escape button is pressed focus move to the next input control, just as pressing "tab" do.
I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on
<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />
<script type="text/javascript">
function noNumbers(e) {
keynum = e.which;
if (keynum == 13)
document.getElementById("Text2").focus();
}
</script>
I need a generalized function that when key pressed code is 13 "that is enter" fire the default event of pressing 9 "that is tab", of course in Javascript
This will handle multiple input fields.
Here is the jQuery version:
http://jsfiddle.net/TnEB5/3/
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
Here is the pure javascript version:
http://jsfiddle.net/TnEB5/5/
(you probably want to get the sibling differently)
function tab(e) {
if (e.which == 13) {
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
var input = inputs[x];
input.onkeypress = tab;
}
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
handle keypress instead and return false back to the browser:
http://jsfiddle.net/EeyTL/
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<script type="text/javascript">
document.getElementById('Text1').onkeypress = function (e) {
if (e.which === 13) {
document.getElementById("Text2").focus();
return false;
}
};
</script>
You'll need to explicitly set the tabindex property of the input fields for a generic solution. Something like
<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />
<script type="text/javascript">
$('input').keypress(function(e){
if(e.which==13){
$("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
e.preventDefault();
}
});
</script>
this solution uses jquery to assign the event handler for all input type elements on the page, sets focus to the element with the next highest tabindex property, and prevents the form from submitting when enter is pressed using e.preventDefault(). Here's a jfiddle
<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>
function doNext(el){
if(event.keyCode=='13'){
var nextEl = el.form.elements[el.tabIndex+1];
if (nextEl && nextEl.focus) nextEl.focus();
}
}
Althought the post is old, I hope my answer can help someone in need. I have a smilar situation:
I have a very large form for an employee scheduler application with different types of input fields. Some of the input fields are hidden sometimes and not other times. I was asked to make the enter key behave as the tab key so the users of the form could use the 10-key when creating thier employees schedule.
Here is how I solved my problem:
$(document).ready(function () {
var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
$(":text").on("keydown", function () {//(2)When an input field detects a keydown event
if (event.keyCode == 13) {
event.preventDefault();
var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
if (nextInput) {
nextInput.focus(); //(4)focus that next input if the input is not null
}
}
});
});
What I had to do was:
Create a collection of all the inputs I want to consider when tabbing. in my case it is text inputs that are visible.
Listen for a keydown event on the inputs in question, in my case all text field inputs
When the enter is pressed on my text input, determine what input is next to be focused.
If that input is valid, bring it into focus.
I am using this code for advancing to next input field. I hate to press TAB key. And this solution works in IE & Firefox:
<script type="text/javascript">
function tabE(obj,e){
var e=(typeof event!='undefined')?window.event:e;// IE : Moz
if(e.keyCode==13){
var ele = document.forms[0].elements;
for(var i=0;i<ele.length;i++){
var q=(i==ele.length-1)?0:i+1;// if last element : if any other
if(obj==ele[i]){ele[q].focus();break}
}
return false;
}
}
</script>
HTML Content
<form id="main">
<input name="" type="text" onkeypress="return tabE(this,event)">
<input type="submit" value="Ok">
</form>
Here is a easy solution for you.
Basically you include the enter2tab.js file and then add the enter2tab class on each object where you want enter to be treated as js.
https://github.com/AndreasGrip/enter2tab
You can obviously look at the code to understand what it does and how..
I believe using e.preventDefault(); is safer than returning false.

Categories