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
