[jQuery] Pomoc w wysłaniu danych, czyli dlaczego <button type=submit> nie wysyla danych ? Opcje

[Tomplus]

Witam,

Mam taki prosty kod jQuery

[HTML] pobierz, plaintext 
$(document).ready( function(){
	$('#ZapiszDane').submit(function() {
		$.post('zapiszdane.php', $('#ZapiszDane').serialize()  , function(data) {
				alert(data);
			});
			return false;
		});
	})
[HTML] pobierz, plaintext 

oraz formularz też wyjątkowo prosty:

[HTML] pobierz, plaintext 
<form id='ZapiszDane' action='zapiszdane.php' method='post'> 
  <button type='submit' name='par' value='1416'>Wyslij</button>
  <input type='radio' id='radio1_1416' name='r1[1416]' checked><label for='radio1_1416'></label>
  <input type='radio' id='radio2_1416' name='r2[1416]'><label for='radio2_1416'></label>
  <input type='radio' id='radio3_1416' name='r3[1416]'><label for='radio3_1416'></label>
</form>
[HTML] pobierz, plaintext 

Nie wiem czego nie dodaje, ale nie potrafię uzyskać danych name and value z guzika BUTTON.

Gdy wysyłam bez kodu JS, to mam wszystkie dane czyli $_POST['par'] oraz $_POST['r'.$i] i jestem zadowolony, ale po wprowadzeniu kodu jQuery, guzik button nie wysyła mi danych do pliku z wyjątkiem danych z INPUTów.

Aha... <input type='submit'/> też nie wysyła przy jQuery.

Co zrobić aby jQuery wysłało WSZYSTKIE dane?

[wNogachSpisz]

[JAVASCRIPT] pobierz, plaintext 
$(document).ready( function(){
	$('#ZapiszDane').submit(function() {
		var self = this
 
		var buttons_params = []
		$(self).find('button').each(function(){
			buttons_params.push( this.name + '=' + this.value )
		})
		var params = $(self).serialize() + '&' + buttons_params.join('&')
 
		$.post('zapiszdane.php', params, function(data) {
			alert(data)
		});
	});
	return false
})
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował wNogachSpisz 9.04.2011, 17:45:09

[Tomplus]

Poprawiłem trochę twój skrypt bo brakowało średników i nie działała funkcja submit po kliknięciu i skrypt nadal nie działa tak jak należy.

bo faktycznie dostarcza mi dane ale co zrobić jeżeli mam więcej niż guzik BUTTON w tym samym formularzu ?
np.

<button type='submit' name='par' value='1416'>Wyslij</button>
<button type='submit' name='par' value='1466'>Wyslij</button>
<button type='submit' name='par' value='2010'>Wyslij</button>

wtedy za każdym razem gdy kliknę submit wysle mi wartość ostatnią 2010, a nie np. 1416.

[HTML] pobierz, plaintext 
	$(document).ready( function(){ 
		var self = this;
		var buttons_params = [];
		$(self).find('button').each(function(){
			buttons_params.push( this.name + '=' + this.value );
		})
		var params = $(self).serialize() + '&' + buttons_params.join('&');
 
 
		$('#ZapiszDane').submit(function() {
		$.post('zapiszdane.php', params, function(data) {
				alert(data);
			});
			return false;
		});
	})
[HTML] pobierz, plaintext 

jak ten problem rozwiązać ?

Ten post edytował Tomplus 9.04.2011, 18:08:30

[wNogachSpisz]

za każdym razem gdy kliknę submit wysle mi wartość ostatnią 2010, a nie np. 1416.

I bardzo dobrze, wszystkie butonny mają taką samą nazwę, więc brany ostatni w kolejności..
Czego innego byś chciał?

Poprawiłem trochę twój skrypt bo brakowało średników

A po co średniki?

[Tomplus]

I bardzo dobrze, wszystkie butonny mają taką samą nazwę, więc brany ostatni w kolejności..
Czego innego byś chciał?

To że gdy uzytkownik ma wyłączoną obsługę JS to formularz będzie wysyłał informacje tylko guzika który został kliknięty, co jest prawidłowe i chciałem to samo przy pomocy obsługi JQuery (np. gdy kliknę guzik sie wyłączy, ale to potrafię)
Dlatego pobieranie value ostatniego buttona o tej samej nazwie nie dostarcza mi prawidłowych informacji.

