Develop Reference

Event Handler for Input values and select option together

I have multiple input values with one select box option and validating and capturing all data based on keypress event. My issue is get all data input fields and select box and send using keypress event
To find all input values
var all_details = $('.myform');
var all_inputs = all_details.find('input');
var all_details_complete;
to get select values
var Country = $('#country').children("option:selected").val();
Adding few more additional data
var some_data = {
Country: Country, //select box title displaying on image
ReceiveOffers: 0
};
Bind event! With following function I am getting all input field data except select box data. how can I add select change event and have tried following?
all_inputs.on('keypress onchange', function() {
all_details_complete = false;
_.each(all_inputs, function (input) {
var $input = $(input);
all_inputs[$input.attr('name')] = $input.val();
if ($input.val() === '') all_details_complete = false;
});
if (all_details_complete) {
// post data successfully
}
});

That is because there is no onchange event, but a change event instead:
all_inputs.on('keypress change', function() {
// Rest of the code here
};
However, for ease of standardization it's way easier to simply listen to the input event:
all_inputs.on('input', function() {
// Rest of the code here
};

how to trigger event on select2

hi guys i have some select tags in my selling item page. first one created by HTML and others are created by jquery append when user click on a button add more
<select id='code0' onclick='getvalue(this)'><option>1</option></select>
and in document.ready im applying select2 on this select tag
$(document).ready(function(){
$("#code0").select2();
})
function append(){
$("table").append("<tr><td><select id='code1' onclick='getvalue(this)'><option>1</option></select></td></tr>");
$("#code1").select2();
}
next appended select will have id of code2. I'm managing it without any issue
Now the function getvalue() is working fine before applying select2 but after applying select2 the select is not triggering click or any event. how can i trigger event after applying select 2;
function getvalue(item){
alert("event triggered"); // to check that jquery called this function or not
console.log(item.value);
}
clicking on select tags is not calling get value function;
whenever the page loads i can see this error on console
jQuery-2.1.4.min.js:2 Uncaught TypeError: Cannot read property 'call' of null
at Function.each (jQuery-2.1.4.min.js:2)
at MutationObserver.<anonymous> (select2.min.js:2)

Once you have linked select2 to existing select.
select2 override select and create list(li) for all options and select is hidden.
So any event added to select will not work directly.
Select2 plugin provides functions which you can use to server your need
Assign select2 ele as a var and use methods given by plugins
var select2Ele = $("#code0").select2();
select2Ele.on("select2:select", function (event) {
// after option is selected
});
select2Ele.on("select2:selecting", function (event) {
// before selection
});
For multiple select2 above code will work like this. In log method we have event which can be used to get current element value and other stuffs
$eventSelect.on("change", function (e) { log("change"); });
function log (name, evt) {
if (!evt) {
var args = "{}";
} else {
var args = JSON.stringify(evt.params, function (key, value) {
if (value && value.nodeName) return "[DOM node]";
if (value instanceof $.Event) return "[$.Event]";
return value;
});
}
var $e = $("<li>" + name + " -> " + args + "</li>");
$eventLog.append($e);
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
$e.remove();
});
});
}
Refer select2 doc

Need help on my jQuery script

I was able to make a dyanamic dropdown subcategory dependent on the selected category which you can see it here.
Now, my problem is that if the category has defined a selected value upon loading which is defined by a REQUEST, just like this (take note on the posted_parent_id request). How can I make a call on my subcategory file(get_child_categories.php?parent_id=6) if my jQuery is like this below:
$(document).ready(function($) {
var list_target_id = 'list_target'; //first select list ID
var list_select_id = 'list_select'; //second select list ID
var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#'+list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({url: 'get_child_categories.php?parent_id='+selectvalue,
success: function(output) {
//alert(output);
$('#'+list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
});
Does my question is quite clear? I am still learning this kind of stuff right now. There's something to be defined somewhere within the if (selectvalue == "") statement in case the category dropdown was pre-selected upon loading the page?

Simplest way is to trigger the change event manually once the DOM has been loaded.
// Assuming that -1 is the default selected value
var selectvalue = $('#'+list_select_id).val();
if(selectvalue != "-1")
{
$('#'+list_select_id).trigger("change");
}
Append the code to the end of the $(document).ready(function(){ ... })
So, your code becomes the following
$(document).ready(function($) {
var list_target_id = 'list_target'; //first select list ID
var list_select_id = 'list_select'; //second select list ID
var initial_target_html = '<option value="">Please select a subcategory...</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
// ... your logic here
});
// Check if value is prefilled.
var selectvalue = $('#'+list_select_id).val();
// Assuming that -1 is the default value
if(selectvalue != "-1")
{
$('#'+list_select_id).trigger("change");
}
});

The first thing that you have to do is to move that AJAX functionality out of the .change event.
Change event fires only when the dwopdown value is changed and if the dropdown renders with a value as selected one, it wont be handled by change event.
Make it as a separate function and call that on page load and on .change event.
** NOT A COMPLETE CODE **
$(function(){
var dropdown = $('#'+list_select_id);
if (dropdown.val() !== "") {
initiateAJAX(dropdown.val());
}
dropdown.change(function() {
initiateAJAX(this.value);
});
function initiateAJAX(param) {
}
});

Passing value from bind function of select form

I use a select/option form that has been 'bind'in jsniceit.js to improve form format. It looks nice rather than standard form. But I can not use OnClick function on the form to pass data for ajax call. My form is to show city in a dropdown select form after selecting a state.
My question is, how to pass value of select/option form from this (just showing parts of the jsniceit.js) where bind is located.
$(ctrl).find('option').each(function(idx, item) {
nCtrl.find('ul').append('<li option="' + $(item).attr('value') +
'">' + $(item).text() + '</li>');
});
nCtrl.find('li').each(function(num, elem) {
$(elem).bind('mouseenter', function() {
$(this).addClass('active');
});
$(elem).bind('mouseout', function() {
$(this).removeClass('active');
});
$(elem).bind('click', function() {
nCtrl.find(cite).text($(this).text());
$(ctrl).val($(this).attr('option'));
nCtrl.find('ul').fadeOut();
alert('option'.value);
});
});
I was trying to pass value with alert, but it returns undefined.

gravity forms Displaying a message from dropdown select

Is it possible to display message/description when a user chooses an option from a dropdown menu.
Example:
if user chooses "London" from the dropdown menu then we want to display a message from the a database/file relating to "London" ideally using Ajax so not to reload the page.
Thanks in advance.

Yes it is possible. You can add a CSS Class Name to the select in Gravity Forms. This will make it easy for you to add an event listener via your custom Javascript/jQuery. You will need your ajax endpoint of course, but you can add a listener like so:
(function ($) {
$(function () {
// Set your variables here
var select_class = 'my-select-class',
endpoint = '/my_endpoint.php',
notification_class = 'notification-for-select';
var $my_select = $('.' + select_class);
$my_select.parent().prepend('<div class="' + notification_class + '"></div>');
$my_select.change(function (e) {
var my_data = $my_select.val();
$.post(endpoint, my_data, function (data) {
$('.' + notification_class).text(data);
});
});
});
})(jQuery);