Solved

using jQuery to add/remove individual/multiple items from form fields via select list and "add" button

Posted on 2014-03-25
12
2,580 Views
Last Modified: 2014-03-25
Hi

I'm trying to create the ability for users to select multiple values from a drop down form "select box" which then appends them to some fort of text field, or floated divs (this part is jsut for their visual representation)

Each selected option obviously has a value, and I need this to append to a hidden text field

Im also after the ability to remove items from the added array, possibly using a "X" button so I can build up a search string that will be used when the user submits the form

Heres a basic image of what I'm trying to achieve, as I'm getting this data via jQuery I'd like to stick with that please.

select from dropdown with ability to add/remove from selected list
0
Comment
Question by:NeilT
  • 6
  • 5
12 Comments
 
LVL 9

Expert Comment

by:BlueYonder
ID: 39952968
$('.button').click(function() {
    $('#myContainer').append('<div>the new guy</div>');
});
0
 
LVL 3

Author Comment

by:NeilT
ID: 39953002
thanks, how would I know the value of the selected option though, for example

<select id="additionalServices" name="additionalServices">
    <option value="1">2 year offer</option>
    <option value="2">Alcohol and drugs support</option>
    <option value="3">Asthma clinic</option>
    <option value="4">Au pairs</option>
    <option value="5">Baby clinic</option>
    <option value="6">Baby imunisation clinic</option>
    <option value="7">Baby massage</option>
</select>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39953026
Test page : http://jsfiddle.net/VAXGw/

jQuery(function($) {
    var list = {};
    var updateList = function() {
        var IDs = [];
        var uiIDs = [];
        $.each(list, function(i,v) {
            if(v) {
                IDs.push(i);
                var html = "";
                html += "<span>";
                html += "<a href='#'>";
                html += "<img src='http://www.1miniface.com/skin/frontend/default/miniface/images/system-delete.png' />";
                html += "<input type='hidden' value='" + i + "' />";
                html += "</a>"
                html += i;
                html += "</span>";
                uiIDs.push(html);
            }
        });
        $("#uiIDs").html(uiIDs.join(""));
        $("#IDs").val(IDs.join(","));
    }

    $("#add").click(function() {
        var id = $("#list").val();
        list[id] = true;
        updateList();
    });
    
    $("#uiIDs").on("click", "a", function() {
        var id = $(":hidden", this).val();
        list[id] = false;
        $(this).remove();
        updateList();        
    });
});

Open in new window

0
 
LVL 3

Author Comment

by:NeilT
ID: 39953053
thanks leakim971 this is almost what I want but can I get it to put the selected TEXT value in 1 field and the text VALUE in another field (a hidden text field)?

Again, remiving from both if the "X" of the visable text value is clicked

something like this:

example 2
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39953122
You should try something yourself, did you understood the code?
0
 
LVL 3

Author Comment

by:NeilT
ID: 39953212
I can see what its doing but I dont understand jQuery enough to actually see how/why

I've tried this using your fiddle example but is now doesnt do a thing, ive just tried to get it to seperate the val / text first

<select id="list">
    <option value="5">A</option>
    <option value="11">B</option>
    <option value="46">C</option>
</select><button id="add">ADD</button>
<div id="uiIDs"></div>
<input type="text" name="IDs" id="IDs" />

jQuery(function($) {
    var list = {};
    var updateList = function() {
        var IDs = [];
        var uiIDs = [];
        $.each(list, function(i,t,v) {
            if(v) {
                IDs.push(i);
                var html = "";
                html += "<span>";
                html += "<a href='#'>";
                html += "<img src='http://www.1miniface.com/skin/frontend/default/miniface/images/system-delete.png' />";
                html += "<input type='hidden' value='" + i + "' />";
                html += "</a>"
                html += t;
                html += "</span>";
                uiIDs.push(html);
            }
        });
        $("#uiIDs").html(uiIDs.join(""));
        $("#IDs").val(IDs.join(","));
    }

    $("#add").click(function() {
        var id  = $("#list").val();        
        var val = $("#list :selected").text();
        list[id,val] = true;
        updateList();
    });
    
    $("#uiIDs").on("click", "a", function() {
        var id = $(":hidden", this).val();
        list[id] = false;
        $(this).remove();
        updateList();        
    });
});

Open in new window

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 82

Expert Comment

by:leakim971
ID: 39953440
use text() instead val() to use the TEXT instead the VALue
0
 
LVL 3

Author Comment

by:NeilT
ID: 39953490
I've joined JSFiddle and put up my example code so far.

I'm far less savvy than you and at present where I'm learning my code may we all over the place but I understand it more.

I've managed to get it to add to both lists, and remove from the visual side but I cant understand (and ive tried a lot of ways that just fail) how to remove them from the values and text so that they dont just come back again when i click "add" again

your help on this would be appreciate so I can move forward and understand more.

Regards
Neil

http://jsfiddle.net/ihategherkins/ff5Zz/
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39953567
thanks leakim971 this is almost what I want but can I get it to put the selected TEXT value in 1 field and the text VALUE in another field (a hidden text field)?

Again, remiving from both if the "X" of the visable text value is clicked

something like this:

What was the difference from my first example?
0
 
LVL 3

Author Comment

by:NeilT
ID: 39953696
leakim971, your first example was superb but didnt quite do what I asked.

I've tried to change the values you suggest but its not doing what I'm after, im going round and round in circles and getting more confused, rather than learning by example

Whilst I appreciate I can use text() instead of val() I need both as per my jsfiddle (which is mostly based on your code.

I just cant get the text, and form values to completely go, they disappear then return once another is added.

Are you able to amend your original code to so this so I can actually learn?

I would prefer to use your code as my base as its obviously better written, and I guess more re-usable than my attempts.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39953811
Hope that help : http://jsfiddle.net/VAXGw/5/

jQuery(function($) {
    var list = {};
    var updateList = function() {
        var at = [];
        var av = [];
        var uiIDs = [];
        $.each(list, function(i,v) {
            if(v) { // false OR a dropdown text
                av.push(i);
                at.push(list[i]);
                var html = "";
                html += "<span>";
                html += "<a href='#'>";
                html += "<img src='http://www.1miniface.com/skin/frontend/default/miniface/images/system-delete.png' />";
                html += "<input type='hidden' value='" + i + "' />";
                html += "</a>"
                html += i;
                html += "</span>";
                uiIDs.push(html);
            }
        });
        $("#uiIDs").html(uiIDs.join(""));
        $("#at").val(at.join(","));
        $("#av").val(av.join(","));
    }

    $("#add").click(function() {
        var value = $("#dropdown").val();
        var text = $("#dropdown option:selected").text();
        list[value] = text;
        updateList();
    });
    
    $("#uiIDs").on("click", "a", function() {
        var value = $(":hidden", this).val();
        list[value] = false;
        $(this).remove();
        updateList();        
    });
});

Open in new window

0
 
LVL 3

Author Closing Comment

by:NeilT
ID: 39953848
Many thanks for your assistance. From your example I can now see clearly where I was going wrong and how the initial list[value] = true; played the part.

Kind regards
Neil
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now