Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][MySQL][PHP]jQuery - dodawanie rekordów do MySQL
Forum PHP.pl > Forum > Przedszkole
TomReader
Witam,

mam formularz:
  1. <form action="..." method="post">
  2. Nazwa cześci: <input type="text" name="name" /><br/>
  3. model/wersja: <input type="text" name="model" /><br/>
  4. Kategoria : <select name="kategoria">
  5. <option value="1" />Kategoria 1
  6. <option value="2" />Kategoria 2
  7. <option value="3" />Kategoria 3
  8. </select> <a href="..">Dodaj nową</a>
  9. <input type="submit" value="Dodaj" /><br/>
  10. </form>

i dwie tabele:
1. `czesci` o polach: ID | NAZWA | MODEL | KATEGORIA
2. `kategorie` o polach: ID | NAZWA

Potrzebuję zrobić coś takiego:
1. po kliknięciu w link Dodaj nową chcę aby pojawiło się okienko jQuery (dialog) - w tym okienku muszę mięć pole w którym mogę wpisac nazwę nowej kategorii i mieć przyciski "Dodaj" "Anuluj".
2. Po wpisaniu nazwy i kliknięciu "Dodaj":
rekord z nazwą nowej kategorii ma dodać się do bazy mysql -> okienko jQuery automatycznie ma się zamknąc -> a w polu <select> musi dodać się nowy <option> o ID właśnie dodanej kategorii.
Ważne jest to aby po dodaniu nowej kategori do selecta wpisane dane w innych inputach (name/model) nie zostały wykasowane.

Zamiast dodania nowego optiona w select może być coś innego np.
<input type="text" value="nazwa_kategorii" readonly /><input type=hidden name="kategoria" value="4"/>
<div>nazwa_kategorii</div><input type=hidden name="kategoria" value="4"/>

Prosze o pomoc najlepiej jakiś przykłady bo nie mam zielonego pojecia jak to ugryźć.
Próbowałe przerobić formularz z http://jqueryui.com/demos/dialog/#modal-form jednak bezskutecznie (okienko się pojawiało wartośc na stronie się dodawala jednak formularz nie 'zaczesywał' nowo dodanego pola).

Z góry dziękuję za pomoc smile.gif
csharp
dla mnie ten przykład jest jak najbardziej ok - chyba, że nie do końca zrozumiałem o co Ci chodzi...

napisz co dokładnie chciałbyś przerobić w tym formularzy jQuery to pewnie szybciej Ci pomożemy, w innym wypadku nikt nie będzie ślęczał i pisał Ci skryptów lub ich szukał za Ciebie smile.gif
TomReader
Witam,
Absolutnie nie chodzi mi o to aby ktoś pisał za mnie skrypty snitch.gif tylko o jakąś podpowiedź. Ogólnie mało używam JS czy też jQuery ale tym razem jest taka potrzeba snitch.gif
napiszę tak jak robiłem na przykładzie z modal-form ze strony jquery-ui.
mam formularz na stronie (screen1) ->klikam dodaj->pojawia mi się okno dialog(screen2) -> wpisuję tam nazwę kategorii -> klikam dodaj -> na stronie dodaje mi się input (screen3)-> klikam Wyślij zapytanie -> w tablicy $_POST nie widzę wartości nowrgo inputa przez co nie mogę dodać tej wartości do bazy.
screen1


screen2


screen3


Taki mam kod html
  1. <div class="demo">
  2.  
  3. <div id="dialog-form" title="Nowa kategoria">
  4. <p class="validateTips">Prosze wypelnic ponizsze pole.</p>
  5.  
  6. <form>
  7. <label for="name">Nazwa</label>
  8. <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  9. </form>
  10. </div>
  11.  
  12.  
  13. <div id="users-contain" class="ui-widget">
  14. <h1>Kategoria:</h1>
  15. <table id="users" class="ui-widget ui-widget-content">
  16. <tr class="ui-widget-header ">
  17. <th>Name</th>
  18. </tr>
  19. </thead>
  20. <form action="..." method="post">
  21. <tr>
  22. <td>Nazwa czesci:<input type="text" name="name"/></td>
  23. </tr>
  24. <tr>
  25. <td>Model:<input type="text" name="model"/></td>
  26. </tr>
  27. <tr>
  28. <td><select name="kat">
  29. <option value="1"/>Kategoria1
  30. <option value="2" />Kategoria2
  31. <option value="3" />Kategoria3
  32. </select>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td><input type="submit" /></td>
  37. </tr>
  38. </tbody>
  39. </form>
  40. </table>
  41. </div>
  42. <button id="create-user">Dodaj</button>
  43.  
  44. </div>


