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

114

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

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

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

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

Желудь
источник
2
в чем проблема, если они будут представлены? Вы можете выбрать, какие поля обрабатывать на серверном языке.
Sarfraz
6
Я не верю, что безымянные элементы формы появляются при отправке формы - если вы можете написать свой JS, чтобы ссылаться на них по идентификатору, вы можете оставить их имена пустыми, эффективно предотвращая их отправку.
gddc 09
2
оставьте поле атрибута имени пустым
деостролл
@Sarfraz Ahmed: Я пишу сценарий greasemonkey, поэтому у меня нет контроля над сайтом.
Acorn
11
Согласно w3: для включения в отправку формы. поле (элемент формы) должно быть определено внутри элемента формы и иметь атрибут name. Элементы без имен или не содержащиеся в форме не отправляются на сервер.
kennebec 09

Ответы:

159

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

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

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

$("form").submit(function() {
   $(this).children('#in-between').remove();
});
гал
источник
7
Отсутствие имени не позволяет отправить его? Круто, я этого не знал. Это работает во всех браузерах? Является ли это частью стандарта или причудой реализации?
BlairHippo,
2
@Acorn Я не совсем уверен, но об этом стоит прочитать. По сути, если вы опустите значение атрибута «name», вы не сможете получить доступ к этому значению с помощью любого метода ... так что это может быть так, что значение просто отбрасывается браузером. Если для вас важно быть в безопасности, выберите вариант jquery / javascript (просто обратите внимание, что поля БУДУТ отправлены, когда javascript легко отключен, поэтому не полагайтесь на него ни одним из ваших механизмов безопасности).
Gal
17
Я тестировал отсутствие атрибута name с помощью chrome, firefox, safari, и кажется, что поля формы отправляются на сервер с пустой строкой для имени. Я проверил почтовые данные с помощью WebScarab и обнаружил, что данные отправляются. На данный момент, я думаю, мне придется отключить поля, чтобы они не были отправлены.
kldavis4 07
1
@ kldavis4 - похоже, что и stripe (stripe.js), и Braintree (braintree.js) [ссылка] braintreepayments.com/docs/python/guide/getting_paid используют концепцию атрибута "без имени", чтобы данные не попадали на серверы. таким образом уменьшая потребность в соблюдении "PCI" ... если вы говорите, что "данные" отправляются, являются ли они ошибочными?
Рахул Дигхе
57

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

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

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

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

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

Johrn
источник
Идея состоит в том, чтобы мои вставленные поля можно было использовать, чтобы пользователь мог менять флажки и т. Д., А затем отправлять их в мой javascript.
Acorn
3
Отключено все равно может работать, если вы отключите поля только при отправке или на основе установленного флажка. Таким образом, вы не просто выбрасываете nameсобственность, которую вы, возможно, захотите сохранить, если захотите использовать ее позже.
JMTyler
Это замечательно, когда вам нужно отправить форму с помощью AJAX и вы не хотите удалять введенные вами данные из формы или удалять их nameатрибуты.
Nolonar
15

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

<input type="checkbox" checked="" id="class_box_2" value="2">
Леша Пипиев
источник
Это должен быть ответ :))
Максима Алекз
1
Это работает для флажков. Однако обратите внимание, что это нарушит автоматическое отключение другого переключателя при использовании с переключателями.
anre
10

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

<input form="fakeForm" type="text" readonly value="random value" />
Farvgnugn
источник
1
хотя это, вероятно, работает (не тестировалось), если вы действительно не определите fakeFormгде-то еще (не нужно отправлять), это приведет к недопустимому HTML.
Брайан Х.
1
Если вы не хотите добавлять javascript и вам нужен ввод внутри формы с взаимодействием с пользователем. С моей точки зрения, это, безусловно, самое простое решение.
yannisalexiou
1
ПРИМЕЧАНИЕ. Это решение не работает с IE . Проверьте здесь
Харви
@ Harvey Yikes! Спасибо за предупреждение!
Джошуа Пинтер,
9

Вы можете написать обработчик событий, 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;
Яков Релкин
источник
2

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

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

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

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

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

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

Будет
источник
Просто и понятно. Мне это нравится!
pbarney
2

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

HTML:

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

JQuery:

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

Пикка пикка
источник
2

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

Хотя в ходе своего исследования я нашел еще одно решение, о котором я не упоминал в этом посте:
если вы инкапсулируете элементы управления формы, которые хотите не обрабатывать / не отправлять, внутри другого <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"] будет.

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

Дельфшкримм
источник
Интересное наблюдение, но проверяли ли вы это в разных браузерах? Интересно, это по дизайну, по спецификации или просто из-за особенностей поведения браузера. Будет ли это надежным методом в будущем по мере изменения браузеров?
scipilot
1

Обработайте отправку формы в функции через 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);
}

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

кольцо предъявитель
источник
0

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

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

BlairHippo
источник
Да, мне нужно, чтобы они были элементами ввода, потому что я пытаюсь получить ввод пользователя.
Acorn
0
$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>
Денис Лукьянов
источник
К сожалению, атрибут формы не работает в IE / Edge. caniuse.com/#search=form%20attribute
Джордж
0

Вам нужно добавить 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;
        }
    }

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

Василакакис Анастасиос
источник