Forum PHP.pl > Zmiana skryptu formularz<->ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana skryptu formularz<->ajax

ksenonlogin

22.08.2012, 17:00:01

Witam

Chodzi mi o wskazówki które pozwolą przerobić tak skrypt by był on bardziej uniwersalny.
W obecnej chwili wygląda to tak że do każdego formularza muszę tworzyć oddzielny skrypt, fajnie by było gdyby skrypt był oddzielnie w <head></head>, a takie parametry jak adres pliku .php czy wartości <input /> były przekazywane z poziomu formularza do skryptu który wysyła dane na podany adres w formularzu.

Proszę o jakieś wskazówki które pozwolą przerobić (bez wielkich zmian) obecny skrypt.

[HTML] pobierz, plaintext 
<html>
<head>
	<title>Kurs jQuery #3 example 7</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#guzik").click(function() {
			var tekst = $('input[name=tekst]').val();
 
			$.ajax({
				url: "php1.php",
				type: "POST",
				data: "indeks="+tekst,
				success: function(msg) {
					$("#kontener").text(msg);
				}
			});
		});
	});
	</script>
</head>
 
<body>
	<form action="">
		<input type="text" name="tekst" />
		<input type="button" id="guzik" value="KLIK" />
	</form>
	<div id="kontener"></div>
</body>
</html>
[HTML] pobierz, plaintext

Tomplus

22.08.2012, 18:42:01

Pobierz wartość zmiennej ID gdzie input[type=button] i potem zamisat #guzika przypisz zmienną i powinno uruchamiać Ci wszystkie guziki.

kamil_oos

29.08.2012, 20:56:23

nadaj formularzowi jakaś klasę np. class="myForm" oraz w action zadeklaruj adres gdzie chcesz to wysłać.

w js:

[PHP] pobierz, plaintext 
 
$(document).ready(function() {
	$("form.myForm").submit(function(data) { //po kliknieciu nastepuje wyslanie forma - to przejmuje to zdarzenie
		var url = $(this).attr('action'); //pobieramy url z atrubutu "action" wysylanego formularza
 
		$.ajax({
			url: url,
			type: "POST",
			data: $(this).serialize(), // oznacza to ze caly formularz - wszystkie inputy zostana dodane do requesta
		        success: function(msg) {
			    $("#kontener").text(msg);
			}
		});
               return false;
	});
});
[PHP] pobierz, plaintext

czyli, nie musisz deklarowac specjalnie url ani przycisku oraz wszystkie pola forma zostana wysłane. NIE TESTOWANE - napisane z palca.

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.