Contenu d'un id dans un input value.

[stefou]

Bonjour à tous,

Comme je suis pas très à l'aise en formulaire, je rencontre deux problèmes.

- je souhaiterai récupérer le contenu d'un id et le placer en value par défaut d'un input.
J'utilise la fonction var an = document.getElementById('mon_id').textContent (en js) pour récupérer le texte contenu dans l'id.
Mais je n'arrive pas à le placer dans l'input value.

2ème soucis,
- les inputs ce trouve en hidden et je souhaiterai à l'ouverture du formulaire arriver directement sur la page Prévisualisation du message avec les champs titre et textarea pré rempli.
Pour le moment j'ai un input bouton qui envoi le formulaire vers la Prévisualisation mais je souhaite l'automatiser.

Une autre idée était d'utiliser le script avertissement modérateur plutôt qu'un formulaire, mais là aussi je suis confronter à mon id à placer dans le titre.
Bonne journée à tous.

[Self]

Hello !

Pour récupérer le texte j'imagine que peut-être .innerHTML fonctionnerait ?

Code:

var an = document.getElementById('id').innerHTML;
form.inputname.value = an;

Pour la prévisualisation on peut déclencher le click sur l'input :

Code:

jQuery(function($){
    $('input').trigger('click');
});

[stefou]

Bonjour et merci pour ta réponse,

J'avais tenté de récupérer la valeur avec .innerHTML mais il prenait les balises avec dans le texte... du style <id="blabla"><p>texte<......ect.
Avec .textContent il ne prend que le texte, ce qui est mieux pour placer dans le titre du sujet.

Je vais tenter ton code je ne savais pas trop comment récupérer "an" dans le formulaire.

Code:

form.inputname.value = an;

Peux tu me confirmer le syntaxe pour placer "an" dans l'input ?
du style

Code:

<input readonly="readonly" name="subject" id="titre "value="an" type="hidden" />

Merci.

[Self]

On enlève l'attribut value dans le html :

Code:

<input readonly="readonly" name="subject" id="titre" type="hidden" />

Et le JavaScript donne ça :

Code:

var an = document.getElementById('id').textContent;
document.getElementById('titre').value = an;

[stefou]

Je vais tenter    

[stefou]

Voilà, le 1er soucis fonctionne.
J'ai perdu un peu de temps avec ceci,

Code:

document.getElementById('titre').value = an;

J'ai placer à la place le 1er code que tu avais donné,

Code:

  form.titre.value = an;

Au final voilà le code qui fonctionne,

Code:

<script type="text/javascript">
function envoiMessage(form) {
var an = document.getElementById('fa_welcome').textContent;
  form.titre.value = an;
}
</script>
<form method="post" action="/post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
   
   <!--      champs invisibles      --> <input name="lt" value="0" type="hidden" />
   <!--      Un nouveau topic sera créé      --> <input name="mode" value="newtopic" type="hidden" />
   <!--      Value 0: Sujet Normal (1 = Note / 2 = annonce)      --> <input name="topictype" value="0" type="hidden" />
   <!--      Contiendra le texte du message      --> <input name="message" value="" type="hidden" />
   <!--        ID du forum dans lequel le message sera posté      -->  <input name="f" value="18" type="hidden" />
      
<input name="subject" id="titre" type="hidden" />

<p>
<input value="Prévisualiser votre présentation" name="preview" type="submit" />
</p>
  </form>

ps: j'ai utilisé l'id fa_welcome car celle là j'étais sure qu'elle existe sur toute les pages pour pouvoir tester le code, et je dois encore placer un input textarea mais là ca devrais allez.


Maintenant reste plus qu'à supprimer le bouton input prévisualisation et automatiser pour que à l'appel du formulaire on arrive directement sur la page de prévisualisation pré-remplie.
Donc si tu sais comment faire c'est envois sur la page de prévisualisation je suis preneur   

[Self]

Le formulaire est-il à copier coller par l'utilisateur ou sur une page HTML ?

[stefou]

Il est sur une page HTML, j'ai un bouton prévu dans ma barre de menu qui dirige vers l'adresse du formulaire

[stefou]

Voilà, comme je n'arrivais pas à le placer dans le formulaire,
J'ai ajouter ton code sous condition dans un js existant.

Code:

if(document.location.href=="http://adresse du formulaire")
      {
            $('input').trigger('click');
      }

Et cela fonctionne   

Un grand merci, car les formulaires c'est pas mon truc.
Mais j'apprends   

[Self]

Pourquoi mettre une condition ?
si le code est placé sur la page HTML il n'agira pas sur le forum...

[stefou]

Je n'ai pas réussi à le placer dans la page je sais pas trop pourquoi (je me demande si il faut pas charger un scipt jquery?) , mais il était tard hier, je vais regarder aujourd'hui si j'y arrive.
C'est pour cela que je l'ai placer dans un js

