jQuery - Remove part of a string from Form Value

Question

I'm trying to work on a 'Select Attendees' list for a website I'm working on and have got to a point where I'm getting stuck.

At the moment, what you can do is select options from the drop down list, which will show the name and populate an input field with these values (which I will be using later on to post to the database these values).

The problem I am having is that when deleting the name from the list, it is not deleting from the field value too.

Basically, when you delete one of the names, I want it to take that value out of the forms value and the appended ; to be removed too.

JS Fiddle

HTML

<select name="attendees" class="attendees">
  <option value="" disabled="disabled" selected="selected">Please Select Attendees</option>
  <option value="12" class="12">Name 1</option>
  <option value="13" class="13">Name 2</option>
  <option value="14" class="14">Name 3</option>
</select>

<div class="attendeesList" style="width: 370px;">
  <input type="text" name="theAttendees" class="theAttendees" value="" style="width: 370px;" />
</div>

jQuery

(function($) {
    $('.attendees').change(
    function() {
        var theSelect = $('.attendees option:selected');
            getName = theSelect.text();
            getClass = theSelect.val();
            theAttendees = $('input.theAttendees').val();
        
        if (theSelect.hasClass('noMore')) {
            $('span.'+ getClass).animate({"color":"red"}, 100);
            setTimeout(function() {$('span.'+ getClass).animate({"color":"#000"}, 500)}, 1000) ;
        } else {
            $('.attendeesList').append('<span class="'+ getClass +'">' + getName + '<a href="#" id="d" class="'+getClass+'"><img src="images/iconDelete.png" style="float:right"></a></span><br class="'+ getClass +'"/>');
            theSelect.addClass('noMore');
            $('input.theAttendees').val(theAttendees + ' ' + getName + ';');
        }
    });
}(jQuery)); 

(function($) {
    $('div.attendeesList').on('click', 'a#d', function() {
        var hrefSpan = $(this).parent();
            classID = $(this).attr('class');
            getName = $('.attendees option.'+ classID).text();
            
            hrefSpan.remove();
            
            $('br.'+ classID).remove();
            
            if ($('.attendees option.'+ classID).hasClass('noMore')) {
                $('.attendees option.'+ classID).removeClass('noMore');
            }
    });
}(jQuery));

I appreciate that it's probably not the easiest code to read and probably isn't as good as it can be, but I'm learning jQuery and trying to use it as much as possible and this is functional, so I can work on improving it once it works. If you feel like letting me know where my code can be optimised, I'd appreciate that too!

Thanks!

user1211577 · Accepted Answer · 2012-09-17 10:36:57Z

1

Figured this one out myself (with some research!)

var values = attendeeBox.val().split(";");
var newValue = "";
for ( var i = 0 ; i < values.length ; i++ )
{
if ( getName != values[i] )
    {
        newValue = newValue + values[i] + ";";
    }
}
attendeeBox.val( newValue );

answered Sep 17, 2012 at 10:36

user1211577

Sign up to request clarification or add additional context in comments.

Comments

Asciiom · Accepted Answer · 2012-09-17 09:58:12Z

0

The easiest will be to store your selection in an array, and build your textbox value from that array. (using array.join(';'))

answered Sep 17, 2012 at 9:58

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

Comments

Netorica · Accepted Answer · 2012-09-17 10:00:52Z

0

ok here is the trick

before you delete save the text on the text field
do a .replace() to remove the text you deleted in your list and save it to another variable
then set the saved variable value on the text field

answered Sep 17, 2012 at 10:00

Netorica

19.5k19 gold badges78 silver badges109 bronze badges

Collectives™ on Stack Overflow

jQuery - Remove part of a string from Form Value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related