Hi again, I changed the join to a dot and added [EMAIL PROTECTED] as a selector of my CheckBoxes group. I am trying that the values of the selected checkboxes to be added in a Comma Separated format.
This is not working? Could someone, please, help me with this thing? It is the last thing to finish it. Thanks, Miguel On Oct 23, 1:05 am, shapper <[EMAIL PROTECTED]> wrote: > Hi, > > I solved problem 1 and updated my online example. > > I still have problems with the checkboxes and the display format ... > any idea how to solve? > > Thanks, > Miguel > > On Oct 23, 12:23 am, shapper <[EMAIL PROTECTED]> wrote: > > > Hello, > > > I uploaded the updated > > version:http://www.27lamps.com/Beta/List/List.html#remove > > > There is only two problems: > > 1. The value of the select is not being added. > > 2. If i have multiple chekboxes on the same group I would like to add > > only the values of ones selected. > > > The ideal would be to have the following format: > > > Name. Country. 1st CheckBox selected, 2st CheckBox selected, ... > > > This way I can understand that each dot separates an input and a comma > > separates the selected values of a check box group. > > > How can I do this? > > > Thanks, > > Miguel > > > On Oct 22, 2:45 am, shapper <[EMAIL PROTECTED]> wrote: > > > > Hi, > > > > I will try it. Sorry, but I am no expert with JQuery and I am just > > > trying to pull this off. > > > > I understand that a plugin should have many more options but my > > > intention is to have this plugin so I can use across my projects and > > > with time improve it. > > > It would be easier to make this without being a plugin? I am not > > > really sure how the code would change ... > > > > I was looking for such a plugin but I wasn't able to find any ... I > > > think this is really useful. > > > > Just select the inputs, the button, the list and the format as the > > > inputs values would be displayed. Then use something like: > > > <li>Book Type. Book Name. Values of selected CheckBoxes separated by > > > commas<input type="hidden" name="myList" value="Book Type. Book Name. > > > Values of selected CheckBoxes separated by commas" /><a > > > href="#remove"class="remove">Remove Item</a></li> > > > > Then I use the hidden inputs to read the info on the server after the > > > form is submitted, parse the info and insert it into the database > > > along with the other form info. > > > > Does this makes any sense? > > > > Yes, I could use Ajax but the form has a lot more information and > > > these list info should be only saved into the database if the user > > > submits the register form itself. > > > So if i send this info through ajax there will no where to save it > > > since the user didn't register yet. > > > > Is this what you meant? > > > > Thank You, > > > Miguel > > > > On Oct 22, 1:45 am, ricardobeat <[EMAIL PROTECTED]> wrote: > > > > > Install the Firebug extension for Firefox so you can debug your code > > > > easily:www.getfirebug.com > > > > > I don't mean it's not good for a plug-in, I mean it's a very specific > > > > behaviour. To be useful to a large number of people it would need to > > > > be very flexible and customizable. > > > > > On your test page, you forgot to close the function and you're not > > > > using it the right way. As it is you should have used: > > > > > $('form').createList('#MyList') // form is the form from where you are > > > > getting the values, you pass createList() the list ID > > > > > I changed it to act from the elements themselves, here is a new one: > > > > > $(document).ready(function() { > > > > > $.fn.createList = function(opt){ > > > > var origin = this.eq(0).parents('form'); > > > > var $fields = this; > > > > $(opt.button,origin).bind('click',function(){ > > > > str = []; > > > > $fields.each(function(){ > > > > str.push($(this).val()); > > > > }); > > > > str = str.join(','); > > > > $('<li></li>').appendTo(opt.list).append(str).append(' <a > > > > href="#remove" class="remove">Remove Item</a>'); > > > > return false; > > > > }); > > > > } > > > > > }); > > > > > The way you use this is the following: > > > > > $('input.name,input.country,input.newsletter').createList({ list: > > > > '#MyList', button: 'input.sendToList' }) > > > > > First you select the form inputs that you want to get the values from, > > > > then you call createList and pass an object specifying a selector for > > > > the list and for the button you want to use, they can be any selector > > > > (ID,class,etc). The code is quite self-explanatory. > > > > > You could also send this data directly to the server via Ajax, there > > > > is no need to put it in a list just for that. > > > > > cheers, > > > > Ricardo > > > > > On Oct 21, 9:07 pm, shapper <[EMAIL PROTECTED]> wrote: > > > > > > Hi, > > > > > > I tried to follow your tips but I might be doing something > > > > > wrong:http://www.27lamps.com/Beta/List/List.html > > > > > > A few questions: > > > > > 1. Why isn't this good for a plugin? > > > > > I fell this is really useful in forms for selecting multiple > > > > > items, add them to the a list and then read that list from server > > > > > side. > > > > > > 2. Can't I specify the ID's of the form inputs I want to take the info > > > > > from? > > > > > My form has 10 inputs and 2 buttons: One should submit the form. > > > > > The other should only add the contents of the 3 selected inputs to the > > > > > list. > > > > > > Thank You, > > > > > Miguel > > > > > > On Oct 16, 9:47 pm, ricardobeat <[EMAIL PROTECTED]> wrote: > > > > > > > This is quite specific to made into an actual plug-in, but here it > > > > > > goes: > > > > > > > $.fn.createList = function(list){ > > > > > > var origin = this; > > > > > > $(':submit',origin).bind('click',function(){ > > > > > > str = []; > > > > > > > > > > > > console.log($('input,select,checkbox:checked',origin)); > > > > > > > > > > > > $('.name,.country,.newsletter:checked',origin).each(function(){ > > > > > > str.push($(this).val()); > > > > > > }); > > > > > > str = str.join(','); > > > > > > $('<li></li>').appendTo(list).append(str).append(' > > > > > > <a href="#remove" > > > > > > class="remove">Remove Item</a>'); > > > > > > return false; > > > > > > }); > > > > > > > }; > > > > > > > <form> > > > > > > <input class="name"/> > > > > > > <select class="country"> > > > > > > <option value="France">France</option> > > > > > > <option value="Portugal">Portugal</option> > > > > > > <option value="UK">UK</option> > > > > > > <option value="US">US</option> > > > > > > </select> > > > > > > <input type="checkbox" value="Newsletter" class="newsletter" > > > > > > name="newsletter"/> > > > > > > <input type="submit" value="Add to List"/> > > > > > > </form> > > > > > > > 1. you were binding the 'remove buttons' everytime you ran the > > > > > > function, keep the livequery call outside the function so it only > > > > > > runs > > > > > > once > > > > > > 2. your HTML was missing IDs, I made them into classes so you don't > > > > > > need to pass IDs everytime > > > > > > 3. 'this' inside your appendTo() was refering to the button, not the > > > > > > form > > > > > > > only tested on FF3, works alright. > > > > > > > - ricardo > > > > > > > On Oct 16, 8:39 am, shapper <[EMAIL PROTECTED]> wrote: > > > > > > > > Hi, > > > > > > > > I added a live example > > > > > > > to:http://www.27lamps.com/Beta/List/List.html > > > > > > > > It is not working. Could someone, please, help me with this? > > > > > > > > I am trying to create something similar to what is used in > > > > > > > wordpress > > > > > > > to add tags to a post but getting the values from multiple form > > > > > > > inputs. > > > > > > > > Thanks, > > > > > > > Miguel > > > > > > > > On Oct 16, 5:58 am, ricardobeat <[EMAIL PROTECTED]> wrote: > > > > > > > > > If the ids are supplied in '#id,#otherid,#otherid' format, you > > > > > > > > could > > > > > > > > do: > > > > > > > > > var str = new String; > > > > > > > > $(options.formids).each(function(){ > > > > > > > > str += $(this).val(); > > > > > > > > str += ',';}); > > > > > > > > > $('<li/>').appendTo(options.listid).text(str); > > > > > > > > > - ricardo > > > > > > > > > On Oct 15, 9:49 pm, shapper <[EMAIL PROTECTED]> wrote: > > > > > > > > > > Hello, > > > > > > > > > > I am trying to create my first JQuery plugin that does the > > > > > > > > > following: > > > > > > > > > > On a form, when a button is pressed, a few form elements > > > > > > > > > values are > > > > > > > > > used to create a string (CSV format). > > > > > > > > > This string is added to an ordered list and with a remove > > > > > > > > > button to > > > > > > > > > remove it from the list. > > > > > > > > > > Could someone, please, help me making this work. What I have > > > > > > > > > is: > > > > > > > > > > (function($) { > > > > > > > > > $.fn.AddToList = function(options) { > > > > > > > > > > var defaults = { > > > > > > > > > formids: "input1, select1, input2", > > > > > > > > > buttonId: "submit", > > > > > > > > > listId: "items" > > > > > > > > > }; > > > > > > > > > var options = $.extend(defaults, options); > > > > > > > > > > return this.each(function() { > > > > > > > > > > $('.Remove') > > > > > > > > > .livequery('click', function(event) { > > > > > > > > > $(this).parent().remove(); > > > > > > > > > }); > > > > > > > > > > $(options.buttonId).bind('click', function() { > > > > > > > > > > $(options.listID).append("<li>??????</li>"); > > > > > > > > > > }); > > > > > > > > > > }); > > > > > > > > > }; > > > > > > > > > > })(jQuery); > > > > > > > > > > I created three parameters: > > > > > > > > > > formids: The ids of the form elements from where the > > > > > > > > > content should > > > > > > > > > be taken > > > > > > > > > buttonId: The id of the button that triggers the adding of > > > > > > > > > the form > > > > > > > > > element values to the list > > > > > > > > > listId: The listid where the items should be added. > > > > > > > > > > I am using LiveQuery to add the remove action to the button > > > > > > > > > adding a > > > > > > > > > class of Remove to all buttons. > > ... > > read more »
