[AJAX][PHP]Jak wykonać dodawanie kolejnych inputów i wpisanie ich do bazy mysql., jak wykonać dodawanie inputów i wpisanie ich do mysql. Opcje

[casperii]

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 
<form id="UpdateKnowledge" action="/profil.html" method="POST">
<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>
<div id="FieldKnowledge">
<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>
<div style="float:right; margin-right:40px;"><br><input type="submit" value="zapisz" class="button"></div>
</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 ?

Ten post edytował casperii 21.05.2015, 11:08:39