Est-il possible de faire appel à du Javascript événement onsubmit par programmation sur un formulaire?

StackOverflow https://stackoverflow.com/questions/33860

  •  09-06-2019
  •  | 
  •  

Question

En Ruby on Rails, je suis tenté de mettre à jour le innerHTML d'une balise div à l'aide de la form_remote_tag helper.Cette mise à jour se produit chaque fois que associé à une balise select reçoit un événement onchange.Le problème est, <select onchange="this.form.submit();">;ne fonctionne pas.Ni ne document.forms[0].submit().La seule façon d'obtenir le onsubmit code généré dans la form_remote_tag à exécuter est de créer un bouton d'envoi masqué, et d'invoquer la méthode de clic sur le bouton de la balise select.Voici un travail ERb partielle exemple.

<% 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 %>

Ce que je veux faire, c'est quelque chose comme ça, mais il ne fonctionne pas.

<% 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 %>

Donc, est-il possible de supprimer l'invisible bouton "soumettre" pour ce cas d'utilisation?

Il semble y avoir une certaine confusion.Donc, laissez-moi vous expliquer.Le problème de base est que submit() n'appelez pas l' onsubmit() le code affiché dans le formulaire.

Le formulaire HTML qui Rails rend de ce ERb ressemble à ceci:

<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>

Je veux axe de l'invisible bouton de soumission, mais au moyen d'un simple formulaire.soumettre semble ne pas fonctionner.Donc, j'ai besoin d'une certaine façon à l'appel de la forme de l'événement onsubmit code.

Mise à jour:Orion Edwards solution serait de travailler si il n'y avait pas un return(false); généré par les Rails.Je ne suis pas sûr de ce qui est pire que, l'envoi d'un fantôme sur un invisible bouton envoyer ou appeler eval sur le getAttribute('onsubmit') appel après le retrait de l'appel de retour avec un javascript chaîne de remplacement!

Était-ce utile?

La solution

Si vous n'avez pas vraiment l'intention de soumettre le formulaire, mais il suffit d'invoquer n'importe quel code qui est arrivé à être dans le onsubmit, vous pourriez faire ceci:(non testé)

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

Autres conseils

Je me rends compte que cette question est une sorte de vieux, mais que diable faites-vous eval pour?

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

ou

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

Lorsque le DOM d'un document est chargé, les événements ne sont pas des chaînes de plus, ils sont des fonctions.

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

Donc il n'y a aucune raison pour convertir une fonction à une chaîne de sorte que vous pouvez eval-il.

donnez à votre formulaire une id.

alors

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

Si vous chargez du code Javascript dans un div via innerHTML, il ne fonctionne pas...juste pour info.

Si vous devez utiliser le chemin de fer construit en Javascript génération, je voudrais utiliser d'Orion solution, mais avec une petite modification pour compenser le code de retour.

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

Cependant, à mon avis, vous auriez plus de temps dans le long terme, en séparant le code Javascript dans un fichier externe ou de séparer les fonctions appelables.

Ne le faites pas.

Vous avez une solution.

Arrêter, de passer à côté du point de fonction.

Je sais, c'est pas joli, mais il y a plus de problèmes.

Vous ne savez pas si vous avez encore de réponse ou pas, mais dans le onclick fonction de la sélection, appel onsubmit au lieu de submit.

En théorie, quelque chose comme eval ('function(){' + code + '}()'); pourrait travailler (que la syntaxe ne parvient pas cependant).Même si cela fait un travail, il serait toujours en sorte de ghetto à l'appel d'une évaluation par le biais d'un select onchange.Une autre solution serait d'obtenir en quelque sorte des Rails pour injecter le onsubmit code dans l' onchange domaine de la balise select, mais je ne sais pas si il y a un moyen de le faire.ActionView a link_to_remote, mais il n'est pas évident de trouver de l'aide pour générer le même code dans la onchange champ.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top