Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP]Jak wykonać dodawanie kolejnych inputów i wpisanie ich do bazy mysql.
Forum PHP.pl > Forum > Przedszkole
casperii
21.05.2015, 02:04:06
Witam, chciałbym się dowiedzieć w jaki sposób mogę wykonać takie coś, że mam input i mogę go zapisać do bazy oraz ewentualnie przycisk "dodaj kolejne" i pojawi mi się poniżej kolejny input , ponowne wciśnięcie zapisz uaktualni mi pierwszy input a drugi input doda do bazy. Max chciałbym 3 takie inputy. 

[HTML] pobierz, plaintext 
  1. <form id="UpdateKnowledge" action="/profil.html" method="POST">
  2. <div style=""><strong>Umiejętności:</strong><div style="float:right; width:210px; cursor:pointer; color: #ffffff; background-color: #5bc0de; border-color: #46b8da;" id="addFieldKnowledge" class="button">+ Dodaj dodatkowe pozycje</div></div>
  3. <div id="FieldKnowledge">
  4. <div class="line">
  5. <div style="width:130px; float:left; margin-top:10px;">Umiejętność: </div>
  6. <div style="float:left;"><input type="text" name="umiejetnosc[]" value="" class="input_search"></div>
  7. </div>
  8. <div class="line">
  9. <div style="width:130px; float:left; margin-top:10px;">Ocena: </div>
  10. <div style="float:left;"><input type="radio" name="ocena_umiejetnosc[]" value="0" checked="checked"><input type="radio" name="ocena_umiejetnosc[]" value="1"><input type="radio" name="ocena_umiejetnosc[]" value="2"><input type="radio" name="ocena_umiejetnosc[]" value="3"><input type="radio" name="ocena_umiejetnosc[]" value="4"><input type="radio" name="ocena_umiejetnosc[]" value="5">
  11. <div style="float:left; position:absolute; margin-top:10px; font-size:10px;">
  12. <div style="width:10px; float:left; text-align:center;">brak</div>
  13. <div style="width:10px; float:left; margin-left:17px; text-align:center;">1</div>
  14. <div style="width:10px; float:left; margin-left:11px; text-align:center;">2</div>
  15. <div style="width:10px; float:left; margin-left:11px; text-align:center;">3</div>
  16. <div style="width:10px; float:left; margin-left:11px; text-align:center;">4</div>
  17. <div style="width:10px; float:left; margin-left:11px; text-align:center;">5</div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <div style="float:right; margin-right:40px;"><br><input type="submit" value="zapisz" class="button"></div>
  23. </form>
[HTML] pobierz, plaintext


oraz JS:
Kod
$(window).load(function(){
    $(function(){
        var scntDiv = $('#FieldKnowledge');
        var i = $('#FieldKnowledge').size() + 1;
        
        $('#addFieldKnowledge').live('click', function(e){
        e.preventDefault();
            if(i<4){
                $('<p><div class="line"><div style="width:130px; float:left; margin-top:10px;">Umiejętność: </div><div style="float:left;"><input type="text" name="umiejetnosc[]" value="" class="input_search"></div></div><div class="line"><div style="width:130px; float:left; margin-top:10px;">Ocena: </div><div style="float:left;"><input type="radio" name="ocena_umiejetnosc[]" value="0" checked="checked"><input type="radio" name="ocena_umiejetnosc[]" value="1"><input type="radio" name="ocena_umiejetnosc[]" value="2"><input type="radio" name="ocena_umiejetnosc[]" value="3"><input type="radio" name="ocena_umiejetnosc[]" value="4"><input type="radio" name="ocena_umiejetnosc[]" value="5"><div style="float:left; position:absolute; margin-top:10px; font-size:10px;"><div style="width:10px; float:left; text-align:center;">brak</div><div style="width:10px; float:left; margin-left:17px; text-align:center;">1</div><div style="width:10px; float:left; margin-left:11px; text-align:center;">2</div><div style="width:10px; float:left; margin-left:11px; text-align:center;">3</div><div style="width:10px; float:left; margin-left:11px; text-align:center;">4</div><div style="width:10px; float:left; margin-left:11px; text-align:center;">5</div></div></div></div><div class="line"><div style="width:130px; float:left; margin-top:10px;">Opisz ocenę:<br><small>np. zaawansowany</small> </div><div style="float:left;"><input type="text" name="opisz_umiejetnosc[]" value="" class="input_search"></div></div><div style="float:right; position:relative;"><a href="#" id="remScnt">Usuń</a></div></p>').appendTo(scntDiv);
            }
            
            i++;
            return false;
        });
            
        $('#remScnt').live('click', function(e) {
        
            if( i > 2 ){
                
                 e.preventDefault();
                 $(this).parent('p').remove();
                i--;
            }
            return false;
        });
    })
});


I to mi dodaje tak jak powinno być, tylko nie mogę coś usunąć stworzonych elementów.
Teraz dodatkowo nie wiem jak sobie poradzić z input type radio. Bo powstaje konflikt pomiędzy 1 elementem gdzie występuje input type radio a kolejnym elementem. może dać name ocena_umiejetnosci + i ?
rad11
21.05.2015, 06:12:37
Normalnie dodajesz strukture HMTL dla radio z value takim jakim chcesz tylko aby wtedy moc manipulowac nowo dodanym inputem musisz odsniesz sie do niego mniej wiecej w ten sposob:

[PHP] pobierz, plaintext 
  1. $('body').on('click', '.klasa_radio', function(){
  2. //operacje
  3. });
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.