HTML-форма, которая на самом деле ничего не передает на сервер (обработка на стороне клиента в JavaScript) - PullRequest
Новая
       4

HTML-форма, которая на самом деле ничего не передает на сервер (обработка на стороне клиента в JavaScript)

2 голосов
/ 12 апреля 2011

У меня есть HTML-форма с входными данными, которая будет выполнять обработку на стороне клиента только в JavaScript и jQuery, но на самом деле ничего не будет отправлять на сервер. Как правильно выложить такую ​​форму в HTML и написать JavaScript, который будет обрабатывать форму при изменении входных данных формы (как при явном событии отправки (например, нажав «Отправить» или «Ввод»), так и при неявном событии изменения (не фокусировка от ввода или даже от каждого нажатия / щелчка текста ввода))?

Ответы [ 4 ]

7 голосов
/ 12 апреля 2011

Во-первых, предотвратите действие формы по умолчанию, возвращая false в onsubmit или используя event.preventDefault () в обработчике событий.

Встроенный: 

<form id="myform" onsubmit="return false" action="pleaseturnonjavascript.html">

лучше: 

window.onload=function() {
  document.getElementById("myform").onsubmit=function() {
    // do something with the form field
    return false; // old way
  }
}

с использованием protectDefault: 

window.onload=function() {
  document.getElementById("myform").onsubmit=function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  }
}

или jQuery: 

$(function() {
  $("#myform").on("submit",function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  });
});

затем решите, хотите ли вы использовать onkeyup (я использую это в числовых полях) или onblur (используется, когда важно полное значение)

Это можно сделать с помощью простого старого JavaScript или jQuery, но нам нужна дополнительная информация, чтобы помочь вам в дальнейшем

Я предпочитаю использовать тег формы и передавать объект формы вместо того, чтобы просто иметь поля ввода, к которым нужно обращаться в каждом поле, вместо того, чтобы использовать массив элементов формы - я чувствую себя несчастным, не упаковывая входные данные в тег формы. Он может даже не проверяться, и дополнительное преимущество заключается в том, что enter вызовет событие submit без других мер.

7 голосов
/ 12 апреля 2011

Если вы действительно никогда не отправляете форму куда-либо, вы можете вообще не использовать тег формы.И просто используйте поля ввода и кнопки.Затем, если пользователь нажимает кнопку, либо запускается ваш обработчик щелчков, либо ничего не происходит вообще.

Что касается перехвата явных событий, нажатие кнопки, расфокусировка (размытие), я бы предложил jQuery, поскольку это делает его действительно простымчтобы прикрепить обработчики к этим событиям кросс-браузерным способом.

3 голосов
/ 12 апреля 2011

Вам не нужен тег формы.Вы можете использовать функции присоединения к каждому элементу, например: 

 $("#input-element-id").change(function(){
  //your code here
  });

, или вы можете обернуть содержащий DIV (или другой элемент) вокруг них всех, и сделать это: 

$("#containing-div-id").change(function() {
//your code here
});
0 голосов
/ 12 апреля 2011

просто посмотрите несколько примеров на сайте w3school http://www.w3schools.com/js/js_examples.asp

Вы можете получить представление о том, как писать события onclick, onmouseover

...