POST bez przeładowania strony Opcje

[TwojPan]

Czesc,

Nie znam zupepnie JS czy AJAX. Szukam najprostszego rozwiazania tj. podczas wcisniecia SUBMIT aby strona sie nie przeladowywala tylko nie wiem jakis ruchomy gif lub napis 'dodawanie tresci' i na koncu info ze zostalo dodane. Nic wiecej. Czy ktos moglby mi pomoc z tym i ma gotowe rozwiazanie ? Tresc z formulara beda zapisywane w osobnym pliku .php

Formularz zawiera pola checkbox, radio, text, textarea. Nie potrzebuje zadnej walidacji oniewaz nie musi zostac nic wybrane - to tylko opcja.
Szukam w necie od rana ale tylko jakies bardzo skomplikowane rzeczy po 200 lini kodu i zbyteczne wlasnie walidacje etc..

szukam czego naprawde prostego.

Ten post edytował TwojPan 14.06.2014, 10:54:21

[johny_s]

http://malsup.com/jquery/form/

[rad11]

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
                $('#submit').click(function() {
                    $.ajax({
                        type: "POST",
                        url: "sciezka do pliku",
                        data: $("#form").serialize(),
                        beforeSend: function() {
                            $('.loader').html('<img src="sciezka do gifu" />').show();
                        },
                        dataType: "html",
                        success: function(result) {
                            $("#error_message").html(result);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                            alert(ajaxOptions);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
                        }
                    });
                    return false;
 
 
                });
 
            });
[PHP] pobierz, plaintext 

Ten post edytował rad11 14.06.2014, 11:23:43

[TwojPan]

http://malsup.com/jquery/form/

Dziekuje , sprawdze.

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
                $('#submit').click(function() {
                    $.ajax({
                        type: "POST",
                        url: "sciezka do pliku",
                        data: $("#form").serialize(),
                        beforeSend: function() {
                            $('.loader').html('<img src="sciezka do gifu" />').show();
                        },
                        dataType: "html",
                        success: function(result) {
                            $("#error_message").html(result);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                            alert(ajaxOptions);
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
                        }
                    });
                    return false;
 
 
                });
 
            });
[PHP] pobierz, plaintext 

czy #submit to name=submit w <input type=submit> ? cy submit jako pole submit??

[Turson]

submit to id elementu

[rad11]

Tak jak Turson napisał.

[TwojPan]

Tak jak Turson napisał.

mozesz mi podac prykladowy formularz

[Turson]

Formularz powinieneś wiedzieć jaki zrobić, a submit to

[HTML] pobierz, plaintext 
<input type="submit" id="submit">
[HTML] pobierz, plaintext 

Ten post edytował Turson 14.06.2014, 16:50:15

[TwojPan]

Formularz powinieneś wiedzieć jaki zrobić, a submit to

[HTML] pobierz, plaintext 
<input type="submit" id="submit">
[HTML] pobierz, plaintext 

Dzieki bardzo. Jeszcze nie mialem czasu tego sprawdzic ale zrobie to dzisiaj i dam znac. Jeszcze raz bardzo dziekuje.

Jeszcze mam pytanie male. Moze wydac sie glupie ale czy to "html" w tresci moze byc skoro bede mial pliki *.php ?

Ten post edytował TwojPan 16.06.2014, 06:46:42

[rad11]

To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie

Ten post edytował rad11 16.06.2014, 07:08:01

[TwojPan]

To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie

Sory nie zauwazylem. Zaraz Ci dam tego plusa

Niestety cos nie dziala:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<form ACTION="save.php" method=post>
<input TYPE="text" name="ble">
<input TYPE="submit" id="submit" value=poslij>
</FORM>
[HTML] pobierz, plaintext 

plik.js

