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