How to make Paste Button Working?
I have 1 element textarea for My Text.
<textarea id="myText">Ananda</textarea>
I want to Paste it into another input text .
<input type="text" id="resultPaste">
I have button for Paste from #myText to #resultPaste .
<span class="btn-main btn-paste">PASTE</span>
My code
jQuery :
$(document).ready(function() {
$(".btn-paste").click(function() {
var text = $('#myText').val()
$('#resultPaste').append(text);
});
});
Code Snippet Demonstration:
$(".btn-paste").click(function() {
var text = $('#myText').val();
$('#resultPaste').append(text);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">
JSFiddle
$(document).ready(function() {
$(".btn-primary").click(function() {
var text = $('#myText').val();
$('#resultPaste').val( $('#resultPaste').val()+text);
});
});
append dont work on textarea
I don't know what append does, but in order to set the value, you must use
el.val('something')
$(".btn-paste").click(function() {
var text = $('#myText').val();
$('#resultPaste').val(text);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">
Since you are just copying all of the text over just use .val() on both the copy <textarea> and the past <textarea>.
$(".btn-paste").click(function() {
$('#resultPaste').val($('#myText').val());
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste">
No jquery
Wait DOM loaded
Get the button for change the text
Get the input to put the text
Get the text and put that.
window.addEventListener("DOMContentLoaded", () => {
document.getElementsByClassName("btn-paste")[0].addEventListener("click", () => {
document.getElementById("resultPaste").value = document.getElementById("myText").value;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<textarea id="myText">Ananda</textarea>
<br>
<button class="btn-primary btn-paste">PASTE</button>
<br><br>
<input type="text" id="resultPaste"/>
Related
I am new to jQuery and I am trying to figure out how I can get multiple gifs to show up on a page after typing in a keyword and clicking 'submit'. In my api key I thought setting the number for 'limit=10'(10 for example) is suppose to have 10 gifs per page?
$('#searchgifs').on('click', function() {
var input = $('#search').val();
$.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
$('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
})
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="scripts/script1.js"></script>
</body>
</html>
It seems like you have two issues: The first one is that you only set one of the results to the element, and the second is that you set the content of the element to be the content of the first result, instead of appending it. Below snippet should work .
The two changes I made:
Using the $.each() function to do something with ALL of the results instead of only 1 by using an array key
Using the .appendTo() function to add content to a certain element instead of setting the content. The first ADDS content, the later overwrites the current value.
$('#searchgifs').on('click', function() {
var input = $('#search').val();
$.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
$.each(response.data, function(index, gif){
$("<img src=" + gif.images.downsized_large.url + ">").appendTo(('#img'))
});
})
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="scripts/script1.js"></script>
</body>
</html>
I'm using a textfield to pass the value. That value is passing on a HTML button. I want that button value inside a jQuery variable. The problem is that I just want that button value which is passed by jQuery.
$(document).ready(function() {
$('#myvaluefirst').on('change', function(e) {
$('#display_here').html($(this).val());
})
});
function getval() {
alert($('#display_here').val());
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here" onclick="getval();">value will display here</button>
In jQuery val() is used for value attributes, in your code you are using button element, you should call text() method, buttons don't have value attributes
$(document).ready(function() {
$('#myvaluefirst').on('change', function(e) {
$('#display_here').html($(this).val());
})
});
function getval() {
// alert($('#display_here').val()); // Edit this as below
alert($('#display_here').text());
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here" onclick="getval();">value will display here</button>
You can use text or html property.
$(document).ready(function() {
$('#myvaluefirst').on('change', function(e) {
$('#display_here').html($(this).val());
})
});
function getval() {
alert($('#display_here').text());
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here" onclick="getval();">value will display here</button>
Firstly, don't use inline event handlers. As you've already included jQuery in the page, use it to bind an unobtrusive event handler to the button.
Secondly, the issue is because you're looking at the value of the button, yet you set its content. Use text() instead of val().
Also note that I changed the change event to input so that the value of the button updates immediately. When using change the value doesn't update until the textbox loses focus, which can cause the button to move and the user may miss the click. Try this:
$(document).ready(function() {
var $button = $('#display_here').on('click', function() {
console.log($(this).text());
});
$('#myvaluefirst').on('input', function(e) {
$button.text($(this).val());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here">value will display here</button>
$(document).ready(function() {
$('#myvaluefirst').on('change', function(e) {
$('#display_here').html($(this).val());
$('#display_here').val($(this).val());
})
});
function getval() {
alert($('#display_here').val());
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here" onclick="getval();">value will display here</button>
I'm using kendo datepicker here, i have an original div with two datepickers and a duplicated div with two datepickers as well, when i duplicate the div the datepicker events fire once only on the first duplicated div then it stops working, i tried event binding but it didn't work, can anybody help here?
$(document).ready(function() {
$(".from, .to").kendoDatePicker();
$('.calendar').click(function() {
$(this).siblings('.k-datepicker').find('input').data("kendoDatePicker").open();
});
$('.from, .to').each(function(index, el) {
$(el).bind("focus", function() {
$(this).data("kendoDatePicker").open();
});
});
$('.duplicate-btn').on('click', function(e) {
e.preventDefault();
var duplicateable = $(this).next('.duplicate');
var html = $('<div>').append(duplicateable.clone()).html();
$(html).insertBefore(duplicateable);
var new_el = duplicateable.next('.duplicate');
new_el.fadeIn(600).removeClass('duplicate');
});
});
.k-dropdown-wrap .k-select,
.k-numeric-wrap .k-select,
.k-picker-wrap .k-select {
display: none !important;
}
div {
margin-bottom: 15px;
}
.duplicate {
display: none;
}
<link href="http://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" rel="stylesheet">
<div>
<label>From</label>
<input class="from">
<button class="calendar">Calendar</button>
</div>
<div>
<label>To</label>
<input class="to">
<button class="calendar">Calendar</button>
</div>
<button class="duplicate-btn">Duplicate</button>
<div class="duplicate">
<div>
<label>From</label>
<input class="from">
<button class="calendar">Calendar</button>
</div>
<div>
<label>To</label>
<input class="to">
<button class="calendar">Calendar</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
You should not clone() those elements. They go with a lot of properties from the widget. Instead I suggest you to use templates to create new elements and then initialize the widgets on them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script>
$(function() {
$(document).on('focus', '[data-role="datepicker"]', function(index, el) {
$(this).data("kendoDatePicker").open();
});
$('input[type="date"]').kendoDatePicker();
$('button').on('click', function() {
let newDatesTemplate = kendo.template($("#dates-template").html()),
newDates = newDatesTemplate({}),
$newDatesDOM = $(newDates);
$newDatesDOM
.appendTo('#container')
.find('input')
.kendoDatePicker();
});
});
</script>
<script id="dates-template">
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
</script>
</head>
<body>
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
<div id="container"></div>
<button>Add more dates</button>
</body>
</html>
Explanation:
The template:
<script id="dates-template">
<div>
<input type="date" class="from">
<input type="date" class="to">
</div>
</script>
A simple example of the template.
Adding more elements:
let newDatesTemplate = kendo.template($("#dates-template").html()), // Creates the template with the `script#dates-template` content
newDates = newDatesTemplate({}), // Runs the template
$newDatesDOM = $(newDates); // Creates a jQuery object with the result
$newDatesDOM
.appendTo('#container') // Appends the new DOM elements to a target element
.find('input')
.kendoDatePicker(); // Inits the widgets
Now this will do the magic you want:
$(document).on('focus', '[data-role="datepicker"]', function(index, el) {
$(this).data("kendoDatePicker").open();
});
That event delegation will execute an event in the original elements and in the dynamically added elements because it is bound to the document.
Demo
Right off the bat, I can see you're assigning two different divs to the same variable declared twice.
var datepicker = $(".from").data("kendoDatePicker");
var datepicker = $(".to").data("kendoDatePicker");
Start off by declaring it separately:
var datepicker_from = $(".from").data("kendoDatePicker");
var datepicker_to = $(".to").data("kendoDatePicker");
I have to two textarea each with same button class .addText. I am trying insert word hello world to the textarea where the cursor in, this event would trigger via shortcut key ctrl + i.
$(document).ready(function() {
$(window).keydown(function(event) {
console.log(event.keyCode);
if (event.ctrlKey && event.keyCode == 73) {
$(".addText").trigger("click");
event.preventDefault();
}
})
$('.addText').click(function() {
// Add Text 'hello world' to input textarea that curssor currently in
$(this).next().val('hello world');
})
});
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa1"></textarea>
</div>
</div>
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa2"></textarea>
</div>
</div>
</div>
</div>
However, Currently, the word hello world is inserted into both textarea when shortcut key ctrl + i is pressed.
I could not differentiate which textarea cursor is currently in, I found one source here: Insert text into textarea at cursor position (Javascript), but it does not apply to my case.
How can I check which textarea that has cursor in and apply an action to it? Thanks.
You could just do the reverse of your button click.
Instead of doing next, do prev on the target element.
eg.
$(document).ready(function() {
$(window).keydown(function(event) {
console.log(event.keyCode);
if (event.ctrlKey && event.keyCode == 73) {
event.preventDefault();
$(event.target).prev().trigger("click");
}
})
$('.addText').click(function() {
// Add Text 'hello world' to input textarea that curssor currently in
$(this).next().val('hello world');
})
});
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa1"></textarea>
</div>
</div>
<div class="col-xs-6">
<div class="ta1">
<button class="addText">Add Text</button>
<textarea cols="30" rows="10" class="inputTa2"></textarea>
</div>
</div>
</div>
</div>
i try to fill/overwrite(if exists) an input field from an colorbox popup search form, but i dont get the variable back into my input field.
this is the mainpage:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<script>
$(function() {
var kid = $('#Kontaktname').val();
$("#Kontaktname").colorbox({
href:"contact_search_popup.php?s_contacts_id=" + kid,
iframe:true,
innerWidth:850,
innerHeight:400,
opacity:0.1,
overlayClose:false,
});
});
</script>
<p><input type="text" id="Kontaktname" value="1001" name="Kontaktname"></p>
<p id="test">
return value:
</p>
this is colorbox popup page:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<input type="submit" id="formSubmit" class="test" value="{Label1}" name="formSubmit">
<script>
$(document).ready(function() {
$("input.test").click(function() {
window.parent.$("#kontaktname").text($(this).val()); // works
window.parent.$("#test").text($(this).val()); // dont work !!!
parent.$.colorbox.close();
});
});
</script>