• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wciśnięcie przycisku - wykonanie submit oraz onclick.

VPS Starter Arubacloud
0 głosów
1,915 wizyt
pytanie zadane 28 czerwca 2018 w HTML i CSS przez Czapczap Nowicjusz (230 p.)

Hej,

czy ktoś jest w stanie mi podpowiedzieć w jaki sposób wykonać działanie na jednym przycisku - najpierw submit a potem wykonanie funkcji?

Coś w rodzaju (to działa):

<button type="submit" onMouseOver="make_request('get.cgi')">Zaktualizuj dane</button> 

Jednak chciałbym, żeby funkcja make_request('get.cgi')" wykonała się niemal od razu a nie dopiero gdy zdejmę mysz z przycisku.

Próbowałem jeszcze:

<button type="submit" onclick="make_request('get.cgi')">Zaktualizuj dane</button> 

Ale nie działa.

Ktoś coś?

Pozdrawiam!

3 odpowiedzi

+1 głos
odpowiedź 28 czerwca 2018 przez RafalS VIP (122,820 p.)
https://www.w3schools.com/Jsref/event_onmousedown.asp

PS nie znam się na tym. Wygoglowałem javascript events. Znalazłem mouse events a w nich onmousedown. Polecam też tak robić :P
komentarz 28 czerwca 2018 przez Czapczap Nowicjusz (230 p.)
Albo tak, albo po odświeżeniu strony wczytać ponownie zapisane dane.
komentarz 28 czerwca 2018 przez RafalS VIP (122,820 p.)
Jest coś takiego jak ajax i XMLHttpRequest. Wtedy możesz w tle wywołać skrypt na serwerze i odebrać wynik bez odświeżania strony.

https://www.w3schools.com/xml/ajax_intro.asp
komentarz 1 lipca 2018 przez DavidMCPolska Bywalec (2,770 p.)
A jeśli chcesz to zrobić bez AJAX'a to dane odebrane przez serwer możesz ponownie przekazać np. używając zmiennych sesyjnych i powyświetlać w inputach.
komentarz 2 lipca 2018 przez Czapczap Nowicjusz (230 p.)
Poszukam info o tym i dam znać jakie efekty :)

Dzięki!
komentarz 10 lipca 2018 przez Comandeer Guru (599,730 p.)

Nie polecajmy W3Schools, istnieją o wiele lepsze materiały – choćby MDN.

0 głosów
odpowiedź 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)

Ok, trochę poszperałem.

Znalazłem, że za pomocą ajax mogę bez przeładowania strony pobrać dane z serwera.

Np w przypadku logowania. 

Podaję login, hasło wciskam przycisk - dane są wysyłane, następnie odbierana jest informacja czy dane się zgadzają (po stronie serwera) - a na podstawie tego wyświetlam dane na stronie pod konkretnego użytkownika.

Jestem mocno początkujący w tej dziedzinie.

Ktoś podpowie jak połączyć ajax z prostym kodem w html?

zaczynając od prostego przycisku w formularzu (wysyłającego dane i niestety odświeżającego stronę)

<input type="submit"  value="Login" onclick="funkcja_test()">

Widziałem sporo kodu do przesłania właśnie danych na serwer i odbioru ich z serwera (pomijając już fakt że nie znam się na ajax).

 

komentarz 10 lipca 2018 przez Comandeer Guru (599,730 p.)

Podepnij się raczej pod zdarzenie submit formularza i zablokuj jego domyślną akcję (event.preventDefault). Po zrobieniu tego możesz wysłać żądanie Ajaksem i obsłużyć dane bez odświeżania strony.

komentarz 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)
Okej, a w jaki sposób się "podpiąć" tak aby zamiast domyślnego zdarzenia submit mieć jakiś swój własny kod z wykorzystaniem ajax?

Byłbyś tak miły pokazać jakiś prosty przykład?
komentarz 10 lipca 2018 przez Comandeer Guru (599,730 p.)
komentarz 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)

No dobra, zrobiłem u siebie test. Dwa przyciski:

<input type="submit" value="Login">
<input type="submit" id="Login_id" value="Login">

Oba zawarte w formularzu.

Wyżej skrypt:

document.getElementById("Login_id").addEventListener("click", function(event){
		event.preventDefault()
	});

Wedle tego co zrozumiałem, drugi przycisk o id Login_id powinien nie zadziałać (nie wysłać danych na serwer)

A działa.

Źle coś zrobiłem czy może źle zrozumiałem?

komentarz 10 lipca 2018 przez Comandeer Guru (599,730 p.)

Jeśli skrypt jest wyżej i nie ma dodanego atrybutu [defer] ani nie odpala się w czasie zdarzenia DOMContentLoaded, to nie zadziała, bo element, do którego się odwołuje, jeszcze nie istnieje.