A taki sktyptu:
  1. $(function() {
  2. $( "#dialog:ui-dialog" ).dialog( "destroy" );
  3. var name = $( "#name" ),
  4. allFields = $( [] ).add( name ),
  5. tips = $( ".validateTips" );
  6. function updateTips( t ) {
  7. tips
  8. .text( t )
  9. .addClass( "ui-state-highlight" );
  10. setTimeout(function() {
  11. tips.removeClass( "ui-state-highlight", 1500 );
  12. }, 500 );
  13. }
  14.  
  15. function checkLength( o, n, min, max ) {
  16. if ( o.val().length > max || o.val().length < min ) {
  17. o.addClass( "ui-state-error" );
  18. updateTips( "Length of " + n + " must be between " +
  19. min + " and " + max + "." );
  20. return false;
  21. } else {
  22. return true;
  23. }
  24. }
  25.  
  26. function checkRegexp( o, regexp, n ) {
  27. if ( !( regexp.test( o.val() ) ) ) {
  28. o.addClass( "ui-state-error" );
  29. updateTips( n );
  30. return false;
  31. } else {
  32. return true;
  33. }
  34. }
  35.  
  36. $( "#dialog-form" ).dialog({
  37. autoOpen: false,
  38. height: 200,
  39. width: 350,
  40. modal: true,
  41. buttons: {
  42. "Dodaj Kategorie": function() {
  43. var bValid = true;
  44. allFields.removeClass( "ui-state-error" );
  45. bValid = bValid && checkLength( name, "username", 3, 100 );
  46. bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Nazwa może zawierac tylko znaki a-z,A-Z,0-9." );
  47. if ( bValid ) {
  48. $( "#users tbody" ).append( "<tr>" +
  49. "<td><input type=text name=kat_new value=" + name.val() + "></td>" +
  50. "</tr>" );
  51. $( this ).dialog( "close" );
  52. }
  53. },
  54. Cancel: function() {
  55. $( this ).dialog( "close" );
  56. }
  57. },
  58. close: function() {
  59. allFields.val( "" ).removeClass( "ui-state-error" );
  60. }
  61. });
  62.  
  63. $( "#create-user" )
  64. .button()
  65. .click(function() {
  66. $( "#dialog-form" ).dialog( "open" );
  67. });
  68. });
  69. </script>
  70.  


Mam nadzeję, że to jakoś bardziej nakreśli to czego potrzebuje.
Z góry przepraszam jeśli piszę coś nie jasno lub źle, są to moje pierwsze posty na forum.
miniol
Podepnę się pod temat, bo mam dokładnie taką samą zagwozdkę.
Chciałbym skorzystać z tego przykładu: http://jqueryui.com/dialog/#modal-form

Jedyne czego nie wiem, to w jaki sposób dodać zapytanie mysql bez przeładowywania strony. Bo dodanie do formularza znacznika action="dodanie.php" nie rozwiązuje problemu (przynajmniej tak mi się wydaje, bo nie próbowałem). Po porostu będę przeniesiony do strony "dodanie.php". Myślłem też o dodaniu okienka popup które zaraz po wykonaniu zamknie się automatycznie, ale to trochę przekombinowane.

Czy ktoś może mnie naprowadzić na dobrą drogę?
nospor
Jak chcesz bez przeładowania strony to musisz uzyc AJAX. Skoro uzywasz już jQuery to sprawe masz na dobrą sprawe zalatwioną.
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.