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.
>
> > > > > Thanks,
> > > > > Miguel
