Dynamicke pole - problem s pridanim zatvoriek

IlosionMan · Napísal **IlosionMan**: 26.08.2011 11:22

Dobrý deň, potreboval by som Vašu pomoc zo scriptom dynamicField (http://www.quackfuzed.com/demos/jQuery/dynamicField/index.cfm)

Originalny input element musi byť:

Kód:

<input type='text' name='name_1' id='name_1' value='' class='textInput removable' /> 

Ale ja to potrebujem mať takto:

Kód:

<input type='text' name='name_1[]' id='name_1[]' value='' class='textInput removable' />

(Keď to takto spravim tak to nejde.)

Takže ja potrebujem pridať [ ] za name_1. Je potrebne zmeniť tento script, len ja neviem ako.

Kód:

/*
*   jQuery dynamicField plugin
*   Copyright 2009, Matt Quackenbush (http://www.quackfuzed.com/)
*
*   Find usage demos at http://www.quackfuzed.com/demos/jQuery/dynamicField/index.cfm)
*
*   Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
*   and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
*   Version: 1.0
*   Date:    8/13/2009
*/
;(function($) {
   $.fn.dynamicField = function(options) {
      if ( $(this).attr("id") == undefined ) {
         alert("The dynamicField plugin could not be initialized.\n\nPlease check the selector.");
         return $;
      }
      
      var f = $(this);
      
      var settings = $.extend({
         maxFields: 5,
         removeImgSrc: "images/icons/cross.png",
         spacerImgSrc: "images/spacer.gif",
         addTriggerClass: "add-field-trigger",
         removeImgClass: "remove-field-trigger",
         hideClass: "hide",
         cloneContainerId: f.attr("id").replace(/^(.+)([_-][0-9]+)$/,"$1"),
         rowContainerClass: f.attr("class"),
         labelText: f.children("label")
                     .html(),
         baseName: f.children("input")
                        .attr("name")
                        .replace(/^(.+[_-])([0-9]+)$/,"$1"),
         addContainerId: "add-" + f.children("input")
                        .attr("name")
                        .replace(/^(.+)([_-][0-9]+)$/,"$1")
                        .replace(/_/g,"-") + "-container"
      },options);
      
      var getFields = function() {
         return $("div." + settings.rowContainerClass);
      };
      
      // handle hide/show, etc
      var addRemoveBtnCk = function() {
         var fields = getFields();
         var len = fields.length;
         
         fields.each(function(i,elem) {
            $(elem)
               .children("img")
               .attr({
                  "src":(len == 1) ? settings.spacerImgSrc : settings.removeImgSrc,
                  "class":(len == 1) ? "" : settings.removeImgClass
               });
         });
         
         if ( len > (settings.maxFields-1) ) {
            $("div#" + settings.addContainerId).addClass(settings.hideClass);
         } else {
            $("div#" + settings.addContainerId).removeClass(settings.hideClass);
         }
      };
      
      // handle field removal
      $("img." + settings.removeImgClass).live("click",function() {
         // remove the selected row
         $(this).parent("div." + settings.rowContainerClass).remove();
         
         // rebrand the remaining fields sequentially
         getFields().each(function(i,elem) {
            var pos = new Number(i+1);
            var d = $(elem)
                     .attr("id",settings.cloneContainerId + "-" + pos);
            
            d.children("label")
                     .attr("for",settings.baseName + pos)
                     .html((pos > 1) ? "" : settings.labelText);
            
            d.children("input")
                     .attr({
                        "id":settings.baseName + pos,
                        "name":settings.baseName + pos
                     });
         });
         
         addRemoveBtnCk();
      });
      
      // handle field add
      $("div#" + settings.addContainerId + " span." + settings.addTriggerClass).click(function() {
         var len = getFields().length;
         var pos = new Number(len+1);
         var newDiv = f
                     .clone()
                     .attr("id",settings.cloneContainerId + "-" + pos)
                     .addClass(settings.rowContainerClass);
         
         newDiv.children("label")
                     .attr("for",settings.baseName + pos)
                     .html("");
         
         newDiv.children("input")
                     .attr({
                        "id":settings.baseName + pos,
                        "name":settings.baseName + pos,
                        "value":""
                     });
         
         newDiv.children("img")
                     .attr("src",settings.removeImgSrc);
         
         if ( len > 0 ) {
            $("div#" + settings.cloneContainerId + "-" + len).after(newDiv);
         } else {
            $("div#" + settings.addContainerId).before(newDiv);
         }
         
         addRemoveBtnCk();
      });
   };
})(jQuery);

chrono · Napísal **chrono**: 26.08.2011 13:53

Pri jQuery majú znaky [] špeciálny význam (na čo konkrétne sa používajú určite zistíš v dokumentácii).

Pri odosielaní stačí, aby to [] bolo v atribúte name, takže po úprave môžeš použiť niečo takéto. Problém je, že to nebude fungovať bez tých [] v name, ale aj to by sa dalo upraviť komplexnejšou zmenou settings.baseName (ale keďže ja to nepotrebujem, robiť to nebudem, každopádne ide len o miernu úpravu originálneho regexp).

Kód:

/*
*   jQuery dynamicField plugin
*   Copyright 2009, Matt Quackenbush (http://www.quackfuzed.com/)
*
*   Find usage demos at http://www.quackfuzed.com/demos/jQuery/dynamicField/index.cfm)
*
*   Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
*   and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
*   Version: 1.0
*   Date:    8/13/2009
*/
;(function($) {
   $.fn.dynamicField = function(options) {
      if ( $(this).attr("id") == undefined ) {
         alert("The dynamicField plugin could not be initialized.\n\nPlease check the selector.");
         return $;
      }
      
      var f = $(this);
      
      var settings = $.extend({
         maxFields: 5,
         removeImgSrc: "/commonassets/images/icons/cross.png",
         spacerImgSrc: "/commonassets/images/spacer.gif",
         addTriggerClass: "add-field-trigger",
         removeImgClass: "remove-field-trigger",
         hideClass: "hide",
         cloneContainerId: f.attr("id").replace(/^(.+)([_-][0-9]+)$/,"$1"),
         rowContainerClass: f.attr("class"),
         labelText: f.children("label")
                     .html(),
         baseName: f.children("input")
                        .attr("name"),
         baseId: f.children("input")
                        .attr("name")
                        .replace(/^(.+[_-])([0-9]+)$/,"$1"),
         addContainerId: "add-" + f.children("input")
                        .attr("id")
                        .replace(/^(.+)([_-][0-9]+)$/,"$1")
                        .replace(/_/g,"-") + "-container"
      },options);
      
      var getFields = function() {
         return $("div." + settings.rowContainerClass);
      };
      
      // handle hide/show, etc
      var addRemoveBtnCk = function() {
         var fields = getFields();
         var len = fields.length;
         
         fields.each(function(i,elem) {
            $(elem)
               .children("img")
               .attr({
                  "src":(len == 1) ? settings.spacerImgSrc : settings.removeImgSrc,
                  "class":(len == 1) ? "" : settings.removeImgClass
               });
         });
         
         if ( len > (settings.maxFields-1) ) {
            $("div#" + settings.addContainerId).addClass(settings.hideClass);
         } else {
            $("div#" + settings.addContainerId).removeClass(settings.hideClass);
         }
      };
      
      // handle field removal
      $("img." + settings.removeImgClass).live("click",function() {
         // remove the selected row
         $(this).parent("div." + settings.rowContainerClass).remove();
         
         // rebrand the remaining fields sequentially
         getFields().each(function(i,elem) {
            var pos = new Number(i+1);
            var d = $(elem)
                     .attr("id",settings.cloneContainerId + "-" + pos);
            
            d.children("label")
                     .attr("for",settings.baseId + pos)
                     .html((pos > 1) ? "" : settings.labelText);
            
            d.children("input")
                     .attr({
                        "id":settings.baseId + pos,
                        "name":settings.baseName
                     });
         });
         
         addRemoveBtnCk();
      });
      
      // handle field add
      $("div#" + settings.addContainerId + " span." + settings.addTriggerClass).click(function() {
         var len = getFields().length;
         var pos = new Number(len+1);
         var newDiv = f
                     .clone()
                     .attr("id",settings.cloneContainerId + "-" + pos)
                     .addClass(settings.rowContainerClass);
         
         newDiv.children("label")
                     .attr("for",settings.baseId + pos)
                     .html("");
         
         newDiv.children("input")
                     .attr({
                        "id":settings.baseId + pos,
                        "name":settings.baseName,
                        "value":""
                     });
         
         newDiv.children("img")
                     .attr("src",settings.removeImgSrc);
         
         if ( len > 0 ) {
            $("div#" + settings.cloneContainerId + "-" + len).after(newDiv);
         } else {
            $("div#" + settings.addContainerId).before(newDiv);
         }
         
         addRemoveBtnCk();
      });
      
   };
})(jQuery);

Kód:

            <div class="ctrlHolder">
               <div id="removable-name-container-1" class="removable-field-row">
                  <label for="name_1">Name</label>
                  <input type="text" name="name[]" id="name_1" value="" class="textInput removable" />
                  <img src="/commonassets/images/spacer.gif" width="16" height="16" alt="" title="Remove This Item" class="" />
               </div>
               <div id="add-name-container" class="add-field-container">
                  <span class="add-field-trigger">
                     <img src="/commonassets/images/icons/add.gif" alt="" title="Add New Item" />
                     Add Row
                  </span>
               </div>
            </div>

IlosionMan · Napísal autor témy **IlosionMan**: 27.08.2011 10:18

no len ja to potrebujem mať napr. takto: name_1[], name_2[] ... ale nevadi, aj tak diky za čas....

chrono · Napísal **chrono**: 27.08.2011 10:31

V takom prípade budeš musieť upraviť jQuery.

Určite chceš, aby mal každý, novo pridaný prvok, iné číslo a aj [] na konci? Ak áno, tak si neviem predstaviť, k čomu to má slúžiť. (ak by mali rovnaký názov a [] na konci, tak by to v Php vytvorilo pole, a zmysel toho si predstaviť viem)

IlosionMan · Napísal autor témy **IlosionMan**: 27.08.2011 10:58

potrebujem to pretože chcem poslať viac dát naraz z tých istých poli, (výsledok potom zasielam vďaka cyklu do db):
vyzerá to napr. takto:

[code]
Uživateľ 1.
<input type='text' name='meno[]' value=''/>
<input type='text' name='tel_1[]' value=''/> (tu je to spomínané name_1)
<input type='text' name='tel_2[]' value=''/>
...

Uživateľ 2.
[code]<input type='text' name='meno[]' value=''/>
<input type='text' name='tel_1[]' value=''/>
<input type='text' name='tel_2[]' value=''/>
...
<input type='submit' name='odoslat' value='Odoslat'>
[/code]

emer · Napísal **emer**: 27.08.2011 13:40

Kód:

newDiv.children("input") 
                      .attr({ 
                         "id":settings.baseId + pos, 
                         "name":settings.baseName + "[]", 
                         "value":"" 
                      });

19ty riadok odspodu

IlosionMan · Napísal autor témy **IlosionMan**: 27.08.2011 13:55

vďaka ale nepomohlo to, keď toto zmením v skripte, skript ide ale hodnoty tomu pridariť nevie, a keď pridám [] do imputu tak to nespusti skript:

Kód:

<input type='text' name='name_1[]' id='name_1[]' value='' class='textInput removable' />  

chrono · Napísal **chrono**: 27.08.2011 15:08

Ty chceš, pomocou toho pluginu, pridávať naraz viac vstupných elementov?

Ak áno, tak ten plugin nebude fungovať, pretože funguje len keď je v tom riadku jediný input element (teda tak trochu funguje aj keď ich tam je viac, ale napr. všetkým elementom v riadku dá rovnaké name a id).

PS: Možno by si sa mohol pozrieť na jquery-dynamic-form.

Dynamicke pole - problem s pridanim zatvoriek

Podobné témy