A po co średniki?

hmm... kod ze średnikami lepiej wygląda, wiadomo gdzie się linijka kończy.

[celbarowicz]

Może tak?

[PHP] pobierz, plaintext 
function zapisz_klienta(){ $(document).ready(function(){ var zm1=$('#nazwisko').val();	                               
                                                     var zm2=$('#imie').val();	
													 var zm3=$('#pesel').val();
													 var zm4=$('#oosobie').val();
													var data = 'a1='+zm1+'&'+'a2='+zm2+'&'+'a3='+zm3+'&'+'a4='+zm4;												
												$.ajax({type:"POST",
                                                         url:"zapisz_klienta.php",                                                      
                                                        	data: data,
																success: function(){ }
                                                       });
                                                });
 
 
						 }
 
[PHP] pobierz, plaintext 

a w buttonie dajesz : <input type="button" name="zapisz_klienta" id="zapisz_klienta" onClick="zapisz_klienta()" value="Zapisz klienta">
Sprawdziłem i działa. Jak przesłać hurtowo dane z formularza?(IMG:style_emoticons/default/questionmark.gif) ?...

[wNogachSpisz]

To że gdy uzytkownik ma wyłączoną obsługę JS to formularz będzie wysyłał informacje tylko guzika który został kliknięty, co jest prawidłowe i chciałem to samo przy pomocy obsługi JQuery (np. gdy kliknę guzik sie wyłączy, ale to potrafię)
Dlatego pobieranie value ostatniego buttona o tej samej nazwie nie dostarcza mi prawidłowych informacji.

Fakt że dajesz więcej niż jeden submit zdradza błąd natury projektowej i powinieneś przemyśleć na nowo strukturę formularza, tak by nie trzeba było rzeźbić.

hmm... kod ze średnikami lepiej wygląda, wiadomo gdzie się linijka kończy.

Wg mnie jest dokładnie odwrotnie, kod bez średników wygląda lepiej.
Na prawde potrzebujesz średnika żeby określić gdzie kończy się linia?
W zeszycie do Języka polskiego też wstawiasz średniki na końcu każdego wiersza?
Ciekaw jestem co na to Twoj nauczyciel (IMG:style_emoticons/default/happy.gif)

[Tomplus]

u mnie nie śmiga ten kod,

dla testów po wysłaniu do alert(data) skrypt zapiszdane.php drukuje mi wszystkie _POST funkcją print_r($_POST), szybko widzę co po kliknięciu submit mi się wysyła, a co wysyla mi się bez jQuery.

[wNogachSpisz]

Pytanie brzmi:
Czy nie prościej zrobić ten formularz bez elementów typu button?

[Tomplus]

Fakt że dajesz więcej niż jeden submit zdradza błąd natury projektowej i powinieneś przemyśleć na nowo strukturę formularza, tak by nie trzeba było rzeźbić.

Architektura jest dobra.

Jeżeli bez użycia JS mam tablicę o

array (
par = 1416,
r1 = array (
1416 => on
),
)

to są dane w postaci które potrzebuje do wykorzystania.
a ja potrzebuje tylko pomoc w pobraniu danych z buttona który zawiera informacje, a jego nazwa również jest tablicą.

czyli mam dane:

[HTML] pobierz, plaintext 
<button type='submit' name='par' value='1416'>Wyslij</button>
<button type='submit' name='par' value='1466'>Wyslij</button>
<button type='submit' name='par' value='2010'>Wyslij</button>
[HTML] pobierz, plaintext 

ale w innym miejscu są już dane:

[HTML] pobierz, plaintext 
<button type='submit' name='par[1]' value='1416'>Wyslij</button><button type='submit' name='par[2]' value='1416'>Wyslij</button><button type='submit' name='par[3]' value='1416'>Wyslij</button>
<button type='submit' name='par' value='1466[1]'>Wyslij</button><button type='submit' name='par[2]' value='1466'>Wyslij</button><button type='submit' name='par[3]' value='1466'>Wyslij</button>
<button type='submit' name='par[1]' value='2010'>Wyslij</button><button type='submit' name='par[2]' value='2010'>Wyslij</button><button type='submit' name='par[3]' value='2010'>Wyslij</button>
[HTML] pobierz, plaintext 