komentarz 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)
Skrypt umieściłem zaraz pod "inputami" i działa.

Po sposobie w jaki piszesz widać, że znasz się na rzeczy :D

Dlatego też pozwolę sobie na jeszcze jedno pytanie - w jaki sposób umieścić skrypt w html aby wyglądał "elegancko"?
1
komentarz 10 lipca 2018 przez Comandeer Guru (599,730 p.)

Widziałbym 2 sposoby:

komentarz 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)
Wielkie dzięki!
0 głosów
odpowiedź 10 lipca 2018 przez Czapczap Nowicjusz (230 p.)

Kawałek po kawałku buduję sobie całą funkcjonalność.

Mam w kodzie przycisk oraz formularz do logowania:

<form id="form1" name="ex_form" action="post.cgi" method="post">
<input id="get_response_strona" type="text" name="post_input" value ="0" style="visibility:hidden"/>
<input id="get_response_zalogowany" type="text" name="post_input" value ="5" style="visibility:hidden"/>
	<table>
		<tr>
			<td>
				<label for="username">Nazwa użytkownika:</label>
			</td>
		</tr>
		<tr>
			<td>					
				<input type="text" id="get_response_login" name="post_input">
			</td>
		</tr>
		<tr>
			<td>
				<label for="password">Hasło:</label>
			</td>	
		</tr>
		<tr>
			<td>					
				<input type="text" id="get_response_haslo" name="post_input">
			</td>
		</tr>
		<tr>
			<td><div id="lower">
				<input type="checkbox"><label class="check" for="checkbox">Zapamiętaj mnie!</label>
			</div></td>
		</tr>
		<tr>
			<td><div align="center" id="lower">
					
				<input type="submit" id="Login_id" value="Login">
					
				<button id="get_button" type="button" onclick="make_request('get.cgi')">Pobierz aktualne ustawienia urządzenia</button>
			</div></td>
		</tr>
	</table>
</form>

 

Łącząc kod z różnych źródeł wyprodukowałem coś takiego:

$function ($) { // czekamy na załadowanie DOM
    $("form1") // znajdujemy formularz
        .submit(function (event) { // rejestrujemy funkcję reagującą na zdarzenie wysłania formularza
            var $form = $(this); // referencja do formularza, który jest wysyłany
            event.preventDefault(); // nie pozwalamy przeglądarce przesłać formularza, bo sami to zrobimy ajaxem
            
            $.ajax({ // wysyłamy ajaxem
                url: $form.attr("action"), // tam gdzie wskazuje atrybut action
                type: $form.attr("method"), // metodą jaką ma zdefiniowany formularz
                data: $form.serialize() // serializujemy formularz i ustawiamy to jako dane do wysłania ajaxem
            }).done(function (data) { // gdy udało się wysłać
             
            }).fail(function () { // gdy wystąpił błąd
             
            });
        });
}

Wedle poniższego:

W <head></head> umieściłem:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Dobrze kombinuję?

Próbowałem uruchomić, niestety wciąż przycisk wysyła dane formularza oraz odświeżana jest strona (a więc działa klasyczny submit)

Znalazłem jeszcze coś takiego: http://krakiewicz.pl/jquery-pobieranie-pliku-wyslanie-danych-przez-ajax
Nie testowałem jeszcze.

komentarz 10 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)
$function ($) { // czekamy na załadowanie DOM

Co to jest za zapis funkcji? W konsoli powinien pojawić się błąd Uncaught SyntaxError: Unexpected token {

Jeśli tworzysz funkcję, to bez znaku $ poprzedzającego słówko kluczowe function.

W <head></head> umieściłem:

Comandeer wyjaśnił Ci w jaki sposób umieszczać skrypty. Nawet na screenie, który wstawiłeś można doczytać się, że jQuery powinieneś dołączyć w <body>.

Sprawdź konsolę, tam powinny być błędy. Warto skorzystać z debuggera żeby znaleźć przyczynę problemu.

komentarz 11 lipca 2018 przez Czapczap Nowicjusz (230 p.)

Co to jest za zapis funkcji? W konsoli powinien pojawić się błąd Uncaught SyntaxError: Unexpected token {

 Podczas wklejania tu zmieniałem i tak przypadkowo zostało xD

W kodzie mam:

jQuery(function($) { ....}

 

Podobne pytania

+1 głos
2 odpowiedzi 355 wizyt
0 głosów
0 odpowiedzi 276 wizyt
0 głosów
1 odpowiedź 373 wizyt
pytanie zadane 23 stycznia 2016 w JavaScript przez daze6 Nowicjusz (140 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...