Develop Reference

Want to take a radio and checkbox value from one form to another

I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.

Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.

Creating input text field on marked checkbox in JQuery

I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.

One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!

Multiple Select CSS Conditional Formatting

I've been looking for a way to style select boxes based on their selected option. The data is coming in from Django so there are populated fields on load.
I've been using this javascript/jQuery solution with some success.
Style <select> element based on selected <option>
The basic idea is that the selected option value is moved to a class in the select box so you can style off that class.
What I've done here is duplicate the code into two sections. Once to run on load and another to run on change.
$('select').attr('class', '').addClass($('select').children(':selected').val());
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
This doesn't seem to work for multiple select boxes on load.
What happens is the on load code finds the first select box and then adds the class to all select boxes on the page, so basically it doesn't iterate over all select boxes and run one by one.
The second bit runs fine based on changing the select value.
Here is a fiddle http://jsfiddle.net/9sx6fos7/
As you can see both boxes take the class of the first on load.
Thank you!

How to add a new row of text box and drop down?

I'm currently working on a rails project.
I have a text_field and a select_tag on the same row. I want a new row of text box and drop down list to be created whenever I have at least one character typed in the current text box. But I'm not sure how to do so. I assume I'd need to use jquery? But I'm still a newbie with web programming...
Please help! Many thanks!!!

You'd add fields and then apply a hidden value to them using jQuery's document ready function. Then apply a keyup function to the existing field you want it to trigger off of that calls show on the hidden item.
Here's the jquery I used in a wordpress page to do exactly that:
$(document).ready(function() {
$("#fieldtohide").hide();
$("#nonhiddenfield").keyup(function() {
$("#fieldtohide").show();
});
});

JQuery clean autocomplete combobox value

I used a jquery combobox for autocompletion and I needed to clean its value.
I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.

You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');

To clear just only one combo you must select it with it's id:
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
EDIT if you want to make two buttons (one for each combobox) you could do:
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/

Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:
<select class="combo">
...
</select>
Clear
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
Clear
</span>
You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
Two suggestions:
Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.

Well, in the example the following would only clear the last combobox:
$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:
$('.ui-autocomplete-input').first().focus().val('');

You can clear it in event "close" of the autocomplete
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});

How to give clear button for autocombobox please tell me
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');