Contact form nang hindi nire-reload ang page. Paano magsumite ng isang HTML form nang hindi nire-reload ang pahina na nagsusumite ng Jquery ng isang form nang hindi nagre-reload

Kamusta kayong lahat. Ngayon ay nagpasya akong gawin ang gawain ng pagbabago ng isang artikulo tungkol sa, na binuksan sa isang modal window. Ang artikulo ay medyo popular, ngunit may ilang mga problema. Ang katotohanan ay na pagkatapos ipadala ang data, ang isang mensahe tungkol sa matagumpay na pagpapadala ay ipinakita at hindi pinahintulutan ang pagpapadala ng higit pang mga titik hanggang ang pahina ay na-reload. Marami sa inyo ang nagtanong kung paano matiyak na hindi mapapalitan ng mensahe ang form at pinapayagan kang magpadala muli ng mga email. Sa artikulong ito aayusin natin ito at higit pa.

Gayundin, ang nakaraang artikulo ay malamang na may isang disbentaha sa mahirap na ikonekta ang ilang mga form, ibig sabihin, ito ay kinakailangan upang duplicate ang script na nagpoproseso ng form, na kung saan ay hindi masyadong maganda. Sa artikulong ito ay itatama natin ang puntong ito. Bilang karagdagan, gagana ang form nang walang modal window.

Ay oo, aayusin ko ang mga ID book at mga klase para mas madaling maunawaan kung ano at bakit. Papalitan ko yung design ng form, mas interesting. Sa isa sa mga sumusunod na artikulo, marahil ay ikokonekta namin ang reCapthсa mula sa Google sa form na ito, at magse-set up ng layuning "Kaganapan" sa matagumpay na pagsusumite, upang ang isang buong serye ng mga artikulo ay inihahanda.

Magsimula na tayo. Dahil ang modal window ay tatawagin gamit ang jQuery plugin Remodal, bago ang closing tag ikokonekta namin ang jQuery mismo at ang Remodal plugin. Sa ibaba ay magdaragdag kami ng script na magiging responsable sa pagsusumite ng form nang hindi nire-reload ang pahina. Mukhang ganito:

Bigyang-pansin ang landas sa mga file. Nagpasya akong ilagay ang halos lahat ng mga file sa folder ng modalform upang gawing mas madaling kumonekta sa proyekto.

Bago lumipat sa form markup, isama natin ang mga css file ng modal window. Ginagawa ko ito sa pagitan ng mga head tag:

Kaya, ngayon ay lumipat tayo sa markup ng form mismo at ang button na tumatawag dito. Magsimula tayo sa pindutan.

Isumite ang iyong aplikasyon

Simple lang ang lahat dito. Isang regular na link na may custom na klase. Ginagamit ang data-remodal-target upang ilabas ang modal window, katulad ng paggamit ng href na may link sa id. Ngunit bakit kailangan natin itong basura sa address bar? Sa turn, ang modal window na may form ay ganito ang hitsura:

Humiling ng isang tawag pabalik at makikipag-ugnayan sa iyo ang aming consultant

website

Bagaman sa unang sulyap mayroong maraming code, sa katotohanan ang lahat ay hindi masyadong kumplikado. Ang buong form ay nakabalot sa isang div na may remodal class. Mayroon itong data-remodal-id na may parehong parameter ng button. Ibig sabihin, firstForm. Ito ay salamat sa kanila na kapag nag-click ka sa pindutan, ang nais na window ay bubukas kung mayroong ilan sa mga ito sa pahina.

Ang data-remodal-options ay isang paraan upang itakda o i-disable ang ilang mga opsyon sa script para sa isang modal window. Maaari kang magbasa nang higit pa sa opisyal na website. Binigay ko na ang link sa itaas. Sa aking kaso. Hindi ko pinagana ang hitsura ng anchor sa address bar at pinigilan ang pagsara ng window pagkatapos i-click ang pindutang "ipadala".

Nasa loob ang mismong form na may (mga) fieldset. Mahalagang bigyang pansin dito ang talata na may klase ng "msgs". Dito ipapakita ang mensahe tungkol sa matagumpay na pagpapadala o error. Dati, ang mensahe ay direktang ipinapakita sa loob ng form, na pinapalitan ang lahat ng nilalaman sa loob.

Isa pang bagay. Nakatagong field na may class formInfo. Ito ay kinakailangan upang makilala ang mga application at maunawaan kung aling form ang pinunan ng user, kung mayroong maraming iba't ibang mga. Punan lamang ang halaga ng kinakailangang teksto.

Sa dulo ng artikulo, ipapakita ko sa iyo kung paano gawin ito upang maaari kang tumawag sa isang window mula sa iba't ibang lugar sa site at maunawaan kung aling button ang na-click ng user.

Ngayon tingnan natin ang isang script na makakatulong sa amin na isumite ang form nang hindi nire-reload ang pahina. Tinawag ko itong form.js:

$(document).ready(function () ($("form").submit(function () ( // Kunin ang form ID var formID = $(this).attr("id"); // Magdagdag ng hash sa pangalan ID var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); formTitle = $(formNm). find(".formTitle"); // Hinahanap ang class.formtitle sa kasalukuyang form at isinusulat ito sa variable na $.ajax(( type: "POST", url: "modalform/mail .php", data: formNm.serialize(), tagumpay: function (data) ( // Magpakita ng mensahe tungkol sa matagumpay na pagpapadala ng message.html(data); formTitle.css("display","wala"); setTimeout(function ())( //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html (""); $("input").not( ":input, :input").val(""), 3000 error: function (jqXHR, text, error) ( // Magpakita ng mensahe ng error sa pagpapadala message.html(error); formTitle.css ("display","wala"); // $(formNm).css("display","noe"); ).css("display","block" ); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); ), 3000); ))); ibalik ang mali; )); //para sa mga istilo ng form var $input = $(".form-fieldset > input"); $input.blur(function (e) ( $(this).toggleClass("filled", !!$(this).val()); )); ));

Hayaan akong ipaliwanag ng kaunti kung ano ang nangyayari dito. Tinatawag namin ang function kapag nangyari ang kaganapan ng pagsusumite ng form (na-click ang isumite). Pagkatapos ay makuha namin ang form id at i-save ito sa formNm variable. Ngayon, ang id ng aming form ay nasa loob nito. Sa nakaraang artikulo, dito ipinakita ang mensahe. At ito mismo ang sandaling ito na madalas kong isinulat sa mga komento. Kailangan mo lang tukuyin ang ibang lokasyon para sa output. Sa aming kaso, ilalabas namin ang lahat ng mga mensahe sa isang pre-prepared na lokasyon. Ito ay isang "p" na tag na may klase ng "msgs".

Sa script, sinasabi namin na habang ipinapakita ang mensahe tungkol sa matagumpay o hindi matagumpay na pagpapadala, itatago namin ang header. At pagkatapos ng 3 segundo, ibabalik namin ang lahat sa lugar nito at i-clear ang mga field ng form kasama ang mensahe.

Ang file na magpapadala ng natanggap na data ay mail.php. Narito ang kanyang code: