Add and Remove text to a form field

JavaScript
1

I’m 90% off the way there with this (I think?) just need a little help to get it over the line.

When a user clicks .foogallery-container h6 the h6 text is inserted into a form field, #field_iqmf9t. No issues there.

However what I want, is for that text to be removed from the form field if the button is clicked again (toggled). Here’s the jQuery I’ve thrown together, I’ll explain exactly what’s happening below.

jQuery(document).on('click', '.foogallery-container h6', function(e){
    if (!jQuery(this).attr('selectoggle') || jQuery(this).attr('selectoggle') == 'off'){
           jQuery(this).attr('selectoggle','on');
           jQuery('#field_iqmf9t').append(jQuery(this).text() + ", ");
    }
    else if (jQuery(this).attr('selectoggle') == 'on'){
           jQuery(this).attr('selectoggle','off');
           jQuery('#field_iqmf9t').remove(jQuery(this).text() + ", ");
    }
});

The text is inserted into the form field as intended, no probs there.

If I use .remove on the ‘elseif’ click 1 inserts the text, click 2 nothing happens (because selectoggle is in “on position”) then click 3 it inserts the text again (there are now two instances of the text)

If I use .empty on the ‘elseif’ click 1 inserts the text, click 2 removes the text (nice) however if I click multiple .foogallery-container h6 each will be inserted as intended, but then if I click any of the h6’s that have already been clicked, the toggle comes into effect and .empty removes everything in the form field. What I want it to do is ONLY remove the text of the h6 that is being clicked, not all h6’s.

Hope this makes sense. I’m sorry I can’t post an example, the site is being built locally.

FIDDLE

2

Hey,

I didn’t really understand the thing with h6s and so on, so maybe I can help with reference to your fiddle.
Here, if you click a button then the corresponding text is appended to the textarea. That seems to work.
What else do you want to happen?

3

As you’re wanting a toggle situation, I get the feeling that an array of selected items could do the job well instead.

See for example this updated jsfiddle, where the array is used to create the new list each time.

1 Like
4

@James_Hibbard - Thanks for the reply, I appreciate you attempting to help me with this. Paul has hit the nail on the head, so no further assistance is required.

@Paul_Wilkins - Thanks a million Paul, this works exactly as intended. You haven’t just provided me with an answer, you’ve actually educated me in the process. I’ll continue to ponder this until I’m confident I can apply it to other situations in future. Very much appreciated!

Ben.

5

You’re welcome Ben. I was at first considering just looping through the items and plucking out the active ones, but that then wouldn’t allow them to be in any custom order. Therefore arrays :slight_smile:

6

It seems like a solid approach and with my relativity limited understanding of jQuery, it’s opened my mind to the possibilities of using arrays in other (similar) situations. Thanks again Paul!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.