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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

HTML:

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

JQuery

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

Ответ 7

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

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

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

$('#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>

Ответ 11

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

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

И script будет выглядеть следующим образом:

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

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

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