Co to jest wydarzenie, aby złapać przesyłanie formularzy w JavaScript?

Question

Kilka pytań tutaj:

• Zastanawiałem się, co zdarzenie mogę użyć, aby wykonać niektóre javascript na przesyłanie formularza (aby zrobić walidację)?
• Po wykonaniu sprawdzania poprawności, w jaki sposób mogę przesłać formularz w javascript?

Cheers ...

Answer 1

Powiedzmy masz formularz o nazwie myForm:

var form = document.getElementById('myForm'); 

złapać składanie:

try { 
    form.addEventListener("submit", someFunction, false); 
} catch(e) { 
    form.attachEvent("onsubmit", someFunction); //Internet Explorer 8- 
} 

Uwaga: Jeśli chcesz, aby zatrzymać formularz od przesłania, powodujesz, że someFunction zwraca wartość false.

Aby przesłać formularz:

form.submit(); 

Answer 2

Jeśli używasz jQuery, ma ładny wbudowany hak zdarzenia przesłania formularza, które mogą uczynić życie bardzo proste. Sprawdź, co następuje:

http://docs.jquery.com/Events/submit

Answer 3

1) Szukasz OnSubmit wydarzenia?

2) Można wywołać funkcję taką jak validate() w przypadku zdarzenia onsubmit i zwrócić wartość false, jeśli sprawdzanie poprawności nie powiedzie się. Jeśli false zwrócony zwróci false z funkcji onsubmit.

może być podobny,

<form name="test" OnSubmit = "return Submit()"> 

function Submit() 
{ 
return Validate() 
} 

function Validate() 
{ 
//Validation code goes here 
} 

Answer 4

Można użyć addEventListener(event, callback) ale to nigdy nie zostało prawidłowo obsługiwane przez Internet Explorer.

IE używa zamiast tego attachEvent(event, callback).

Gorąco polecam użycie wbudowanej funkcji addEvent (wiele dostępnych tam) lub biblioteki takiej jak jQuery, Prototype, Mootools itd., Ponieważ wszystkie mają wbudowane doskonałe funkcje obsługi zdarzeń.

Answer 5

Spojrzałem na komentarze Serhijego na temat posta Sashy. Przykład JsFiddle Serhij warunkiem było ciekawe, a ja chciałem napisać odpowiedź, która opisuje zachowanie że Serhij wymienić:

powiedzmy, że mają postać imieniem myForm:

var form = document.getElementById('myForm'); 

złapać przedstawienie podczas korzystania z przedstawienia przycisk (< input type = 'submit' >):

try { 
    form.addEventListener("submit", validationFunction, false); 
} catch(e) { 
    form.attachEvent("onsubmit", validationFunction); //Internet Explorer 8- 
} 

Uwaga: Jeśli chcesz, aby zatrzymać formularza ze złożeniem, robisz validationFunction return false.

Aby przesłać formularz za pośrednictwem javascript:

form.submit(); 

UWAGA: Jeśli używasz = "button" < input type onclick = "form.submit()"/>, że onSubmit obsługi zdarzeń dodana z attachEvent nie zostanie wywołany. Dlatego powinieneś użyć czegoś takiego:

< typ wejścia = "przycisk" onclick = "if (validationfunction()) form.submit();"/>

lub alternatywnie, jeśli masz przycisk:

Możesz dodać javascript, aby dołączyć do zdarzenia Click przycisku użytkownika. var btnValidateAndSubmit = document.getElementById ("btnValidateAndSubmit");

try { 
    btnValidateAndSubmit .addEventListener("click", validationAndSubmitFunction, false); 
} catch(e) { 
    btnValidateAndSubmit .attachEvent("onclick", validationAndSubmitFunction); //Internet Explorer 8- 
} 

Wreszcie, powiedzmy, że pracuje się formularz internetowy SharePoint do edycji elementu listy, a chcesz dodać niestandardowe walidacji do formularza internetowego. Możesz dodać następujący javascript do formularza internetowego, aby dodać niestandardową weryfikację do przycisku onclick dla przycisków OK.

var oElements = document.getElementsByTagName("input"); 
for (var i=0; i< oElements.length; i++) 
{ 
    var elementName = oElements[i].getAttribute("Title"); 
    var elementType = oElements[i].getAttribute("type"); 
    var elementValue = oElements[i].value; 

    if (elementType=="button" && elementValue=="OK") 
    { 
    var okbutton = oElements[i]; 

    // alert("typeof okbutton.onclick = "+typeof okbutton.onclick); 
    if (typeof okbutton.onclick == "function") 
    { 
     var previousfunction = okbutton.onclick; 

     okbutton.onclick = function() 
     { 
      if (validateForm()) 
      { 
       previousfunction(); 
      } 
     }; 

    } 
    else 
    { 
     var aspnetForm = document.getElementById("aspnetForm"); 
     aspnetForm.attachEvent("onsubmit",validateForm); 

     okbutton.onclick = function() 
     { 
      if (validateForm()) 
      { 
       aspnetForm.submit(); 
      } 
     }; 
    } 


    } 
}