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
> > > > > > > > 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();
> > > > > > > > > > });
>
> ...
>
> read more »
