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> (IMG:style_emoticons/default/questionmark.gif) ? 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 (IMG:style_emoticons/default/questionmark.gif)

[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 (IMG:style_emoticons/default/haha.gif)

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 (IMG:style_emoticons/default/haha.gif)

Sory nie zauwazylem. Zaraz Ci dam tego plusa (IMG:style_emoticons/default/biggrin.gif)

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 (IMG:style_emoticons/default/smile.gif) 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?(IMG:style_emoticons/default/questionmark.gif) 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 (IMG:style_emoticons/default/biggrin.gif)

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