[AJAX][MySQL][PHP]jQuery - dodawanie rekordów do MySQL, W jaki sposób dodać rekord do bazy bez przeladowania Opcje

[-TomReader-]

Witam,

mam formularz:

[HTML] pobierz, plaintext 
<form action="..." method="post">
Nazwa cześci: <input type="text" name="name" /><br/>
model/wersja: <input type="text" name="model" /><br/>
Kategoria : <select name="kategoria">
<option value="1" />Kategoria 1
<option value="2" />Kategoria 2
<option value="3" />Kategoria 3
</select> <a href="..">Dodaj nową</a>
<input type="submit" value="Dodaj" /><br/>
</form>
[HTML] pobierz, plaintext 

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

[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

[-TomReader-]

Witam,
Absolutnie nie chodzi mi o to aby ktoś pisał za mnie skrypty tylko o jakąś podpowiedź. Ogólnie mało używam JS czy też jQuery ale tym razem jest taka potrzeba
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

[HTML] pobierz, plaintext 
<div class="demo">
 
<div id="dialog-form" title="Nowa kategoria">
	<p class="validateTips">Prosze wypelnic ponizsze pole.</p>
 
	<form>
	<fieldset>
		<label for="name">Nazwa</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>
 
 
<div id="users-contain" class="ui-widget">
	<h1>Kategoria:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
			</tr>
		</thead>
		<form action="..." method="post">
		<tbody>
		<tr>
			<td>Nazwa czesci:<input type="text" name="name"/></td>
		</tr>
		<tr>
			<td>Model:<input type="text" name="model"/></td>
		</tr>
		<tr>
			<td><select name="kat">
				<option value="1"/>Kategoria1
				<option value="2" />Kategoria2
				<option value="3" />Kategoria3
				</select>
			</td>
		</tr>
		<tr>
			<td><input type="submit" /></td>
		</tr>
		</tbody>
		</form>
	</table>
</div>
<button id="create-user">Dodaj</button>
 
</div>
[HTML] pobierz, plaintext 

A taki sktyptu:

[HTML] pobierz, plaintext 
	$(function() {
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		var name = $( "#name" ),
			allFields = $( [] ).add( name ),
			tips = $( ".validateTips" );
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
 
		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}
 
		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
 
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {
				"Dodaj Kategorie": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
					bValid = bValid && checkLength( name, "username", 3, 100 );
					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Nazwa może zawierac tylko znaki a-z,A-Z,0-9." );
					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td><input type=text name=kat_new value=" + name.val() + "></td>" + 
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
 
		$( "#create-user" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	</script>
 
[HTML] pobierz, plaintext 

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