Using div's instead of select's - javascript

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.

Related

how to use querySelector on data-id and input type

I want to set className for 2 input types, first is an input box and other is a button. Initially, both are hidden, and on click of a button, I want to show both of them. The catch here is that there are multiple grids being displayed (one for each record) and depending upon where the click happened, I'll be displaying their respective input box and button.
Now, I'm using below to display the input box:
this.template.querySelector(`[data-id="${targetId}"]`).className = "show";
I'm populating the data-id attribute on input type with record specific value to differentiate where the click occurred.
Now, if I want to hide the button, I'll have to use a similar statement, but I need to still use data-id attribute value. How can I use both data-id and type ="button" with querySelector?
This works with "document.querySelectorAll", not positive about "this.template.querySelectorAll".
I am assuming that the input fields are always in the same order (input,button) and that they both have the same "data-id" value. And that it is unique to them (there are only two objects with this data-id value on the page).
onclick='x=this.template.querySelectorAll(`[data-id="targetId"]`);x[0].type="text";x[1].type="button";'

php drop downlist with 2 values the 2nd value post to hidden field

I've got a regular drop downlist for selecting the countries name as text and countries_id as value.
Example:
<option value="1">Afghanistan</option>
Now I need an hidden form field with the ISO2 code for the country.
Example:
<input type="hidden" name="iso2" id="inputIso2" class="form-control">
And when the country is changed by the drop downlist, the hidden field should also change.
I've added the ISO2 to the option like this:
<option value="1" data-iso2="AF">Afghanistan</option>
But how do I pass it to the hidden field?
Or is there a better way of doing this?
The ISO2 field is being used by another script in the form, so it should work pre post.
This isn't really a PHP problem so much as it is a javascript problem. You need to put an event listener on your select element and when it changes, grab data-iso2 and apply the value to the hidden field.
Using jQuery, you'd do this:
$("#country").change(function(){
var iso2 = $(this).find(':selected').data('iso2');
$("#inputIso2").val(iso2);
});

jquery enable/disable fields based on variable

I have a variable that i am using to disable input fields across all field sets in a page.
$("[eventDisabled='true'] input").attr('disabled', 'disabled');
However i need to enable certain input fields that are in some specific div, i have placed those input fields in some other div
When i use below code to enabled them, it is not working
$("[eventDisabled='true'] #someotherdiv input").attr('enabled', 'enabled');
Any help
One way to suppress inputs within a specific container by using the css psudo-class :not(selector) in your jQuery selector as follows:
$('div:not(#someotherdiv) input[eventDisabled=true]')
This will select all inputs that has an attribute of eventDisabled with a value of true and that is not a child of a div with an id of someotherdiv

show empty value in html select element

I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here

toggle "required" attribute (of a hidden field) when an option is selected with jQuery

I'm trying to do two things:
Show a hidden field if an option is selected, and hide that field if not (I have this part working - although if I use a variable it doesn't work)
If the option is selected, add a required attribute to the field that was displayed. When another option is selected, remove the required attribute.
Here's a fiddle link:
http://jsfiddle.net/tucsonlabs/QCY2Q/
if ($("#aCard").filter(":selected")) this will always pass through because jQuery always return an object and anything non zero or not null or undefined passes through if block.
Use this if ($("#aCard").filter(":selected").length > 0), you can even use variable to show the required element in your fiddle take a look.
http://jsfiddle.net/QCY2Q/1/

Categories

Resources