Forum PHP.pl > Dynamiczne dodawanie pól formularza wraz z trescią w value

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Dynamiczne dodawanie pól formularza wraz z trescią w value

bluepk

26.04.2010, 21:46:32

Witajcie!

Mam problem, otoz mam kod, ktory tworzy mi pola w formularzu.
Kod:

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
label { display: block;}label a{
color: #CC0000;
text-decoration: none; margin-left: 5px;
}
label a:hover{
text-decoration: underline;
}
</style>
<script>
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");
new_link.attr("href", "#");
new_link.html("usuń");
new_link.click(function()
{
$(this).parent("label").remove();
return false;
});
new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);

return false;
});
});
</script>
</head>
<body>

<a href="#" id="dodaj">Dodaj</a>
<form name="formularz" action="">
</form>
</body>

Chce aby bylo wiecej przyciskow Dodaj - np dodaj+tekst, dodaj+tekst2 i zeby ten tekst byl wyswietlany jako value w dodanym polu input. Probowalem dodac value, ale nie moglem tego przekazac z linku do pola.

reaktor

27.04.2010, 00:26:09

Nie dzialalo Ci z najprawdopodobniej dlatego, ze 'value'
nie jest prawidlowym atrybutem elementu <a>.

Robiles pewnie takie przypisanie, i to zadziala np. z title:

[HTML] pobierz, plaintext 
new_input.val(this.title);
...
<a href="#" id="doda" title="CostamCostam">Dodaj Costam</a><BR>
[HTML] pobierz, plaintext

Gdybys koniecznie chcial uzywac value (ale value jest nieprawidlowym
atrybutem wiec rownie dobrze mozesz wymyslec dowolna nazwe),
mozna zrobic tak:

[HTML] pobierz, plaintext 
new_input.val($(this).attr("wrzutadoinputa"));
...
<a href="#" id="dodaj" wrzutadoinputa="Ble">Dodaj BleBle</a>
[HTML] pobierz, plaintext

bluepk

27.04.2010, 22:38:51

Świetnie, dzięki.

Ale jeszcze jedna sprawa - myślalem, ze stosuja linki <a href="#" id="dodaj" wrzucdoinputa="1"><a href="#" id="dodaj" wrzucdoinputa="2"><a href="#" id="dodaj" wrzucdoinputa="3">

to beda mi sie tworzyly kolejne pola z dana wartoscia, ale sie mylilem. Dziala tylko klikniecie na 1 link. Da sie to jakos zmienic?

reaktor

27.04.2010, 23:22:31

Bo id z definicji powinno byc unikalne

Przyporzadkuj kliniecie w linka wg class i bedzie dobrze.

bluepk

28.04.2010, 07:30:35

no tak, ale przy class juz nie dziala caly skrypt.

nospor

28.04.2010, 07:33:33

No bo juz nie $('#dodaj') a $('.nazwaklasy')
I poczytaj o LIVE

bluepk

28.04.2010, 07:51:16

no tak. robilem tylko ("class") a nie (".class"). Z teraz juz ostatnie pytanie mam:
new_input.attr("style", "border:0px;background:kolor;width:20px;"); i chce wstawic tresc z value jeszcze w miejsce kolor.

Dziekuje za pomoc!

phpion

28.04.2010, 08:30:42

[HTML] pobierz, plaintext 
new_input.attr("style", "border:0px;background:" + value + ";width:20px;");
[HTML] pobierz, plaintext

bluepk

28.04.2010, 16:52:14

przy takim ukladzie nie dziala calosc, probowalem roznych kombinacji i nic

rano juz rozwizanem ten problem. chodzilo o

[HTML] pobierz, plaintext 
new_input.attr("style", "background:"+$(this).attr("kolor")+";");
 
[HTML] pobierz, plaintext

teraz jeszcze sie zastanawiam jak zrobic ograniczenie ilosci dodawanych pol i blokowaniu wybierania tych samych 2 razy. Tylko ciezko to zrobic jesli nie ma okreslonego name wszystkich pol.

reaktor

28.04.2010, 20:48:28

Wiec w czym problem? Po prostu dorabiaj "name"
podczas produkcji inputow.

Zeby nie bylo wiecej nieporozumien wstawiam caly dziajacy
przyklad. Nie jest to moze bardzo eleganckie, ale robi wszystko
czego potrzebowales.

[HTML] pobierz, plaintext 
<head>
<!-- 
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<script src="jquery-1.3.2.js" type="text/javascript"></script>
 
<style type="text/css">
label { 
    display: block;
}
label a{
    color: #CC0000;
    text-decoration: none; margin-left: 5px;
}
label a:hover{
    text-decoration: underline;
}
</style>
<script>
$(document).ready(function() {
$(".dodaj").click(function()
{    
    var kolorek = $(this).attr("wrzutadoinputa");
 
    var powtorka = false;
    var cnt=0;
    var cntmax=4;
    $("#myform input.autoinput").each(function(){
        cnt++;
        if (this.id == "autoinput_"+kolorek) {
            powtorka = true;
        }
    });
    if (powtorka) {
        $("#info").text("Juz wybrales ten kolor");
        return;
    } else {
        $("#info").text("");
    }
    if (cnt>=cntmax) {
        $("#info").text("Mozesz wybrac maksymalnie: " + cntmax);
        return;
    }
 
    var new_label = $("<label>");
    var new_input = $("<input>");
    new_input.attr("type", "text");
    new_input.attr("class", "autoinput");
    new_input.attr("id", "autoinput_"+kolorek);
 
    new_input.val(kolorek);
    new_input.attr("style", "background-color:" + kolorek + ";border:0px;:blue;width:200px;");
    //new_input.val(this.title);
 
    var new_link = $("<a>");
    new_link.attr("href", "#");
    new_link.html("usun");
    new_link.click(function()
    {
        $(this).parent("label").remove();
        return false;
    });
 
    new_label.append(new_input);
    new_label.append(new_link);
    $("form[name=formularz]").append(new_label);
 
    return false;
});
});
</script>
</head>
<body>
 
<a href="#" class="dodaj" wrzutadoinputa="red" onclick="return false">_R_</a>
<a href="#" class="dodaj" wrzutadoinputa="green">_G_</a>
<a href="#" class="dodaj" wrzutadoinputa="blue">_B_</a>
<BR>
<a href="#" class="dodaj" wrzutadoinputa="cyan">_C_</a>
<a href="#" class="dodaj" wrzutadoinputa="magenta">_M_</a>
<a href="#" class="dodaj" wrzutadoinputa="yellow">_Y_</a>
<hr/>
<span id="info"></span>
<BR><BR>
 
<form id="myform" name="formularz" action="">
 
</form>
</body>
[HTML] 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.