Develop Reference

Jquery script - Issues with script not filling text input from select list

Almost got my script running but I hit a roadblock. What I am currently trying to accomplish is filling a select list based on text input and vice versa. In my web application I have a text input which is read only and is usually dynamically populated and then transferred over to a multi select list where end users can only modify the text input from the multi select list.
Here is what I had so far: http://jsfiddle.net/akhyp/1983/
$("#hidden_input").val(function(e){
var ar = $(this).val().split(",");
$("#selected_items option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
$('#selected_items').change(function(){
$('#hidden_input').val($('#selected_items').val());
});
Now im still learning jquery but looked at the jquery API documents on events and .val seem to be the best fit for capturing my text input. However got some unexpected results where jquery removes the values that were dynamically added however it does end up properly selecting the appropriate option from my multi select list.
Im thinking the problem is maybe with my .change event of the select list where its not returning the data back to input. What I need at the moment is something like so:
-If the text input is null then ignore.
-If the text input is already filled then capture value and transfer it to the select list accordingly.
-If user select new options from the multi select list then capture new selected options and transfer them over to the text input.
I know its probably something I may have overlooked but I would appreciate any support on this.

change form based on drop down menu selection

I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?

What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks

So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!

Dropdown form field

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?

I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...

Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

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('');

Javascript/C#: Appearing Textarea OnClick

I have an html list. Within this list are a series of images, some information and a button. When the user clicks the button, I want a textarea and a button to appear below the associated image within the list. The user then fills out the textarea with some machine learning feedback and clicks the button to send a postback to the server.
How do I write Javascript that will appear on a button press, but is still at the same time associated with the parent image?
I would like an answer in straight Javascript, not jQuery, as I'm still learning Javascript. I'm using C# 4.0 and ASP.net.
I have several possible implementation ideas:
Create a Javascript function that writes html using Response.Write that contains the textarea and button. I couldn't use an asp:button so I don't really know how I would accomplish a postback.
Have a single hidden asp:button and asp:textbox that get populated when the magic appearing button is pressed. The magic button would pass an id to the asp:button and activate a click. I might need a hidden label to store the value of the id.
I think #2 is the best and probably easiest method, but I don't know the best way to make an appearing panel in Javascript.

If you want to use ASP.NET as well, add the textareas in a repeater-type control and surround the textbox elements in a simple tag. give each div a unique id which can be determined using the textbox ClientID property generated by .NET. Then, create a single javascript function that takes in an id as an argument and sets that element's visibiity to true or falase depending on its current state. This way you have only one javascript function that can handle showing or hiding any of your textboxes and your postbacks are still intact using ASP.NET postbacks.
Your javascript function would be something like...
function showHideTextBox(divID)
{
if(document.getElementById(divID).style.visibility == "visible")
{
document.getElementById(divID).style.visibility = "hidden";
}
else
{
document.getElementById(divID).style.visibility = "visible";
}
}
For your button that need to show or hide the textboxes, set their OnClientClick events to the function. For example...
string divID = "div" + myDynamicTextBox.ClientID;
btn.OnClientClick = "showHideTextBox('" + divID + "')";
Hope that helps!