I would like to get the value of an input and return it to a span. I would like to update the span each time the input is changing. The problem is that i will use it for a colorpicker so the user will not usualy write the color value(maybe paste it). So everytime the input textfield will be updated by the colorpicker js i want to update my own field.
I created a simple code to help you understand what i want to do.
Pressing the + you will change the value of the input field and i would like to get that value and print it in the span. Thank you.
HTML ::
<div>
<input type="text" class="mariinsky" /><button id="inside">+</button>
</div>
<button id="outside">Button</button><br />
input value = <span></span>
JS ::
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( '.mariinsky' ).change( function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
http://jsfiddle.net/existence17/9V8ZU/1/
Add .change() to the end of your '+' handler:
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i).change();
i++;
});
That will force the change event to fire and then your code will update the span.
For live DOM changes, use the jQuery on function - the following code would work in your case:
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( 'button#inside' ).on('click', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
jQuery doesn't automatically trigger events through code. You need to do so manually using the .trigger() method.
Adding one line did it for me: jQuery('.mariinsky').trigger("change").
Here's a working example: http://jsfiddle.net/9V8ZU/2/
Also a useful question for reference: How to trigger jQuery change event in code
please use this :
$( '.mariinsky' ).on('keypress keyup keydown click copy cut paste', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
Fiddle example
all the rest of the provided answers aren't covering the entire options.
Related
In my page I have a jQuery snippet:
$( document ).ready(function() {
$("#URL").on("input load", function(e) {
console.log(e.type)
....
});
});
lower on the page I have..
<input id="URL" type="text" value="<?=$_GET['URL'];?>">
to set the value to the $_GET['URL'] value if it is set.
For some reason, the jQuery is never triggered unless I go and change the input.
Is there a way to have the jQuery trigger when I set the value via PHP?
Trigger input change on load:
$("#URL").trigger('input');
I believe that you need trigger an action like input, for example:
$( document ).ready(function() {
var fn = function(e) {
console.log(e.type)
//...
$("body").append("<p>"+e.type+"</p>")
};
$("#URL").on("input", fn);
$("#URL").on("load", fn);
//Force the execution on load
$("#URL").trigger('input');
});
Fiddle: https://jsfiddle.net/andersoncontreira/u8jLpj1g/3/
As you can see on these photos, I have made an onclick event that checks the value of the first input text field . Even if I change it, it will still give the old value.
Here is my function:
$(document).on('click','#editcustomer-btn-save',function(e) {
var x = $('#id1').val();
console.log(x);
e.preventDefault();
return false;
});
I note your edit screen appears to be in a modal.
Make sure that in your DOM there aren't two IDs with the same name. (One in your main page, and one in the modal)
Are you sure that it doesn't upgrade ?
Try with this
function displayVals() {
var x= $( "id1" ).val();
console.log(x);
}
$( "input" ).change( displayVals );
displayVals();
I have the following script which fetches data (branch names) asynchronously via database:
$(document).ready(function () {
$("#pickup").on('keyup',function () {
var key = $(this).val();
$.ajax({
url:'modal/fetch_branch.php',
type:'GET',
data:'keyword='+key,
beforeSend:function () {
$("#results").slideUp('fast');
},
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
// return false to prevent default action
return false;
});
}
});
});
});
HTML
<input type="text" class="form-control empty" name="keyword" id="pickup" placeholder=""/>
Everything is working perfectly, When user clicks link the data (branch name) gets added to the text input field, which is exactly what needs to happen, however...
My Problem
After user has clicked on desired link (branch name) I need the remaining links (data / branch names) to get removed...
As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...
Any advice how I can achieve the following greatly appreciated.
UPDATE
Here is the fetch_branch.php file as requested:
if(mysqli_num_rows($result) < 1 ) // so if we have 0 records acc. to keyword display no records found
{
echo '<div id="item">Ah snap...! No results found :/</div>';
} else {
while ($row = mysqli_fetch_array($result)) //outputs the records
{
$branch = $row['location'];
echo '<a style="cursor:pointer">'.$brach.'</a>';
echo'<br />';
}//while
}//else
}//if
I'm making a different assumption from the other answers here, because I can't understand why you'd want to remove the other links in the dropdown, after clicking one!
As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...
If that is indeed the case, you'll want to accept #acontell's answer.
However, if you'd like the clicked link to disappear from your list, you might try something like this in the click handler:
$("#results").on("click", "a", function() {
$this = $(this);
$("#pickup").val($this.text());
// Remove the linebreaks output by modal/fetch_branch.php
$this.next('br').remove();
// Remove the clicked <a> tag itself
$this.remove();
// return false to prevent default action
return false;
});
In case you'd like the whole dropdown to disappear when clicked, do this: (which, I think is common, no?)
$("#results").on("click", "a", function() {
$("#pickup").val($(this).text());
$("#results").slideUp();
return false;
});
try $(this).siblings().remove(); inside your click event. so your function should look like this,
$(document).ready(function () {
$("#pickup").on('keyup',function () {
var key = $(this).val();
$.ajax({
url:'modal/fetch_branch.php',
type:'GET',
data:'keyword='+key,
beforeSend:function () {
$("#results").slideUp('fast');
},
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
//------------------
//only this line is newly added
//------------------
$(this).siblings().remove();
//------------------
// return false to prevent default action
return false;
});
}
});
});
});
After selecting the item and setting the text to input add the following code snippet
$(this).siblings().remove();
This removes all the sibling li s of the selected item
or
$( "#results a" ).not(this).remove();
If I'm not mistaken, I think it could be done with a little modification to your code:
...
success:function (data) {
$("#results").html(data);
$("#results").slideDown('fast');
// use `on` as elements are added dynamically
$( "#results" ).on("click", "a", function() {
// take `text` of a clicked element and set it as `#pickup` value
$( "#pickup" ).val( $( this ).text() );
// --MODIFICATION-- Remove all elements except this.
$("#results").html(this);
// return false to prevent default action
return false;
});
}
...
The idea is to substitute the html of the link container (it contains all the links) with the HTML of the clicked link. In essence, it will remove all and leave only the clicked one.
Here's a fiddle (without AJAX) that represents the idea. Hope it helps.
Please check this link for a working demo. Click Here
I used dummy data and use changed keyup event to focus for testing you can modify it more (if this helps).
I hope this will help you.
Thanks,
I don't understand you. However, if you mean hide result after link clicked, you can use
$("#results").slideUp('fast');
within onclick event.
Also you can remove other links and live clicked.
$("#results").on("click", "a", function() {
$("#pickup" ).val($(this).text());
$(this).addClass('selected');
$("#results a:not(.selected)").remove();
$(this).removeClass('selected');
return false;
});
I make input form using static row in 7 rows. How can I get selected value in each textbox when drop down list selected? I tried to use jQuery to do it, but my code is getting error (all textbox changed). So, below is my jQuery code:
<script>
$(document).ready(function() {
$('[name="nm_pot_part_shortage[]"]').on('change', function() {
$('[name="nm_maker[]"]').val($(this).val());
});
});
</script>
Image of my form:
You must escape bracket notation by using double slashes for selector having name like $('[name="nm_pot_part_shortage\\[\\]"]'), otherwise you will get an error, see following code :
$( '[name=nm_pot_part_shortage\\[\\]]' ).on( 'change', function () {
// get current value
var selectVal = $( this ).val();
// find the input by traversing up the parent first using .closest()
// and use .find() to find particular input exist on the same rows with
// select element, so this never go down to match another input exist on
// another rows
$( this ).closest( 'tr' ).find( '[name=nm_maker\\[\\]]' ).val( selectVal );
});
DEMO(example given were using table)
Better case is just give all the select and input with the same class name for each element. As example give class name myselect to select element and myInput for input element, at the end JS code would be :
$('.mySelect').on('change', function () {
var selectVal = $( this ).val();
$( this ).closest( 'tr' ).find( '.myInput').val(selectVal);
});
Native Javascript:
1) Give each dropdown an ID. This can be done in the HTML or dynamically in javascript.
2) Assign a function to each dropdown for an onclick event.
3) Retrieve the value as such:
function dropdownClicked(){
var ID = this.id;
var element = document.getElementById(ID);
var value = element.value;
}
So I am trying to edit the colour of a button when clicked.
here is my html and javascript
html:
<button type="submit" class="btn" id="hello-1" value="hello">Submit</button>
Here is my JS:
//Name:buttons.js
//Created by: Jonathan
//Created on: 25/09/15.
'use stict';
$( document ).ready(function(){
$('hello-1').click(function(){
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
I can't understand why it's not working. Any help?
Your selector is wrong. When you're selected an element by id with jQuery, you must add the # character before the id.
So instead of $('hello-1') use $('#hello-1')
$(document).ready(function() {
$('#hello-1').click(function() {
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
Edit:
Also when you are inside the click event handler you don't need to select the element again because this will point to the target element so your event handler can be as follows:
$(document).ready(function() {
$('hello-1').click(function() {
this.style.background = "linear-gradient(#337AB7,#215480)";
});
});
If you're using jQuery why not use it to change css? Also you're missing the #.
$( document ).ready(function(){
var $button = $('#hello-1');
$button.click(function(){
$button.css('background', "linear-gradient(#337AB7,#215480)");
});
});