Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne dodawanie pól formularza wraz z trescią w value
Forum PHP.pl > Forum > XML, AJAX
bluepk
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
Nie dzialalo Ci z najprawdopodobniej dlatego, ze 'value'
nie jest prawidlowym atrybutem elementu <a>.

Robiles pewnie takie przypisanie, i to zadziala np. z title:
  1. new_input.val(this.title);
  2. ...
  3. <a href="#" id="doda" title="CostamCostam">Dodaj Costam</a><BR>

Gdybys koniecznie chcial uzywac value (ale value jest nieprawidlowym
atrybutem wiec rownie dobrze mozesz wymyslec dowolna nazwe),
mozna zrobic tak:
  1. new_input.val($(this).attr("wrzutadoinputa"));
  2. ...
  3. <a href="#" id="dodaj" wrzutadoinputa="Ble">Dodaj BleBle</a>
bluepk
Ś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
Bo id z definicji powinno byc unikalne smile.gif

Przyporzadkuj kliniecie w linka wg class i bedzie dobrze.
bluepk
no tak, ale przy class juz nie dziala caly skrypt.
nospor
No bo juz nie $('#dodaj') a $('.nazwaklasy')
I poczytaj o LIVE
bluepk
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
  1. new_input.attr("style", "border:0px;background:" + value + ";width:20px;");
bluepk
przy takim ukladzie nie dziala calosc, probowalem roznych kombinacji i nic

rano juz rozwizanem ten problem. chodzilo o
  1. new_input.attr("style", "background:"+$(this).attr("kolor")+";");
  2.  


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
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.


  1. <!--
  2. <script src="http://code.jquery.com/jquery-latest.js"></script>
  3. -->
  4. <script src="jquery-1.3.2.js" type="text/javascript"></script>
  5.  
  6. <style type="text/css">
  7. label {
  8. display: block;
  9. }
  10. label a{
  11. color: #CC0000;
  12. text-decoration: none; margin-left: 5px;
  13. }
  14. label a:hover{
  15. text-decoration: underline;
  16. }
  17. $(document).ready(function() {
  18. $(".dodaj").click(function()
  19. {
  20. var kolorek = $(this).attr("wrzutadoinputa");
  21.  
  22. var powtorka = false;
  23. var cnt=0;
  24. var cntmax=4;
  25. $("#myform input.autoinput").each(function(){
  26. cnt++;
  27. if (this.id == "autoinput_"+kolorek) {
  28. powtorka = true;
  29. }
  30. });
  31. if (powtorka) {
  32. $("#info").text("Juz wybrales ten kolor");
  33. return;
  34. } else {
  35. $("#info").text("");
  36. }
  37. if (cnt>=cntmax) {
  38. $("#info").text("Mozesz wybrac maksymalnie: " + cntmax);
  39. return;
  40. }
  41.  
  42. var new_label = $("<label>");
  43. var new_input = $("<input>");
  44. new_input.attr("type", "text");
  45. new_input.attr("class", "autoinput");
  46. new_input.attr("id", "autoinput_"+kolorek);
  47.  
  48. new_input.val(kolorek);
  49. new_input.attr("style", "background-color:" + kolorek + ";border:0px;:blue;width:200px;");
  50. //new_input.val(this.title);
  51.  
  52. var new_link = $("<a>");
  53. new_link.attr("href", "#");
  54. new_link.html("usun");
  55. new_link.click(function()
  56. {
  57. $(this).parent("label").remove();
  58. return false;
  59. });
  60.  
  61. new_label.append(new_input);
  62. new_label.append(new_link);
  63. $("form[name=formularz]").append(new_label);
  64.  
  65. return false;
  66. });
  67. });
  68. </head>
  69.  
  70. <a href="#" class="dodaj" wrzutadoinputa="red" onclick="return false">_R_</a>
  71. <a href="#" class="dodaj" wrzutadoinputa="green">_G_</a>
  72. <a href="#" class="dodaj" wrzutadoinputa="blue">_B_</a>
  73. <BR>
  74. <a href="#" class="dodaj" wrzutadoinputa="cyan">_C_</a>
  75. <a href="#" class="dodaj" wrzutadoinputa="magenta">_M_</a>
  76. <a href="#" class="dodaj" wrzutadoinputa="yellow">_Y_</a>
  77. <hr/>
  78. <span id="info"></span>
  79. <BR><BR>
  80.  
  81. <form id="myform" name="formularz" action="">
  82.  
  83. </form>
  84. </body>
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.