Comment autopopulate un formulaire HTML et de le soumettre instantanément?

J'ai un formulaire HTML simple avec un nom d'utilisateur et mot de passe.

Ce formulaire HTML contient une connexion à la fois gratuits et payants utilisateurs. Payé les utilisateurs doivent entrer un nom d'utilisateur et le mot de passe, tandis que les utilisateurs doivent entrer les noms d'utilisateur par défaut par exemple, nom d'utilisateur = monnom, et le Mot de passe = mot de passe.

J'ai réussi à la remplit automatiquement les valeurs du formulaire à l'aide d'un lien HTML -

<a href="#" onclick="document.getElementById('name').value='myname';document.getElementById('password').value='mypassword';" >Free User</a>

Cela a fonctionné sans problème. Maintenant, je voudrais ajouter la possibilité que, lorsque le Libre Utilisateur clique sur le bouton, les valeurs sont automatiquement comme ci-dessus et le dit formulaire HTML est envoyé immédiatement.

Quand je l'ai essayé à l'aide de différentes méthodes, les champs de remplir, le formulaire HTML ne se soumettra pas.

Merci à vous.

  • je ne pense pas que vous avez obtenu ce droit, si c'est la liberté de l'utilisateur, aucun journal n'en devrait pas être nécessaire, il suffit de le mettre sur le côté serveur
  • Salut @Ibu, je sais qu'il ne peut faire sens pour vous, mais dans mon objectif de la conception du logiciel, chaque utilisateur doit disposer d'un nom d'utilisateur et mot de passe, même les utilisateurs de free. Ils sont donc par défaut nom d'utilisateur et mot de passe.
InformationsquelleAutor Piedpiper Malta | 2012-07-25
  1. 4

    Juste définir les valeurs par défaut dans la forme, pas de script requise:

    User ID: <input type="text" name="userid" value="guest">
<br>
Password: <input type="password" name="password" value="password">
<br>
<input type="submit" value="Login">

    Si vous avez vraiment vraiment devez utiliser un script, puis (à noter qu'un contrôle de formulaire avec le nom de "nom" masque la forme du nom de la propriété, de sorte que j'ai utilisé quelque chose de plus approprié) d'utiliser quelque chose comme:

    <input type="button" value="Guest Login" onclick="
  this.form.userid.value = 'guest';
  this.form.password.value = 'password';
  this.form.submit();
">

    Mais franchement c'est une perte de temps totale. Si vous placez deux boutons submit du formulaire, l'une pour les invités et une pour les utilisateurs enregistrés, ensuite vous pourrez cliquer sur l'invité bouton "soumettre".

    <input type="submit" name="registeredLogin" value="Registered User Login">
<input type="submit" name="guestLogin" value="Guest User Login">

    Quel que soit le bouton est cliqué sera envoyé au serveur afin de pouvoir définir les autorisations appropriées. S'ils ont cliqué sur le bouton guest, vous n'avez pas de soins de la valeur qu'ils ont mis pour le nom d'utilisateur ou mot de passe, juste l'ignorer.

    Encore une fois, zéro script requise.

    • Je suppose que le downvote est parce que j'ai osé suggérer un script sans réponse. Ou peut-être que je ne comprend pas quelqu'un favori de la bibliothèque, ou ils ont eu une mauvaise journée, que ce soit. Je pense que je peux cop une pénalité de 2 points. 🙂
    InformationsquelleAutor RobG
  2. 1

    Si je comprends votre question de droit, et que vous voulez un bouton pour remplir les champs du formulaire avant de poster le formulaire, il suffit de placer votre code embarqué dans une fonction javascript et le définir comme le gestionnaire de clic via le "onclick" propriété du bouton.

    Ex:

    <script>
    function populate(){
        document.getElementById('name').value='myname';  //set username
        document.getElementById('password').value='mypassword'; //setpassword
        document.forms["formID"].submit();  //submit 'formID'
    }
</script>

...

<form>
    ....
    <input type="button" name="test" value="Free User" onclick="populate()">
