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>
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 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");
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"/>
I want to clone a div by clicking on ADD link. But when a div gets cloned then a new cloned div ADD link is not behaving like the previous ADD link. I want to achieve this functionality. Please help.
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".add_option").click(function(){
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
</script>
<div id="cloned">
<input type="checkbox">
<input type="text">
<span class="add_option">ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
You need to Event delegation for attaching events to dynamically added elements:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function(){
$("body").on('click','.add_option',function () {
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
NOTE: Also the Ids you give to your elements should be unique, As in your case the same id is passed to every div that you clone!
There are some mistakes:
replace id to class. then, use $('.cloned').
move add_option class name to <span>ADD</span>
when you click a use return false
just use to copy this code $('.cloned:last').after($('.cloned:last').clone());
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on("click", ".add_option", function () {
console.log("clicked !");
$('.cloned:last').after($('.cloned:last').clone());
return false;
});
$(document).on("click", ".remove-option", function () {
$(this).closest(".cloned").remove();
return false;
});
});
</script>
<div class="cloned">
<input type="checkbox">
<input type="text">
<span>ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
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>