[Self]

Hello !

Bien oui, pour utiliser jQuery il faut le charger avant avec par exemple :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

[stefou]

Bonjour SeLfde4Th7,

Décidément je reste allergique aux formulaires   

Cela ne veux pas fonctionner à 100%, avec la fonction jQuery il exécute bien la demande, il place le texte dans le message, mais ne prend pas la valeur de l'id dans le titre.
Cela semble logique car on ne charge pas "fa_welcome" temps que on click pas sur le bouton. (enfin je crois).

à l'arrivé sur la page html, il ouvre bien la page newtopic préview et place:
En titre --> Test la valeur de
il devrait mettre --> Test la valeur de Bienvenue Stefou

En message il met bien --> Test formulaire topic

Quand j'enlève le code jQuery et que je click sur le bouton "input" là il fait tout correctement.

Voici le code complet utilisé.

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
        jQuery(function($){
            $('input').trigger('click');
        });
function envoiMessage(form) {
var v_an = document.getElementById('fa_welcome').textContent;
  form.titre.value = "Test la valeur de " + v_an; 
}
</script>


<form method="post" action="/post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
   <!--      champs invisibles      --> <input name="lt" value="0" type="hidden" />
   <!--      Un nouveau topic sera créé      --> <input name="mode" value="newtopic" type="hidden" />
   <!--      Value 0: Sujet Normal (1 = Note / 2 = annonce)      --> <input name="topictype" value="0" type="hidden" />
   <!--      Contiendra le texte du message      --> <input name="message" value="Test formulaire topic" type="hidden" />
   <!--        ID du forum dans lequel le message sera posté      -->  <input name="f" value="20" type="hidden" />
      
  <input name="subject" id="titre" type="hidden" />

<p>
  <input value="Prévisualiser le message !" name="preview" type="submit" /><br></br>
 
</p>
  </form>

Je pense que le problème vient de là

Code:

function envoiMessage(form) {
var v_an = document.getElementById('fa_welcome').textContent;

Quand les input ne sont pas en hidden je remarque qu'il laisse l'input titre vide et le rempli dès que on click sur Voir la prévisualisation (juste avant de quitter le formulaire)

[Self]

#fa_welcome ne se trouve pas sur ta page HTML, le JavaScript ne va donc pas trouver le texte de cet élément.
Soit tu mets le haut et bas de ton forum dans la page HTML via l'option pour tester avec #fa_welcome soit tu mets quelque part dans ta page un élément avec un id et tu tests comme ça .

[stefou]

Si Si fa_welcome s'y trouve. (j'utilise le haut-bas du forum)
D'ailleur quand je retire

Code:

        jQuery(function($){
            $('input').trigger('click');
        });

Cela fonctionne.

Je crois qu'il ne charge pas cette partie temps que on click pas manuellement sur le input submit

Code:

function envoiMessage(form) {
var v_an = document.getElementById('fa_welcome').textContent;
  form.titre.value = "Test la valeur de " + v_an;
}

cette partie s'exécute avec (si j'ai bien compris)

Code:

<form method="post" action="/post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">

[Self]

Avec le haut et bas du forum pas besoin d'importer jQuery alors il faut retirer ce passage :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Et j'ai ce résultat :

[stefou]

Ca fonctionne on avance...

par contre quand je prends mon id pfff ca marche pas. je vais regarder d'un peu plus près mon id

[Self]

Peut-être qu'en ayant le tout je pourrais mieux t'aider ?

[stefou]

Voici le tout,
je vais essayer de détailler au mieux.   

[Self]

Mettre une balise block dans une balise inline c'est pas bien (enfin le HTML5 me fait un peu mentir...) donc la balise <p> dans un <span> on évite, puis les variables {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK} génère une ligne et une cellule de tableau que l'on doit donc entourer par la balise <table>.

Je ne sais pas trop pourquoi tu as mis :

Code:

$(window).load(...

mais ça nous servira pas pour ce qu'on veut faire, on va prendre les deux lignes du dessous et les mettre en dessous de :

Code:

jQuery(function($){

Dans ce passage :

Code:

$('#ig_anif').load('/forum'+' #anif'+' strong', function(){
$("#ig_anif strong").append("<p>,  </p>");

les + ne servent à rien, on ce sert des + pour associer une variable ou du code à une chaine de caractère ou pour des opérations, on fera simplement comme ça :

Code:

'/forum #anif strong'

Puis si les balises <p> sont la pour effectuer un passage de ligne autant mettre :

Code:

,<br />

Il faut déjà résoudre ça, je ferais des tests demain pour faire marcher le tout .

[stefou]

Merci,
Je prend bonne note de tes remarques, j'apprends sur le tas avec le net, on y trouve un peu de tous du bon et du moins bon.
Pour le dernier point, j'ai utilisé <p> pour insérer une virgule et un espace, pas pour un retour à la ligne.
Car quand il y a plusieurs pseudo, le .textContent colle les pseudos l'un à l'autre.
Merci pour ton aide.

[demeter1]

Je passe en maraude juste pour remercier Stefou pour la portion de code concernant la prévisualisation . Je vous avouerai avoir fait des essais lors de la mise en place de mes formulaires mais sans trouver la solution.

[stefou]

Bonjour et merci demeter,
Si c'est le .trigger c'est encore seLfde4Th7 qu'il faut remercier   

[Self]

Bonjour,

Je pense que je dois m'être compliqué la vie et qu'il doit y avoir mieux comme code pour faire cela, mais sans mettre le haut et bas du forum ceci fonctionne :

Code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Birthday</title>
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script type="text/javascript">
         

         jQuery(function($){
            $('#ig_anif').load('/forum #anif', function(response, status, xhr){
               
               if(status == 'success'){/*Si le chargement réussi*/
                  
                  var v_anif = $('#anif').text();
                  if($('#anif a').length == 0){
                     $('.birthday').html('Il n\'y a pas d\'anniversaire aujourd\'hui');
                     return false;
                  };

                  /*Fonction d'envoi du message*/
                  function envoiMessage(form) {
                     form.subject.value = "Joyeux anniversaire à "+v_anif;
                  };

                  $('form').on('submit', function(){
                     envoiMessage(this);
                  });

                  /*Déclenchement du clique sur le bouton previw*/
                  $('#test').trigger('click');
               }else if (status == 'error'){/*Si le chargement échoue*/
                  
                  alert('Erreur '+xhr.status+' '+xhr.statusText);
               };
            });   
         });
      </script>
   </head>
   <body>
      <form method="post" action="/post" enctype="multipart/form-data">
         <!--      champs invisibles      -->
         <input name="lt" value="0" type="hidden"/>
         <!--      Un nouveau topic sera créé      -->
         <input name="mode" value="newtopic" type="hidden"/>
         <!--      Value 0: Sujet Normal (1 = Note / 2 = annonce)      -->
         <input name="topictype" value="0" type="hidden"/>
         <!--      Contiendra le texte du message      -->
         <input name="message" value=":605" type="hidden"/>
         <!--        ID du forum dans lequel le message sera posté      -->
         <input name="f" value="20" type="hidden"/>
         <input name="subject" type="hidden"/>
         <p>
            <span class="birthday"><b>Souhaiter un joyeux anniversaire ?</b></span>
            <input id="test" value="Prévisualiser le message !" name="preview" type="submit" style="display:none;" /><br>
            </br>
         </p>
         <div id="ig_anif" style="display:none;"></div>
      </form>
   </body>
</html>

Veux-tu une explication du code (je pense que tu comprends)?

EDIT: j'ai oublié quelques précisions, je n'avais pas vu que ton forum est en phpBB3, du coup il ne faut pas prendre en compte ceci :

puis les variables {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK} génère une ligne et une cellule de tableau que l'on doit donc entourer par la balise <table>.

J'ai pour ma part juste entouré la variable {L_WHOSBIRTHDAY_TODAY} par un span avec l'id anif.

[stefou]

Bonjour,
Merci 1000 fois   

Il y a juste un problème dans la récup du pseudo,

Il me met en titre --> Joyeux anniversaire à Membres fêtant leur anniversaire aujourd'hui : albert.


Edit: cette fois c'est la bonne !  :youopi:  je me suis permis de modifier ceci

Code:

var v_anif = $('#anif').text();

comme ceci

Code:

var v_anif = $('#anif strong').text();

[Self]

On peut remplacer la ligne de la variable par ceci :

Code:

var v_anif = $('#anif').text().replace(/Membres fêtant leur anniversaire aujourd'hui :/, '');

EDIT:
J'y ai pensé aussi, le problème c'est qu'il risque de ne mettre que le contenu de la première balise strong qu'il trouve, donc si il y a plusieurs anniversaire le même jour, un seul risque d'être souhaité.

[stefou]

Voilà, test effectué

Il met joyeux anniversaire à AlbertRobert
C'est pour cela que j'avais ajouté <p>, </p>

Mais je suis sûre que tu as une autre solution   

[Self]

Tu as pris la solution que tu as trouvé ?

Code:

var v_anif = $('#anif strong').text();

Si oui (et je pense que oui..), enleve strong et applique la solution que je t'ai donné dans mon précédent message, les virgules ne font pas parties du contenu texte des balises strong.

[stefou]

Ok,
Pourrais tu me dire si &#32 est considérer comme un espace et texte ?

[stefou]

Je lis le code pour comprendre et je me pose une question ?

ceci

Code:

var v_anif = $('#anif').text();

de devrais pas être

Code:

var v_anif = $('#ig_anif').text();