</form>
<!-- or as a link.. -->
<a href="#" onclick="populate()" title="login as free user">Free User</a>

    Id question une conception qui signifie que vous devez renseigner les variables et de ne pas les avoir comme valeurs par défaut si! (Les valeurs par défaut peuvent être définies dans le code HTML) Toutefois, si les spécifications de conception alors voici votre code!

    Modifier
    Pour résumer tous les commentaires ci-dessous: ce code ne marchera pas si vous avez un élément dans votre formulaire avec le nom "soumettre" - ala soumettre la plupart des formulaires qui sont nommées soumettre! Si vous essayez d'appeler ce code à la soumission de la ligne sera effectivement essaie de l'appeler sur le bouton; ce qui n'est évidemment pas une fonction et vous obtiendrez cette erreur ici...

    Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.

    [jsFiddle avec l'erreur] [jsFiddle fixe] - Remarque seul le bouton soumettre nom a changé.

    L'explication à cela est ici - eh bien, vous apprenez quelque chose de nouveau tous les jours!

    De sorte que vous pouvez définir le nom de votre bouton pour quelque chose d'autre, c'est à dire sous; ou vous pouvez utiliser GitaarLAB de la solution de l'appel de l'événement click sur le bouton soumettre par programmation. (Voir la section des commentaires pour cette)

    • Merci pour votre réponse. Je voudrais que lorsque je clique sur le lien html, je veux à remplir les fichiers ET soumettre le formulaire HTML.
    • Édité et fait 🙂 Le code est dans une fonction distincte de la rendre un peu plus lisible que de l'avoir intégré en tant que propriété HTML.
    • Je ne veux pas d'eux en tant que par défaut. Je veux que chaque fois que quelqu'un clique sur le lien - les champs du formulaire sont remplis avec les mêmes valeurs (ce que j'ai réussi) et soumettre le formulaire HTML instantanément en cliquant sur le même lien (que je n'ai pas réussi à faire). Merci.
    • C'est ce que le code. Voulez-vous sur un bouton ou un lien? edit - fait les deux.
    • Merci mais c'est encore de ne pas se soumettre!
    • Avez-vous mis l'ID du formulaire et la console d'erreur afficher quoi que ce soit?
    • Je l'ai fait... devrait-il être le document.les formes["formID"].submit(); ou d'un document.forms['formID'].submit();
    • Pas de réelle différence, je voudrais essayer un alert() déclaration de la fonction pour vous assurer qu'il est appelé. Sont les entrées d'un formulaire à se changer? Si oui, vérifiez le formulaire de soumission en ligne de nouveau :/
    • Ils sont à se changer, pas de problème. Le problème, c'est quand ils ne reçoivent pas soumis uniquement. Merci.
    • avez-vous mis de propriétés du formulaire, comme l'action...?
    • Sans voir plus HTML, il est très difficile de travailler sur ce qui ne va pas! Ce n'est évidemment qu'une seule ligne, mais la ligne elle-même est correcte! (Mozilla Developer Network)
    • comment dois-je faire? merci
    • <form name="input" id="formID" action="html_form_action.asp" method="get"> méthode pourrait également être post.. avec les obtenir, vous pouvez voir les données (url-encodé) dans le addressbar, avec la poste, vous n'avez pas.
    • Ah, j'ai pensé que vous aviez que dans la forme déjà. @GitaarLab est mort en mettant l'action du formulaire dans le mark-up.
    • C'est le code de @FergusMorrow. ` <form action="login.php" method="post" id="formID" name="formID"> <label for="nom">nom d'utilisateur:</label> <input id="nom" name="nom" type="text"> <label for="user_email">Mot de passe:</label> <input id="user_email" name="email" type="password" /> <input name="submit" type="submit" value="Connexion" /></div> </form> <script type="text/javascript"> function remplir(){ document.getElementById('nom').value='duddu'; document.getElementById('user_email').value='dudu'; document.les formes["formID"].submit(); } </script>`
    • dur à lire, mais semble ok EDIT: re-vérifier tout avec jsbeautifier.org regarde toujours ok, lui donner un aller!
    • Pas toujours le même.
    • l'humour moi, essayer de faire le champ mot de passe caché entrées-champ. J'ai fait des recherches sur ce genre de choses le mois dernier. Avec cela, vous pouvez tester si votre navigateur (laquelle?) les blocs de javascript modifié passwordfields. Beaucoup d'entre eux aussi de "casser" des fichiers d'entrées de nos jours
    • Je l'ai essayé sur Google Chrome et id ne fonctionne pas, même sur Mozilla. J'ai changé type="password" type="texte" ne fonctionne toujours pas.
    • J'ai juste essayé avec mon local php echo script, aucune valeur n'est présentée, je vais travailler sur ça maintenant.
    • Fixe. C'est parce que votre bouton envoyer est appelé soumettre. Voir ce fil Renommer votre bouton soumettre et essayer! Si vous regardez le développeur de la console, il vous dit que soumettre n'est pas une fonction, c'est parce que c'est un bouton dans votre formulaire! 🙂 jsFiddle Montrant la Fonction de Travail - Remarque, c'est juste avec le bouton "soumettre" renommé "sub"
    • hmm, j'ai eu un bingo: <button onclick="populate(); document.getElementById('submit').click(); ">asdf</button> fait. L'astuce consiste à ajouter un ID à votre bouton "soumettre", et puis déclencher cliquez sur l'événement au lieu de submit();
    • haha, j'aime votre style @GitaarLAB - une autre solution de contournement pour le même problème! Je n'ai jamais pensé avoir un enfant de l'élément nommé comme une fonction DOM essentiellement à remplacer que la fonction de cela a du sens je suppose.. mais quand même! O_o
    • Demain: vous n'écrasez pas, vous appelez l'événement click() du bouton submit. D'où la forme continue son fonctionnement normal 😛 Donc changer de ligne document.forms["formID"].submit(); avec document.getElementById('submit').click(); et n'oubliez pas de définir l'id sur le bouton "soumettre"! Les centres d'intérêts.. il est une fraction de réponse de la fonction ici sur, DONC?
    • Je ne veux pas le remplacer, je voulais dire le fait qu'il y a un élément qui semblait écraser l'accès à la soumission de la fonction (); je.e lorsque vous essayez d'appeler .submit() c'était en fait accéder à l'élément enfant (qui a été le bouton submit) - Explication ici. Pas d'idée sur une scission de la fonction de réponse!
    • Laissons les op qui de le 2 corrige, il pense que c'est mieux 🙂 Au moins, j'ai apprécié la collaboration 😛
    • Excellent, il a travaillé pour moi! Que vous disais-je avoir à modifier le nom du bouton "soumettre" à partir de "soumettre" à quelque chose!!! Merci les gars!!!

    InformationsquelleAutor Fergus In London
  3. 1

    Vous pouvez toujours les mettre serverside, c'est à dire si une connexion soumettre le formulaire est reçu sans nom d'utilisateur/mot de passe, puis de la remplacer par votre défaut user/pass et continuer votre login script.

    Alternativement ou sur le dessus de cela, vous pouvez également définir 1 ou 2 champs cachés si vous souhaitez assigner différentes par défaut user/pass combinaisons dynamiquement.

    Plus directement à votre question, vous avez déjà compris comment faire pour remplir un champ.. donc un deuxième champ est de répéter le même truc. Vous pouvez toujours utiliser la valeur par défaut de soumettre bouton de la forme, si vous le souhaitez, mais alors vous avez besoin de Javascript en cours d'exécution sur le client. La soumission du formulaire se fait traditionnellement par le document.les formes[n].submit();

    Pourtant document.getElementById('submit').cliquez sur(); fonctionne tellement mieux..

    Donc dans l'ensemble, pour un gracieux de secours, je vous conseille 2 forme cachée-champs et de prendre soin de tout le reste serverside.

    Bonne chance

    Mise à JOUR 3: Deux versions basées sur ma technique, fonctionne à la perfection!!!

    Ouverture de session automatique:

    <form action="login.php" method="post" id="formID" name="formID">
    <label for="name">Username:</label>
    <input id="name" name="name" type="text">
    <label for="user_email">Password:</label>
    <input id="user_email" name="email" type="password" />
    <input id="submit" name="submit" type="submit" value="Login" />
    </div>
</form>
<script type="text/javascript">
window.onload=function(){
    document.getElementById('name').value = 'duddu';
    document.getElementById('user_email').value = 'dudu';
    document.getElementById('submit').click();
};
</script>

    Bouton (initié par l'utilisateur) d'ouverture de session automatique:

    <form action="login.php" method="post" id="formID" name="formID">
    <label for="name">Username:</label>
    <input id="name" name="name" type="text">
    <label for="user_email">Password:</label>
    <input id="user_email" name="email" type="password" />
    <input id="submit" name="submit" type="submit" value="Login" />
    <input name="free" type="button" value="Free User Login" onclick="popAndSub();" />
    </div>
</form>
<script type="text/javascript">
var popAndSub=function(){
    document.getElementById('name').value = 'duddu';
    document.getElementById('user_email').value = 'dudu';
    document.getElementById('submit').click();
};
</script>
    • de la fenêtre.onload? Sûrement les utilisateurs ayant payé l'habitude d'obtenir une chance de détails? 😉 Le Code est bon mais, il suffit de fixer la fonction d'un lien peut-être?
    • Morrow: oui, juste remarqué que à la, était encore dans l'inspiration du code nous avons tous deux travaillaient sur il y a 10 minutes. Cela semblait qu'il était censé déclencher automatiquement, donc j'ai oublié l'op qui veulent un lien. Donc mon premier Bingo avec le bouton était encore correcte. Maintenant, nous avons 2 solutions 😛 Avec bouton et.. sans bouton (ce qui est agréable dans l'auto-login scripts générés par votre mot de passe codé en-vault appelé "ecto gammat' .. je vais mettre à jour ma réponse une fois de plus pour inclure à la fois les options 😛
    InformationsquelleAutor GitaarLAB