Develop Reference

javascript keyup not working with "array"

I have this small function:
$('#part[en]').keyup(function(){
//console.log($(this).val());
$slug = slugify($(this).val());
$('#part_slug').val($slug);
})
It doesn't work. After some try and error, I understood the problem is with the ID (part[en]). If I change it to "part" (and change it in HTML too) it works.
My problem is that I need to use part[en] since I need to work them as an array with PHP.
How can I achieve this?
Also, I need to do the exact same thing with 2 ID's (keyup or change). There's any way to make something link
part[en].keyup OR part2[en].keyup
Or I need to create two seperate functions?
Thanks in advance.

Jquery map won't retrieve selected options; always empty? Appears to skip variable, Works on jsfiddle, No console errors

SOLVED:
Final fiddle:
http://jsfiddle.net/AcfUz/220/
*used the selector indicated in the chosen answer and moved the console.log value ahead of the text input the selected options were to be listed in and boom--working as it should!
Please reference this fiddle:
http://jsfiddle.net/AcfUz/218/
jQuery(document).on('click', '#go', function() {
console.log("woo");
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
//var selMulti = jQuery("#inf_custom_Choosealocation_select :selected").val();
console.log(selMulti + "hmm...");
console.log("hootie");
//jQuery("#inf_custom_Choosealocation").val(selMulti.join(", "));
jQuery("#inf_custom_Choosealocation").val(selMulti);
console.log("who");
});
This works perfectly on fiddle but no matter how many iterations I try it won't work on the live site. The variable containing the desired values is always empty. I can't for the life of me figure out why?????
Can anyone shed some light in my hour of desperation? It's been 7 hours and I need to solve this before the morning.
I suppose to expand on this--the code in the fiddle is the code I include in the site. The form and then the script before the closing body tag. The form is dynamically loaded (takes about a second). What I need to accomplish is grabbing whatever values a user selects from any of the multi select fields (I'm starting with the one) and copy those as a comma separated list into another single line text input. The fiddle works splendidly, but I'm coming up empty on the live site. I just returns blank/empty--it doesn't give me any console errors what so ever (save for a missing img) and I can see my console.log checkpoints.
Here is the live link:
http://goo.gl/ll1Hz4

On the live website if I try $("#inf_custom_Choosealocation_select option") in the console, the options are listed twice. Using $('select') 2 #inf_custom_Choosealocation_select are returned. (although I didn't see 2 instances in the page source) ($("#inf_custom_Choosealocation_select"); returns one, but that uses getElementbyID and skips the search). Perhaps the second select is created by some sort of overlay?
All in all, I didn't search any further where the 2nd select come from. A quick fix would be to use a selector searching the attribute. The following selector worked while testing on the live site:
$("select[id=inf_custom_Choosealocation_select] :selected")
But that might be only a temporary work around. You'll probably want to find the ghost select culprit too ;)

You are not using jQuery map in fiddle, where as you have jquery map in your live code...
Try to update your live site with the code you have in fiddle.
Live Code: (has jQuery map)

So, yeah, I am not sure why :selected isn't working in your case, but you can try to go through the options and check manually... jQuery("#inf_custom_Choosealocation_select option").each(function(i, o){ console.log(o.selected) })

Try wrapping your code inside
jQuery(document).ready(function(){});

Instead of using
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
use
var selMulti=jQuery("#inf_custom_Choosealocation_select").val();

Disable dates in Protoplasm DatePicker

I am using the ProtoPlasm Datepicker in one of my apps, now I want to disable all the dates earlier than today.
I used the following code:
Protoplasm.use('datepicker').transform('input[type="text"].xyz_datepicker', {dateFormat: 'MM/dd/yyyy'});
But I'm still unable to do it. Any help?

I am not familiar with Protoplasm; however, according to their doc, you should be able to do this:
Protoplasm.use('datepicker')
.transform('input.datepicker', { 'minDate' : '1/1/2016' })
Ref. http://jongsma.org/software/protoplasm/control/datepicker
However, I don't recommend this approach. I recommend just using standard jQuery UI as outlined https://jqueryui.com/datepicker/#min-max

I have fixed the issue by adding the following line of code to my js file:
Protoplasm.use('datepicker').transform('input.datepicker', { 'minDate' : '1/1/2016' })

Want to turn this pop-up effect into a Plug-in

Here's a link to the to my fiddle with the example: http://jsfiddle.net/stavros917/AaQpZ/
So I have put together this effect and pop-up box that can be used for different things through out an application I'm working on with a team. I want this pop-up to be easily used through out the app, so I'm trying to turn it into a custom plug-in that the other devs I work with can use. I would like to be able to pass the function call some different values so that they are not having to re-create the html every time. Looking to do something along the lines of this when I call it:
$('popMe').popUp({
headLine: 'headline text',
buttonOneTxt: 'some text'
buttonOneImg: 'foo.jpg'
buttonTwoTxt: 'some more text'
buttonTwoImg: 'img.jpg'
});
Any help would be awesome! Still pretty new to making plug-in's so I'm a little stuck in how to approach this. I'm sure there are a lot of downloadable one's out there but I genuinely want to learn how it's done. Thanks again!

You just need to wrap everything in a simple command structure of
jQuery.fn.popUp = function () {
I've thrown it all together in a function you can reuse called popUp();. I didn't fix some erroneous calculation errors and re-run misnomers -- those are up to you. goodluck.
http://jsfiddle.net/AaQpZ/1/
EDIT 1
Updated again to allow for dynamic fields to be populated. Please see the fiddle here, and scroll down the script to see how the a function invokes the HTML and passes it as parameters to the popUp() function.
http://jsfiddle.net/AaQpZ/2/
EDIT 2
Sigh...I forgot to stop propagation and it was having appending issues on the close/enter functions. New code updated to stopPropagation() added...
http://jsfiddle.net/AaQpZ/3/

jQuery use .live with jquery-keyfilter plugin

I am using jquery-keyfilter plugin to mask textbox inputs.
However the textboxes are added to the page dynamically and I cannot figure out how to apply the key filter to them.
I have tried
$('#myelement').live('keyfilter', myFunction );
Also
$('#myelement').live('keyfilter', /regex/);
Kai: comment helps, but it seems my problem is still not solved
I want a keyfilter like this
(/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
that will only accept currency/money values but it seems like jquery-keyfilter does not work with this regex. Is this something I am doing wrong or should I look at using another plugin or just code it myself?

"keyfilter" is not an event and you can NOT use live().
According to API of the plugin, it should be
$('#myelement').keyfilter(function(c) { return c != 'a'; });
$('#myelement').keyfilter(/[\dA-F]/);

Below solution works for non-first character
$("#myelement").live("keypress", function(){
$(this).keyfilter((/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
});
Below solution works for input field already clicked
$("#myelement").live("click", function(){
$(this).keyfilter((/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
});