Что такое событие, чтобы поймать отправку формы в Javascript?

Question

Пара вопросов здесь:

• Мне было интересно, какое событие я использую для выполнения некоторого JavaScript при отправке формы (для проверки)?
• Как только я выполню проверку, как мне отправить форму в javascript?

Приветствия ...

Answer 1

Допустим, у вас есть форма с именем myForm:

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

Чтобы поймать представление:

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

Примечание. Если вы хотите остановить отправку формы, вы заставляете someFunction вернуть значение false.

Чтобы отправить форму:

form.submit();

Answer 2

Вы можете использовать addEventListener(event, callback), но Internet Explorer никогда не поддерживал его должным образом.

IE использует attachEvent(event, callback) вместо.

Я настоятельно рекомендую использовать встроенную функцию addEvent (доступно множество лотов) или такие библиотеки, как jQuery, Prototype, Mootools и т. Д., Поскольку все они имеют превосходные встроенные функции обработки событий.

Answer 3

Если вы используете jquery, он имеет хороший встроенный обработчик событий отправки формы, который может упростить жизнь. Проверьте следующее:

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

Answer 4

1) Вы ищете OnSubmit событие?

2) Вы можете вызвать функцию наподобие validate () для события onsubmit и вернуть false, если проверка не удалась. Если false вернул, верните false из функции onsubmit.

может быть как,

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

function Submit()
{
return Validate()
}

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

Answer 5

Я посмотрел комментарии Сергея к записи Саши. Пример JsFiddle, который предоставил Сергей, был интересным, и я хотел написать ответ, описывающий поведение, о котором говорил Сергей:

Допустим, у вас есть форма с именем myForm:

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

Чтобы перехватить отправку при использовании кнопки отправки ():

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

Примечание. Если вы хотите остановить отправку формы, вы заставляете validationFunction вернуть false.

Чтобы отправить форму через javascript:

form.submit();

ПРИМЕЧАНИЕ. Если вы используете , обработчики событий onsubmit, добавленные с attachEvent, не будут вызываться. Поэтому вы должны использовать что-то вроде:

или, если у вас есть кнопка:

Вы можете добавить JavaScript для прикрепления к событию нажатия кнопки. var btnValidateAndSubmit = document.getElementById ("btnValidateAndSubmit");

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

Наконец, допустим, вы работаете с веб-формой SharePoint для редактирования элемента списка и хотите добавить в веб-форму настраиваемую проверку. Вы можете добавить следующий javascript в веб-форму, чтобы добавить пользовательскую проверку для нажатия кнопки ОК.

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();
            }
        };
    }


    }
}