Несколько форм, вызывающих одну и ту же функцию javascript

У меня есть страница с несколькими формами, вызывающими одну и ту же функцию javascript. Каждая форма отправляет изображение в определенный элемент базы данных и имеет идентификатор, который ссылается на этот элемент базы данных (например, id = «form123»). Когда пользователь выбирает изображение, он должен получить «прядильщик» (указывающий загрузку файла), а затем форма должна быть отправлена.Несколько форм, вызывающих одну и ту же функцию javascript

Проблема в том, какая форма принимает событие onchange (от выбора изображения на клиенте), браузер всегда передает переменные для первой формы с «onchange» на странице.

function submitForm(formId, spinner) { 
 
    console.log(formId); 
 
    console.log(spinner); 
 
    setDisplay(document.getElementById(spinner), 'inline-block'); 
 
    return document.forms.formId.submit(); 
 
}; 
 

 
function setDisplay(element, value) { 
 
    return element.style.display = value; 
 
};

<form method="post" name="form28236" id="form28236" class="submit-image" action="/image/new" enctype="multipart/form-data"> 
 
    <input type="hidden" name="on" value="28236"> 
 
    <label for="image-file">Add photos</label> 
 
    <input type="file" id="image-file" name="image" onchange="submitForm('form28236', 'spinner28236')"> 
 
    <div id="spinner28236" class="spinner"></div> 
 
</form>

Console: 
form28330 
spinner28330

Обратите внимание, что консоль не регистрирует тот же форму ID или спиннер идентификатор, который должен быть передан в яваскрипте функции. В результате отображается «прядильщик» для неправильной формы (первая на странице), и никакая форма фактически не отправляется.

источник

2015-12-04 EndlessBeing

Я скопировал ваш отрезанный и дублированный разметки формы, изменив последнюю цифру на всех идентификаторах второй формы. Он работал для меня. Очевидным было бы проверить аргументы в вызове submitForm в событии onchange, но я предполагаю, что вы уже это сделали. Можете ли вы опубликовать фрагмент с несколькими форматами, чтобы фактически воспроизвести ошибку? – Mic

Эта строка выглядит неправильно: 'return document.forms.formId.submit();'. Вероятно, это должно быть 'return document.forms [formId] .submit();'. Не уверен, что это ваша корневая проблема. –

В вашем примере есть только одна форма, поэтому трудно понять, откуда исходит проблема с прядильщиками. Проблема с формой submit - это то, что указано @Noah Freitas – lex82

Проблемы с подчиненной формой в этой строке:

document.forms.formId.submit();

Этот синтаксис будет работать, если ваша форма была на самом деле называется "formId". Тем не менее, вместо того, чтобы у вас есть переменная formId, которая содержит соответствующий идентификатор, так что вы должны сделать это следующим образом:

document.forms[formId].submit();

Может быть, это становится ясным, когда вы видите, что ваша переменная только заменяет реальное имя. Это также будет работать, чтобы получить доступ к конкретной форме:

document.forms['form28236'].submit();

источник

2015-12-04 22:58:39 lex82

Таким образом, проблема в том, что я не имел уникальный идентификатор для <input type="file"> и соответствующего <label for="unique-id">. Я использовал <label> в качестве кнопки ввода (и спрятал вход). Но поскольку это был не уникальный идентификатор, браузер просто собирался с первого <input> с этим ID на странице.

источник

2015-12-04 23:58:40 EndlessBeing

Несколько форм, вызывающих одну и ту же функцию javascript

ответ

Смежные вопросы