i mam macierz, kliknięty button ma wysłać do skryptu dane które są tablicą lub zwykłą zmienną, ale to nie jest wazne, bo skrypt przetwarza prawidłowo dane jeżeli są wysłane bez JQuery


Więc potrzebuje wysłać to co jest w NAME i VALUE, tak jak to się dzieje z INPUT RADIO

Wg mnie jest dokładnie odwrotnie, kod bez średników wygląda lepiej.
Na prawde potrzebujesz średnika żeby określić gdzie kończy się linia?
W zeszycie do Języka polskiego też wstawiasz średniki na końcu każdego wiersza?
Ciekaw jestem co na to Twoj nauczyciel (IMG:style_emoticons/default/happy.gif)

bez przesady.. ale to jest przyzwyczajenie z pisania kodu w PHP.

Pytanie brzmi:
Czy nie prościej zrobić ten formularz bez elementów typu button?

Ale jak napisałem, przy zastosowaniu INPUT type='submit' też nie wysyła danych, więc na jedno wychodzi.

A dlaczego stosuje BUTTON ? Dlatego że umożliwia mi wyświetlenie treści innej niż wartości guzika.
Fakt móglbym zastosować INPUT HIDDEN oraz INPUT SUBMIT
ale po co ? skoro HTML umożliwia skrócenie tego zapisu do jednego tagu.


Ten post edytował Tomplus 9.04.2011, 19:39:41

[wNogachSpisz]

ale po co ? skoro HTML umożliwia skrócenie tego zapisu do jednego tagu.

Z bardzo prostej przyczyny, jQuery nie radzi sobie z serializowaniem takiego formularza.

[Tomplus]

Z bardzo prostej przyczyny, jQuery nie radzi sobie z serializowaniem takiego formularza.

Jeżeli tak to jeszcze sobie nie radzi, ale chyba są sposoby aby to ominąć ?
bo jakoś wierzyć mi się nie chce że nie ma możliwości w jQuery pobrania zmiennych z tagu.

[wNogachSpisz]

Jeżeli tak to jeszcze sobie nie radzi, ale chyba są sposoby aby to ominąć ?

Są, tylko po co rzeźbić?
Nie prościej utworzyć prawidłowy formularz?

bo jakoś wierzyć mi się nie chce że nie ma możliwości w jQuery pobrania zmiennych z tagu.

Czymkolwiek są "zmienne z tagu", znajdzie się sposób aby przy pomocy javascript się do tego dobrać.

Aha i jeszcze jedno:

Kod

If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

Czytaj: Twój fantastyczny formularz nie działa pod Internet Explorerem..
Czy to już wystarczy abyś dał sobie spokój, czy trzeba Ci przedstawić jeszcze więcej powodów?

[Tomplus]

Ale pod którą wersją IE ? 6.0 ?

[wNogachSpisz]

Ale pod którą wersją IE ? 6.0 ?

Pod każdą.

[Tomplus]

Powyższego skryptu nie sprawdzałem, ale sprawdzałem poniższy kod dla formularza powyższego i nie działa tylko dla IE 6.
tzn. działa, ale trzeba zrobić pare korekt specjalnie dla tej przeglądarki, dla innych, IE 7, FF 3 i wyżej, Opera 9 i wyżej i Chrome 11 - działa tak jak nalezy. Sam testowałem.

Po drugie przedstawię rozwiązanie problemu od użytkownika kbwood, ale ja zmodyfikowałem dostosowując do mojego problemu (dokladnie to co związane jest z valueButton).
Mam nadzieję że pomogę chociaż trochę innym użytkownikom które borykają się z podobnym problemem.

[HTML] pobierz, plaintext 
	$(document).ready( function(){ 
		var submitButton = '';
                var valueButton = '';
		$('#ZapiszDane button').click(function() {
			submitButton = $(this).attr('name');
			valueButton = $(this).attr('value');
		});
		$('#ZapiszDane').submit(function() {
			var params = $(self).serialize() + '&' + submitButton + '=' + valueButton;
			$.post('zapiszdane.php', params, function(data) {
				alert(data);
			});
		return false;
		});
	})
[HTML] pobierz, plaintext 

A oto oczekiwany wynik po kliknieciu:
(IMG:http://www.image-share.com/upload/596/91.gif)

Dziękuje za uwagę (IMG:style_emoticons/default/smile.gif)