Остановить отправку поля ввода в форме

Я пишу некоторый javascript (greasemonkey / userscript), который вставляет некоторые поля ввода в форму на веб-сайте.

Дело в том, что я не хочу, чтобы эти поля ввода каким-либо образом влияли на форму, я не хочу, чтобы они отправлялись при отправке формы, я хочу, чтобы мой javascript имел доступ только к их значениям.

Есть ли способ добавить несколько полей ввода в середину формы и не отправлять их при отправке формы?

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

Вы можете вставить поля ввода без атрибута name:

<input type="text" id="in-between" />

Или вы можете просто удалить их после отправки формы (в jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

Проще всего было бы вставить элементы с disabledатрибутом.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

Таким образом, вы все еще можете получить к ним доступ как к дочерним элементам формы.

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

Вы также можете написать какой-нибудь javascript для запуска при отправке формы, чтобы удалить поля, которые вы не хотите отправлять.

Просто попробуйте удалить атрибут имени из элемента ввода.
Итак, это должно выглядеть так

<input type="checkbox" checked="" id="class_box_2" value="2">

Я просто хотел добавить дополнительную опцию: во входных данных добавьте тег формы и укажите имя формы, которой нет на вашей странице:

<input form="fakeForm" type="text" readonly value="random value" />

Вы можете написать обработчик событий, onsubmitкоторый удаляетname атрибут из всех полей ввода, которые вы не хотите включать в отправку формы.

Вот небольшой непроверенный пример:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

Я знаю, что это старый пост, но все равно отвечу. Самый простой / лучший способ, который я нашел, - просто установить имя пустым.

Поместите это перед отправкой:

document.getElementById("TheInputsIdHere").name = "";

В целом ваша функция отправки может выглядеть так:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Это по-прежнему отправит форму со всеми другими вашими полями, но не отправит поле без имени.

Добавьте disabled = "disabled" во ввод, а jquery удалите атрибут disabled, если вы хотите отправить его с помощью .removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

JQuery:

$("input[name='test']").removeAttr('disabled');

Во всех приведенных выше ответах уже говорилось все о (не) именовании элементов управления формой или их программном удалении перед фактической отправкой формы.

Хотя в ходе своего исследования я нашел еще одно решение, о котором я не упоминал в этом посте:
если вы инкапсулируете элементы управления формы, которые хотите не обрабатывать / не отправлять, внутри другого <form>тега без methodатрибута или path(и, очевидно, без элемента управления типом отправки как кнопка или вложенный в нее ввод), то отправка родительской формы не будет включать эти инкапсулированные элементы управления формой.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

Контрольное значение [name = "notSent"] не будет обрабатываться и отправляться на конечную точку POST сервера, но значение из [name = "sent"] будет.

Это решение может показаться анекдотическим, но я все же оставляю его для потомков ...

Обработайте отправку формы в функции через onSubmit () и выполните что-то вроде ниже, чтобы удалить элемент формы: Использование getElementById()DOM, затем использование[object].parentNode.removeChild([object])

предположим, что ваше поле имеет код атрибута id "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Это даст вам именно то, что вы ищете.

Вам вообще нужно, чтобы они были элементами ввода? Вы можете использовать Javascript для динамического создания разделов, абзацев, элементов списка или чего-либо еще, что содержит информацию, которую вы хотите представить.

Но если интерактивный элемент важен и размещать эти элементы за пределами <form>блока проблематично, должно быть возможно удалить эти элементы из формы при отправке страницы.

Вам нужно добавить onsubmit в свою форму:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

И сценарий будет таким:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

У меня это работает каждый раз :)