Autor Zpráva
Sennin
Profil
Zdravím páni....
Potrebuje pomôcť z jQeury kódom ktorý pridáva a odstrňuje input

všetko funguje tak ako má problém nastane až pri odstránení input-u tak nejak mi to nefunguje neodstráni input.

JS:
$(document).ready(function() {
        var max_fields = 2; //maximum input boxes allowed
        var wrapper = $(".form-group-field");
        var add_button = $(".add_field_button"); //Add button ID
        var remove_button = $(".remove_field_button");

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="form-group remove-form-group"><div class="row"><div class="col-8"><input type="text" name="adress_continues" id="auto9" class="form-control" placeholder="Adresa pokračuje"></div><div class="col-4"><input type="text" name="adress_continues_number" class="form-control" placeholder="Číslo"></div></div></div>');
                }
        });

        $('#adressbtn').on('click', function () {
            var $elem = $("#adressbtn");
            $elem.text().trim() === 'Pridať adresu' ? $elem.text('Odstrániť'): $elem.text('Pridať adresu');
            $elem.toggleClass('add_field_button remove_field_button');
        });

        $('remove_field_button').click(function(e){ //user click on remove text
                e.preventDefault();
                $(".remove-form-group").remove();
                x--;
        });
});

Html:

<span id="linkHelpBlock" class="form-text">
    <a href="javascript:;" id="adressbtn" class="btn btn-link add_field_button">Pridať adresu</a>
</span>

<div class="form-group-field">

</div>

Lámem si nad tým hlavu už asi tak 8hod. a neviem prísť na to kde je chyba.
Keeehi
Profil
V době kdy se řádek 22 vykonává, tak žádný element s třídou remove_field_button neexistuje. Tudíž se na něj ani nemůže navázat žádná událost. Nejjednodušší řešení je řádek 18 rozepsat jako klasický if a obsluhu mazání přesunout tam. Druhá možnost je událost navázat na nějaký rodičovský element a omezit jeho působnost. $('#linkHelpBlock').on('click', '.remove_field_button', function(){

U identifikátoru třídy na řádku 22 na začátku chybí tečka ale tahle chyba je v tomto případě není až tak podstatná.
Sennin
Profil
@Keeehi

Dík za odpoveď....

Ak zadám tento kód $('#linkHelpBlock').on('click', '.remove_field_button', function(){
Tak síce to funguje ale obrátene teda refresh stránky zobrazí sa Pridať Adresu kliknem zmení sa na Odstrániť ale nič až keď kliknem znova na Odstrániť pridá input ale zmení sa Text teda link na Pridať Adresu....

Ja potrebuje aby keď mi to pridá input zmení sa aj odkaz na Odstrániť a keď odstránim input zmení sa aj text na Pridať Adresu.

Trocha mišung ja viem ale neviem ako z toho von a zfunkčniť ho....


@Keeehi

Skúsil som teda toto
$('#linkHelpBlock').on('click', '.add_field_button', function(e) { //user click on remove text
                e.preventDefault();
                $('.remove-form-group').remove();
                x--;
        });

zmeniť za toto:

$('#linkHelpBlock').on('click', '.remove_field_button', function(e) { //user click on remove text
                e.preventDefault();
                $('.remove-form-group').remove();
                x--;
        });

teda zmenil som tam .remove_field_button za .add_field_button a funguje to všetko len či je to správne
Sennin
Profil
Sorry ľudia ale tak nakoniec to nefunguje tak ako má...
Môžete mi povedať v čom robím chybu?

HTML:
<div id="remove">
  <a href="javascript:;" class="close add-field" id="adressbtn">
    Pridať adresu
  </a>
</div>>

<div class="input-fields-wrap">

</div>

JS:
$(document).ready(function() {
    var max_fields = 2; //maximum input boxes allowed
    var wrapper = $(".input-fields-wrap"); //Fields wrapper
    var add_button = $(".add-field"); //Add button ID
    var adress_button = $("#adressbtn");
    var remove = $('#remove');
    var x = 1; //initlal text box count

    $(adress_button).click(function () {
         $(adress_button).text().trim() === 'Pridať adresu' ? $(adress_button).text('Odstrániť adresu'): $(adress_button).text('Pridať adresu');
        $(adress_button).toggleClass('add-field remove-field');
    });

    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
          x++; //text box increment
          $(wrapper).append('<div class="form-group"><div class="row"><div class="col-md-9 col-8"><input type="text" id="auto9" class="form-control" name="order_adress_next" placeholder="Adresa smeruje" value=""></div><div class="col-md-3 col-4"><input type="text" class="form-control" name="order_next_number" placeholder="Číslo" value=""></div></div></div>');
          }
    });

   $(remove).on('click', '.remove-field', function(e) { //user click on remove glyphicon
        e.preventDefault();
        $('.input-fields-wrap').remove();
        x--;
    });
});



VYRIEŠENÉ!!!

$(wrapper).append('<div class="form-group"> <-tu bola chyba nedefinoval som čo chcem pridávať alebo odstraňovať teda
$(wrapper).append('<div class="form-group add-field">

A toto $('.input-fields-wrap').remove(); zameniť za $('.add-field').remove();

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0