Click on an element: copy its text to an input field [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I searching a method to copy text to an input field, text can be in some tag or - it doesn't matter, but after clicking on this value I need to put this to input field (type text). I think it is possible with JavaScript/jQuery, but I don't know how to write script like this.

Just look at this example
HTML PART
<div class="copy">Copy me</div>
<span class="copy">Hey copy me</span>
Me too
<input type="text" class="paste" value="" />
JQuery PART
$(document).on('click', '.copy', function(e){
e.preventDefault();
$('.paste').val($(this).text());
});
SEE IN ACTION

Give unique id to your input text
for example
and in OnClick event function write following line of code
$("#1").val('some text');

Actually I am not clear about question. Anyway please find below working Fiddle,
Fiddle Here
<input type="text" id="txt_name" placeholder="Enter text to copy"/>
<br>
<br>
<input type="text" id="txt_name_copy" placeholder="Copied Text Here..."/>
<input type="button" id="btn_Run" onclick="fn_copy();" value="Copy Text"/>
Function here :
function fn_copy()
{
var temp = document.getElementById("txt_name").value;
if(temp != "")
{
document.getElementById("txt_name_copy").value = temp;
}
else
alert("Text is Empty");
}

Related

how to display html form values in the same page after submit using JavaScript? plus how to calculate form data? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
The community reviewed whether to reopen this question 8 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I want to create a form to ask passengers in an airport their first name, sur name, their weight and their cargo weight. Then by pressing the submit button display the information in a line with the total of passengers weight and cargo weight. the the cycle goes on till we enter the last passenger information .At the end, I want to display the sum of total weights in order to keep track of the weight plane would carry.
this was the scenario,
I created form, but I cannot figure out how to solve it with primary knowledge in JavaScript.
I gave the submit button a onclick function, then define the function as below:
<form id="Passenger-form" onsubmit="return false"> <!--onsubmit, should I use or not, does it make differnce to displaying form data in the same page??-->
<label for="First-name">First name: </label>
<input type="text" name="First-name" placeholder="Please insert first name."><br>
<label for="Second-name">Second name: </label>
<input type="text" name="Second-name" placeholder="Please insert second name"> <br>
<label for="Passenger-weight">Passengers weight: </label>
<input type="number" name ="Passenger-weight" placeholder="Please enter passengers weight"><br>
<label for="cargo-weight">cargo weight: </label>
<input type="number" name ="cargo-weight" placeholder="Please enter cargo weight"><br>
<input type="submit" name ="submit" onclick="showInput(); multiply(); "> <!-- should I use && or semicolon in here to give two function to one onclick -->
</form>
<p > <span id="display"></span></p>
<body>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("First-name").value +" "+ document.getElementById("Second-name").value;
}
function multiply(){
num1 = document.getElementById("Passenger-weight").value;
num2 = document.getElementById("cargo-weight").value;
document.getElementById("display").innerHTML = num1 + num2;
}
</script>
I know I am way behind the termination of my problem, but I need some clues to make it happen.
I really appreciate if anyone would help me.
in addition, JavaScript "+" sign cause a big trouble to me, since I cannot use it as an operator.
So, there are a few ways of doing this. One is to define the onClick inline in the HTML:
<script>
function a() { return b; }
</script>
<body>
<button onClick="a()">Call A</button>
</body>
The other way is to use an event listener:
<button id="btn">Call function</button>
<script>
const btn = document.getElementById("btn")
btn.addEventListener("click", event => {
// Do something
return something;
})
</script>

Jquery Mask without using plugin beginner [duplicate]

