Thank you for your help and patience. It is working fine ... just a
last question:
I need to add an input with hidden value to each list item:
...<input type="hidden" name="myList" value="values" />
The name of the input should be the name of the list passed.
The following is what I have now, but I get an error on Firebug:
$('<li></li>').appendTo(opt.list)
.append(str)
.append(' <a href="#Remove" class="Remove">Remover</a>')
.append(' <input type="hidden" name="' + opt.list.attr("name") +
'" value = "' + str + '" />');
Shouldn't attr get the name of opt.list? How can I get the list name?
Thanks,
Miguel
On Oct 23, 4:38 am, ricardobeat <[EMAIL PROTECTED]> wrote:
> Hi there,
>
> The '@' for attributes has been deprecated, and you can choose that by
> class also. Another try (hope google groups won't break it too much):
>
> $(document).ready(function() {
>
> $.fn.createList = function(opt){
> var origin = this.eq(0).parents('form'); //get the parent <form>
> element
> var $fields = this; //save all inputs for later
>
> $('.remove')
> .livequery('click', function(event) {
> $(this).parent().remove();
> });
>
> $(opt.button,origin).bind('click',function(){
> var str = [],cstr = [];
> $fields.not(':checkbox').each(function(){ //iterate over all
> inputs except checkboxes
> str.push($(this).val()); //add value to array 1
> }).end().filter(':checkbox:checked').each(function(){ //
> iterate over all checked checkboxes
> cstr.push($(this).val()); //add value to array 2
> });
> str.push(cstr.join(', ')); // add commas to array 2 and push
> the resulting string into array 1
> str = str.join('. '); // make array 1 into string, dot
> separated
> $('<li></li>').appendTo(opt.list).append(str).append(' <a
> href="#remove" class="remove">Remove Item</a>'); // etc
> return false;
> });
>
> }
>
> $
> ('input.name,select.country,input.newsletter').createList({ list:'#MyList',
> button: 'input.sendToList' })
>
> });
>
> On Oct 22, 10:24 pm, shapper <[EMAIL PROTECTED]> wrote:
>
> > 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
>
> ...
>
> read more »
