Copy button works perfect copy text from first input field and click on paste button paste in it
<input type="text" id="txt1">Some text</input>
<input type="button" value="copy" >
<input type="text" id="txt2">Some text 2</input>
<input type="button" value="copy2" >
<input type="text"></input>
<input type="button" value="paste text" >
Try this solution. Add handler to the copy buttons and on each click get the previous input field's value and store in a variable. Then in the paste click set the text into the value of the paste button.
If you have this structure of html, in this way it will be easy to do (with prev()).
var text = '';
$('.copy').on('click', function(){
text = $(this).prev().val();
});
$('#paste').on('click', function(){
$(this).prev().val(text);
});
input {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" value="Some Text 1"/>
<input type="button" class="copy" value="copy" >
<input type="text" id="txt2" value="Some Text 2"/>
<input type="button" class="copy" value="copy2" >
<input type="text"/>
<input id="paste" type="button" value="paste text" >
since you said it's working perfectly then i understand your question is which language is used there, it's neither javascript or jquery, pure html is used only for that
var copy_text= '';
$('.copy_button').on('click', function(){
copy_text = $(this).prev().val();
});
$('.paste_button').on('click', function(){
$(this).prev().val(copy_text);
});
Related
I have a page with multiple text boxes, all of which are not required fields (i.e. the user can fill out as many as they wish to). However, I am not able to get autofocus to work from the second text box onwards and the form submits instead when I press enter to move into the next text box (probably because the inputs are not required). Is there a way such that I will be able to autofocus into the next text box after keying in the response for the previous textbox even if the field is not required/stop the form from submitting? Thanks for any help!
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus ></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" ></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" ></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" > </br>
<button type="submit">Submit</button>
</form>
</main>
</html>
try doing this, its supposed to make the enter to submit only on the last input, and the other times it just moves to the next input.
Dont forget to add the onkeydown to all the inputs except the last one.
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus onkeydown="next(this, event)"></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response4" name="response4" autocomplete="off"> </br>
<button type="submit">Submit</button>
</form>
<script>
function next(currElement, e) {
if (e.keyCode === 13) {
e.preventDefault();
let nextNum = parseInt(currElement.id.substr(8)) + 1;
document.getElementById('response' + nextNum).focus();
return false;
}
}
</script>
Hi so I have an input box with a button that when click goes to a url. I want it so whatever the user types it goes to the url + the added words in the input box. So lets say its default google.com/search/?q= then when the user types "cat" itll be google.com/search/?q=cat
<input type= "button" onclick="location.href=\
'http://www.google.com/search/?q=';"\
value="Search Google Images"/><br><br>
<br><br> Search item:<input type="text" id="dropdownID"><br><br>
Append the value of the input field with document.getElementById('dropdownID').value:
<input type="button" onclick="location.href='http://www.google.com/search/?q='+document.getElementById('dropdownID').value" value="Open Testrail Test Plan for Modiciation" />
<br>
<br>
<br>
<br>Search item:
<input type="text" id="dropdownID">
<br>
<br>
<input type= "button" onclick="loadUrl()" value="Search Google Images"/>
<br><br><br><br> Search item:<input type="text" id="dropdownID"><br><br>
<script>
function loadUrl() {
location.href = 'http://www.google.com/search/?q=' + document.getElementById('dropdownID').value;
}
</script>
I would use jquery for that:
https://jsfiddle.net/dqz1pvux/13/
<input id="search" type="submit" value="Search Google Images">
<input id="keyword" type="text" value="" placeholder="Type text here">
<script>
$(document).ready(function(){
$("#search").click(function(){
window.open("https://www.google.de/search?q="+document.getElementById('keyword').value+"&biw=1678&bih=790&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjNzbLf6OfQAhVD6RQKHZp5BRsQ_AUIBigB&dpr=1.09")
});
});
</script>
I have one button that displays number "1" when clicked and three text boxes. I want when the button is clicked the number is displayed on the text box that has focus. Can someone help me please.
function run(){
document.calc.txt1.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
t3">
When you click a button, the previous input looses focus. You could try to store the last focused input element before the click:
(this needs some more work)
var lastFocus = null;
document.addEventListener("blur", function(event) {
// Here, you'll need to find out if the blurred element
// was one of your valid inputs. It's probably best to
// identify them by a class name
if (event.target.type === "text") {
lastFocus = event.target;
}
}, true);
function run() {
// When the user hasn't yet focused on a text input,
// the first one is used by default
(lastFocus || document.calc.txt1).value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
var currId;
function setId(curr){
currId=curr.id;
}
function run(){
if(currId)
{
document.getElementById(currId).value +='1';
}
//document.calc.txt1.value += "1";
//document.activeElement.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1" onblur="setId(this)">
<input type="text" id="txt2" name="txt2" onblur="setId(this)">
<input type="text" id="txt3" name="txt3" onblur="setId(this)">
</form>
Ok, so this code snippet should do what you want. The main thing to note though is that whenever you click the button, the input box becomes blurred that you had selected.
Essentially what this code does here is set the onfocus attribute to allow you to figure out which input box was last focused, rather than which input box IS focused, because none are. Also, I'd recommend changing the button to a 'button' tag because it separates it in terms of tag name from the other input boxes.
Hope this helped, and let me know if you have any questions.
var inputs = document.getElementsByTagName('input');
for(var i = 1 ; i < inputs.length; i ++){
inputs[i].onfocus = function(){
this.setAttribute('class','focused');
}
}
function run(){
var inputBox = document.getElementsByClassName('focused')[0];
if(inputBox){
inputBox.value += "1";
inputBox.setAttribute('class','blurred');
}
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
I have a php application that I'm working on. Here's what I'm trying to do:
I have a search box (textbox) and several buttons. On clicking each button, I want it to fill the search box with a predefined string. Clicking another button will erase what's in the search box and replace its value with its pre-defined string. And a button to clear the textbox as well.
Example:
Button 1
on click -> textbox value = button1
Button 2
on click -> textbox value = button2 (old value is replaced)
Can anyone guide me with the JS code that does this? Thanks!
Apply 'button' class to every button and unique id for each button.
$(".button").click(function(){
var id = this.id;
$('#searchTextId').val($('#'+id).attr('value'));
});
$(document).ready(function(){
$(document).on('click','.click_me',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.text_search').val(search_val);
});
$(document).on('click','.clear_me',function(e){
$('.text_search').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="click_me" data-value="text 1" value="button 1"/>
<input type="button" class="click_me" data-value="text 2" value="button 2"/>
<input type="button" class="click_me" data-value="text 3" value="button 3"/>
<input type="button" class="click_me" data-value="text 4" value="button 4"/>
<input type="button" class="clear_me" value="Clear"/>
<input type="text" class="text_search" />
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
<input type="button" name="btn1" id="btn1" value="Hello" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="World" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="StackOverflow" onclick="setText(this)">
<input type="text" name="textBox" id="textBox" value=""/>
Tested here: http://jsfiddle.net/o5fp0uq1/
I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;