Можно ли программно вызвать событие onsubmit Javascript в форме?

В Ruby on Rails я пытаюсь обновить innerHTML тега div с помощью помощника form_remote_tag. Это обновление происходит всякий раз, когда связанный тег select получает событие onchange. Проблема в том, что <select onchange = "this.form.submit();">; не работает. Как и document.forms[0].submit(). Единственный способ получить для выполнения код onsubmit, сгенерированный в form_remote_tag, - это создать скрытую кнопку отправки и вызвать метод щелчка на кнопке из тега select. Вот частичный пример работающего ERb.

<% form_remote_tag :url => product_path, :update => 'content', :method => 'get' do -%>
  <% content_tag :div, :id => 'content' do -%>
    <%= select_tag :update, options_for_select([["foo", 1], ["bar", 2]]), :onchange => "this.form.commit.click" %>
    <%= submit_tag 'submit_button', :style => "display: none" %>
  <% end %>
<% end %>

Я хочу сделать что-то вроде этого, но это не работает.

<% form_remote_tag :url => product_path, :update => 'content', :method => 'get' do -%>
  <% content_tag :div, :id => 'content' do -%>
    # the following line does not work
    <%= select_tag :update, options_for_select([["foo", 1], ["bar", 2]]), :onchange => "this.form.onsubmit()" %>
  <% end %>
<% end %>

Итак, есть ли способ удалить невидимую кнопку отправки для этого варианта использования?

Кажется, есть некоторая путаница. Итак, позвольте мне объяснить. Основная проблема заключается в том, что submit() не вызывает код onsubmit(), отображаемый в форме.

Фактическая HTML-форма, которую Rails визуализирует из этого ERb, выглядит так:

<form action = "/products/1" method = "post" onsubmit = "new Ajax.Updater('content', '/products/1', {asynchronous:true, evalScripts:true, method:'get', parameters:Form.serialize(this)}); return false;">
  <div style = "margin:0;padding:0">
    <input name = "authenticity_token" type = "hidden" value = "4eacf78eb87e9262a0b631a8a6e417e9a5957cab" />
  </div>
  <div id = "content">
    <select id = "update" name = "update" onchange = "this.form.commit.click">
      <option value = "1">foo</option>
      <option value = "2">bar</option>
    </select>
    <input name = "commit" style = "display: none" type = "submit" value = "submit_button" />
  </div>
</form>

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

Обновление: решение Orion Edwards работало бы, если бы Rails не сгенерировал return(false);. Я не уверен, что хуже: отправка фантомного щелчка по невидимой кнопке отправки или вызов eval при вызове getAttribute('onsubmit') после удаления обратного вызова с заменой строки javascript!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
7
0
14 437
7
Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

дайте вашей форме id.

тогда

document.getElementById('formid').submit();

Если вы загружаете Javascript в div через innerHTML, он не будет работать ... просто FYI.

Ответ принят как подходящий

Если вы на самом деле не хотели отправлять форму, а просто вызывали любой код, который оказался в onsubmit, вы могли бы сделать это: (непроверено)

var code = document.getElementById('formId').getAttribute('onsubmit');
eval(code);

Теоретически это работает, но я все еще использую свой исходный код в продакшене, чтобы не использовать eval.

hoyhoy 12.09.2008 11:56

Если вам нужно использовать встроенную генерацию Javascript Rail, я бы использовал решение Orion, но с одним небольшим изменением, чтобы компенсировать код возврата.

eval ('(function(){' + code + '})()');

Однако, на мой взгляд, в долгосрочной перспективе вам будет легче, если вы выделите код Javascript во внешний файл или отдельные вызываемые функции.

Теоретически может работать что-то вроде eval ('function(){' + code + '}()'); (хотя этот синтаксис не работает). Даже если бы это сработало, вызывать eval через select onchange все равно было бы чем-то вроде гетто. Другим решением было бы каким-то образом заставить Rails внедрить код onsubmit в поле onchange тега select, но я не уверен, есть ли способ сделать это. В ActionView есть link_to_remote, но нет очевидного помощника для генерации того же кода в поле onchange.

Не надо.

У тебя есть решение.

Остановитесь, перейдите к следующему функциональному пункту.

Я знаю, это некрасиво, но есть проблемы посерьезнее.

Не уверен, есть ли у вас ответ или нет, но в функции выбора onclick вызовите onsubmit вместо submit.

Я понимаю, что это старый вопрос, но какого черта вы делаете eval?

document.getElementById('formId').onsubmit();
document.getElementById('formId').submit();

или же

document.formName.onsubmit();
document.formName.submit();

Когда DOM документа загружается, события больше не являются строками, они являются функциями.

alert(typeof document.formName.onsubmit); // function

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

Другие вопросы по теме