This question already has answers here:
Implement an input with a mask
(10 answers)
Closed 1 year ago.
I would like to make an input type mask __/__ only numbers can be inputted without using any plugin just pure jquery any tips?
Another Question: For example user would input 3,, the output display will be 3/9 the (/9) will just be there and not editable cause 9 would be the maximum number of pages is this possible to achieve?
As far as I understood, your question is how to do the following:
Mask input field
Input field can only accept number
So I do the following steps:
Make input field as password type.
Detect the key in character while typing(keypress is done before value change), then don't change the existing value when the character is not numeric.
I added a button that you can click it to show current value.
$('#in').keypress(function(event){
var reg = /[0-9]/g;
var key = String.fromCharCode(event.keyCode);
if(!reg.test(key))
return false;
})
$('#show').click(function(event){
alert($('#in').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="password"/>
<br />
<button id="show">Show Value</button>
Update
Below is an example done by this plugin.
This may meet your requirement.
$('#inputtext').securenumbermask({mask:'_',maxlength:15});
$('#show').click(function(event){
alert($('#inputtext-original').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask/js/securenumbermask.js">
</script>
<input class="form-control" type="text" id="inputtext" value="123" input-original="inputtext-original">
<input id="inputtext-original" type="hidden" value="**">
<br />
<button id="show">Show Value</button>

How to change preview value in form input without page refresh [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have form simple like this..
And this for code
<form action="aksi.php?opsi=edit&aksi=update" method="post">
<input name="cabangID" type="hidden" value="'.$row['id'].'"/>
<div class="form-group"><label>Image (link)</label><input type="text" class="form-control input-xlarge" name="image_cabang" value="'.$row['image'].'"/>
<img src="'.$row['image'].'" width="420" height="275">
</div>
</form>
Now, I want to improve code like this.. When I change Image link, preview image change automatically without page refresh..
What is the code that I can use? Thank You
Try this (change input field to http://i.stack.imgur.com/uUHMf.png for example and click 'Change' button):
function fnOC()
{
var oim,oin;
oim=document.getElementById('idImg');
oin=document.getElementById('idInput');
oim.src=oin.value;
}
<div class="form-group">
<label>Image (link)</label><input id='idInput' type="text" class="form-control input-xlarge" name="image_cabang" value='http://www.vemix.net/MorningGloryFlower.jpg'/>
<input type='button' value='Change' onclick='fnOC();'/>
<img id='idImg' src="http://www.vemix.net/MorningGloryFlower.jpg" width="420" height="275">
<!--http://i.stack.imgur.com/uUHMf.png-->
</div>
You can do like this:
<input type="text" oninput="update(this.value)">
<img id="image" />
<script>
function update(value) {
document.getElementById("image").src = value;
}
</script>
On input update function is called with one parameter - the value of input field then the value is assigned to attribute src of image.
Note that there is no validation, there is no communication with server (you can do it by AJAX) it is just an example of data binding.
You should propably learn JavaScript.

auto update form with javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want the text i type in
<input type="text" name="text1">
will automatically be updated in
<input type="text" name="text2">
by using JavaScript.
Anyone know how to solve it?
Thanks in advance
You can use the onkeyup event and populate the second <input> with the text of the first one, like this:
var inp1 = document.getElementsByName('text1')[0],
inp2 = document.getElementsByName('text2')[0];
inp1.addEventListener('keyup', function(e) {
inp2.value = this.value;
});
<p>Input 1: <input type="text" name="text1" placeholder="write something here..."></p>
<p>Input 2: <input type="text" name="text2" placeholder="ant it will show up here..."></p>
Test it using the "Run code snippet" button.

Accesing the javascript variable in html tag [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am new to "html" and "Javascript".
I have the following piece of code using "html" and "Javascript" as
<script>
var number=10000;
</script>
<input type="text" value="">
I want to use the value of "number" variable,as the "value" attribute of "input" tag. How?
You could use the Framework AngularJS, which supports this exact use
(http://angularjs.org/)
It's called DataBinding.
Your could would look like this:
<div data-ng-controller="myController">
<input type="text" data-ng-model="number"/>
</div>
<script>
var myController = function($scope) {
$scope.number = 10000;
};
</script>
http://jsfiddle.net/L3hrv/
You could also change the javascript to the following:
<script>
var number=10000;
window.onload = function() { //is executed when the window finished loading
document.getElementById('my-id').setAttribute('value', number); //changes the value of the specified element
}
</script>
<input id="my-id" type="text" value="">
http://jsfiddle.net/k3G44/
Similar to John Smiths answer, but with jQuery. I personally find it easier to work with. I know it's not necessarily what you're asking but it may help.
This will target all input tags
var number=10000;
$('input').attr('value' , number);
<input type="text">
Add an ID to just target one
var number2=50000;
$('#yourId').attr('value' , number2);
<input id="yourId" type="text">
Add a Class to target as many as you like
var number3=70000;
$('.yourClass').attr('value' , number3);
<input class="yourClass" type="text">
<input class="yourClass" type="text">
<input class="yourClass" type="text">
<input class="yourClass" type="text">
Here's an example with some brief explanations:
http://jsfiddle.net/wE6bD/
This can be done using jQuery
$('#inputID').val(number);
Just add an id tag to the input. (id='inputID')
You can just use the DOM:
<script>
var number=10000;
</script>
<input id = "myInput" type="text" value="" />
<script>
document.getElementById("myInput").value = number;
</script>

Categories

Resources