Develop Reference

How to add search result to textbox when clicked in (like Multi-select boxes (pillbox))

i have been stuck with this , when i click the first button then the second button i need the value to be appended with each other not overwritten .
you can find below the image link .
thank you
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result Button", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
// $(this).parent(".result").empty();
});
});
</script>
i need the two name to get inside of textbox

Are the results of the operator clicks to be placed into
a single line (input) element or a multi-line (textarea) element?
First guess based upon code given would be
var resultDropdown += $(this).siblings(".result");
BTW, welcome to the forums.

Select2 add/update on input change

I have a select2 element and an input element as follows...
Label: <input class="default-ele" type="text"/>
<select class="some-select">
<option>-- None --</option>
</select>
and some JS/JQuery as follows...
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('change', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});
That all works except that if you enter a value into the input then click the select with the cursor still in the input, the value is not there until you move focus away from the select and back to it. Is there a timeout or some other way to get the value to display when immediately clicking on the select after the input changes?
TIA

I would suggest to use keypress event to trigger 'select' refresh functionality.
Something like below.
This should update trigger callback on input as soon as you lift key.
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('keyup', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});

Javascript for each textbox depend on drop down list

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;
}

Append Text to Textbox on Click

I currently have a selection of buttons and on click of a button I want to add the text from the button into a text-box. Every time I click on the button I want to be able to append on to whatever I have in the input field.
What I currently have
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($(this).text());
});
What I'm Aiming for
$('#js-AddFilterOpenBracket').click(function () {
$(this).text().appendTo($('#js-FilterString'));
});

No need to use appendTo as it should be used for elements. Rather, manually append to the current value then set it
$('#js-AddFilterOpenBracket').click(function () {
var currentVal = $('#js-FilterString').val();
var newVal = currentVal + $(this).text();
$('#js-FilterString').val(newVal);
});

May not be the bast way but you could do this
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($('#js-FilterString').val() + $(this).text());
});

How to know with jQuery that a "select" input value has been changed?

I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});

First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});​
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});​

You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change