Develop Reference

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this

First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

Dynamically change parsley rules for a field

I have a task which I can simple describe: I have a dropdown with, say, 3 positions. And one field.
If option0 is selected, then no validation for a field required.
If option1 is selected, then field should be numeric.
If option2 is selected, then field should match some regex.
How can I achieve this behaviour with Parsley?
The only way I found for now is remove a whole parsley, change HTML and then reinit it:
$(myDropDown).change(function() {
$('form').parsley().destroy();
var input = $(this).parent().find(".my-cool-input");
//changing input attributes based on selected value
//reinitialize parsley
$('form').parsley();
});
But here I change global state of whole parsley while I want to change one field validation only.
Another option is writing a custom validator, but I want to reuse standard email and others validation rules and messages, if possible.

Just change the field attributes and trigger('input') on it.

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?

Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.

You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.

How to select all form fields within a given form element with Prototype?

My question might seem trivial but I can't find resources about selecting elements that are descendant of a given element.
I have a form in which I want all fields (they should be all the inputs and selects that are child of the form tag, except buttons) to submit the form when ENTER key is pressed. Actually I require to call a custom Javascript method to submit the form, instead of merely submitting it the plain old way.
This because I need to raise a different Stripes ActionBean event depending on the button being hit (or in the case of enter key I know what event to fire a priori).
I can apply a custom CSS class to all fields (booooooooooooring) and I can select all form fields in a page with $$('input[type!=button], select').
How to constrain the selection to elements that descend from a given form tags (which has an ID?). The selection will be used to handle the keyup event

$$('input[type!=button],select', '#formid')
* selects all elements.

Something along the lines of
$$('#formId input[type!=button],#formId select')
Haven't been using prototype but i assume most CSS selectors work

Removing Form elements .hide() Removing Values?

I use this script to show an additional language menu additional, which works great however if the user selects a value then decided they don't want to add an additional language an clicks "Remove" the form field is hidden however the value is still there and is submitted with the form.
Is there away to change the field value to when the user clicks the "remove" button or remove the field completely?
$(document).ready(function(){
//Hide div w/id extra
$(".smalla").hide();
$("#langadtional").hide();
$("#langadd").click(function(){
$("#langadtional").show();
});
$("#langrem").click(function(){
$("#langadtional").hide();
});

If you want to remove the element, use remove:
$("#langadtional").remove();
If you want to disable a form element:
$("#langadtional").attr("disabled", "disabled");
To enable:
$("#langadtional").removeAttr("disabled");

You can clear the element's value with val() when hiding it:
$("#langadtional").hide().val("");
Removing the element is also possible, as Linus G Thiel demonstrates in his answer, but that would mean you'd have to completely recreate the element if your Add button is clicked further down the line.