Forum PHP.pl > [jQuery] Wysyłanie formularzy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] Wysyłanie formularzy

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

ylk

31.03.2011, 08:44:39

Posiadam takie oto formularze ładowane dynamicznie po kliknięciu w button:

[HTML] pobierz, plaintext 
<form id=settingsForm>
		<input type=hidden name=id value='{$this->params['id']}'>
		<input name=name type=hidden value='{$row['name']}'>
		<textarea name=value id=value rows=10 cols=100>{$row['value']}</textarea><br>
		Sortowanie:<br><input name=sort value='{$row['sort']}'><br><br>
		<button><img src='img/save16.png'> <b>Zapisz</b> [Enter]</button>
</form>
 
<form id=maladiesFrom>
		<input type=hidden name=id value='{$this->params['id']}'>
		<input name=name id=name value='{$row['name']}' size=100><br>
		Nr statystyczny:<br><input name=nr value='{$row['nr']}'><br><br>
		<button><img src='img/save16.png'> <b>Zapisz</b> [Enter]</button>
</form>
[HTML] pobierz, plaintext

Oba oprogramowane są przy użyciu jQuery w sposób następujący:

[HTML] pobierz, plaintext 
	$('.displayForm').click(function(){
		var a=$(this).val();
		var a=a.split('-');
		$('#win').load("ajax.php?c=settings&m=getForm&setting_name="+a[0]+"&id="+a[1],function(){
			centerWin();
			$('#value').focus();
			$('#settingsForm').submit(function(event){
				event.preventDefault();
				$.post('ajax.php',$(this).serialize()+"&c=settings&m=add",function(){
					location.reload();
				});
			});
		});
	});
 
	$('.displayMaladiesForm').click(function(){
		$('#win').load("ajax.php?c=settings&m=getMaladiesForm&id="+$(this).val(),function(){
			centerWin();
			$('#name').focus();
			$('#maladiesForm').submit(function(event){
				event.preventDefault();
				$.post('ajax.php',$(this).serialize()+"&c=settings&m=addMalady",function(){
					location.reload();
				});
			});
		});
	});
[HTML] pobierz, plaintext

Czyli niemal identycznie. Pierwszy formularz wysyła się AJAXem tak jak tego oczekuję, natomiast drugi uparcie próbuje wysyłać GETem kompletnie ignorując $('#maladiesForm').submit(). Zmarnowałem już na to strasznie dużo czasu i nie widzę błędu

jaslanin

31.03.2011, 13:33:55

Nie powinno się zagnieżdżać funkcji obsługi zdarzeń w ten sposób. To że pierwszy formularz działa jest dziełem przypadku. Przykład:

[PHP] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <title>Untitled Document</title>
    </head>
 
    <body>
        <script type="text/javascript">
            $(document).ready(function() { // wait for dom load
 
                // good way
                $('#form1').submit(function() { // catch submit event
 
                    alert('i work');
 
                    return false; // block form submit, event.preventDefault(); also work but i prefer this.
                });
 
                // bad way
                $('.doNotDoThis').click(function() { // catch submit event
 
                    $(this).val();
 
                    $('#form2').submit(function(event) { // catch submit event
 
                        event.preventDefault();
 
                        alert('i dont work');
 
                    });
 
                    return false; // block form submit
                });
 
            });
        </script>
 
 
        <form action="" name="form1" id="form1">
            <input type="text" value="form1" />
            <button>Wyślij</button> <!-- html tag buttton also trigger submit event in form, see: [url="http://www.w3schools.com/tags/tag_button.asp"]http://www.w3schools.com/tags/tag_button.asp[/url] -->
        </form>
 
        <form action="" name="form2" id="form2">
            <input id="testInput" type="text" value="form2" />
            <button class="doNotDoThis">Wyślij</button> <!-- html tag buttton also trigger submit event in form, see: [url="http://www.w3schools.com/tags/tag_button.asp"]http://www.w3schools.com/tags/tag_button.asp[/url] -->
        </form>
 
    </body>
</html>
[PHP] pobierz, plaintext

PS. Twój opis problemu nie zasługuje by na niego odpowiadać, podajesz bowiem wyrywki kodu, w dodatku niepełne. Np. w kodzie nigdzie nie ma elementów displayForm, displayMaladiesForm, a odwołujesz się do nich przez jquery.

Polecam przeczytanie co robi w Twoim zastosowaniu funkcja submit: http://api.jquery.com/submit/

ylk

31.03.2011, 13:36:37

Napisałem przecież, że formularz jest ładowany dynamicznie po kliknięciu w button, więc idzie sie domyślić co to displayForm i displayMaladiesForm. W związku z tym, że formularze są ładowane AJAXem, nie da się uniknąć zagnieżdżeń.

BTW: nie działało bo zrobiłem literówkę, której nie mogłem się przez 2h dopatrzeć

dzięki za odpowiedź!
pozdro!

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.