[HTML] pobierz, plaintext 
$(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="sciezka do gifu" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
[HTML] pobierz, plaintext 

pik: save.php

[PHP] pobierz, plaintext 
<?
$foo = fopen($_POST['ble'], 'w');
?>
[PHP] pobierz, plaintext 

Nic sie nie wykonuje.

Ten post edytował TwojPan 16.06.2014, 07:42:07

[Turson]

Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

[TwojPan]

Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

Nie otwieram lecz probuje ustawic. 'w' ustawia plik. Nie ma znaczenia czy cos zapisze do srodka czy nie i czy to wyswietle. Powinien pik sie ustawic o nazwie z pola input.



Ten post edytował TwojPan 16.06.2014, 07:32:00

[rad11]

[PHP] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="ajax-loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<form action="" method="post" id="form">
	    <input type="text" name="input">
	    <input type="submit" value="poslij"  id="submit" >
	</form>
 
<div class="loader"></div>
[PHP] pobierz, plaintext 

Ten post edytował rad11 16.06.2014, 09:32:04

[TwojPan]

[PHP] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<img src="ajax-loader.gif" />').show();
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<form action="" method="post" id="form">
	    <input type="text" name="input">
	    <input type="submit" value="poslij"  id="submit" >
	</form>
 
<div class="loader"></div>
[PHP] pobierz, plaintext 

Ok, teraz dziala dane z formularza przekazywane sa do pliku save.php.
Mialbym jeszcze jedna prosbe jesli chodzi o ten przyklad jesli mozna.
Czy bylbys w stanie dorobic jeszcze jedna rzecz? mianowicie jakies info / cos jak ten div class=loader / ze po wykonaniu wyswietla sie info ze dane zostaly przeslane.
Ja z tym sobie nie poradze.

[Turson]

Kod

success: function(result){
alert('ok');
}

[TwojPan]

Kod

success: function(result){
alert('ok');
}

Fajnie, tylko gdzie to wsadzic

Czy takie rozwiazanie jest poprawne ? / drugalinijka tylko dodana /

[PHP] pobierz, plaintext 
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
 
		alert('AJAX request made!');
[PHP] pobierz, plaintext 

[Turson]

[JAVASCRIPT] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	    <script type="text/javascript">
	    $(document).ready(function() {
 
 
 
                $('#submit').click(function() {
 
                    $.ajax({
 
                        type: "POST",
 
                        url: "save.php",
 
                        data: $("#form").serialize(),
 
                        beforeSend: function() {
 
                            $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
 
                        },
 
                        dataType: "html",
 
                        success: function(result) {
 
                            $("#error_message").html(result);
                            alert('jakis tekst');
                            $('div.loader').hide();
 
 
 
                        },
 
                        error: function(xhr, ajaxOptions, thrownError) {
 
                            alert(xhr.status);
 
                            alert(thrownError);
 
                            alert(ajaxOptions);
 
                            $('.loader').html('<img src="ajax-loader.gif" />').hide();
 
                        }
 
                    });
 
                    return false;
 
 
 
 
 
                });
 
 
 
            });
 
	</script>
[JAVASCRIPT] pobierz, plaintext 

[rad11]

mogles stworzyc poprostu pod formularzem:

[PHP] pobierz, plaintext 
<div id='error_message'></div>
[PHP] pobierz, plaintext 

i np w skrypcie php zrobic prosty warunek ze jezeli foo sie wykona to dac echo ze sie udalo.

Po to miedzy innymi jest linijka

[PHP] pobierz, plaintext 
 $("#error_message").html(result);
[PHP] pobierz, plaintext 

Ten post edytował rad11 16.06.2014, 12:33:02

[TwojPan]

Panowie slicznie dziekuje choc ten drugi przyklad nie za bardzo dziala. Tzn dzialac dziala ale nie wyswietla sie ten loader /ten caly ostatni przyklad/ Mniejsza z tym. Panowie, jak zrobic <div> ktory zaladuje sie z linkiem 'zamknij' zamiast alert ?

Cos w stylu:

[PHP] pobierz, plaintext 
$('.loader').html('<div style="width:200px; height:200px; top:50%; left: 50%; background-color: grey; opacity: 0.8"><div style="vertical-align: middle; text-align: center"><img src="ajax-loader.gif" /></div></div>').show();
[PHP] pobierz, plaintext