Dev Faq
0
votes

Utilisation de jQuery pour changer [Nom ici] à partir de la saisie de texte

J'ai une forme simple et je veux que l'entrée de nom dans la 1ère zone de texte puisse remplacer le texte [nom ici] de la zone Sélectionner une sortie à la 3ème case, car elle le fait déjà.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
  <div class="well">

    <div class="form-group">
      <label>Client's Name or Animal </label>
      <input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
    </div>

    <div class="form-group">
      <label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
      <select class="form-control" id="phrase" name="phrase">
        <option>Please Select</option>
        <option>Custom Phrase [NAME HERE] 1</option>
        <option>Custom Phrase [NAME HERE] 2</option>
        <option>Custom Phrase [NAME HERE] 3</option>
        <option>Custom Phrase [NAME HERE] 4</option>
        <option>Custom Phrase [NAME HERE] 5</option>
      </select>
    </div>


    <div class="form-group">
      <label>Custom Word(s), Sentence or Paragraph</label>
      <textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
      <span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
    </div>

1 commentaires

Ce n'est pas clair lorsque je tape quelque chose dans l'entrée, il devrait-il changer toutes les options?

5 Réponses :

0
votes

Vous pouvez utiliser quelque chose comme ceci:

Exemple1: Cela modifiera la première option contenant [nom ici] code> p> xxx pre>

Exemple de travail STRAND> P>

P> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
  <div class="well">

    <div class="form-group">
      <label>Client's Name or Animal </label>
      <input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
    </div>

    <div class="form-group">
      <label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
      <select class="form-control" id="phrase" name="phrase">
        <option>Please Select</option>
      </select>
    </div>


    <div class="form-group">
      <label>Custom Word(s), Sentence or Paragraph</label>
      <textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
      <span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
    </div>

0 commentaires
0
votes

Vous pouvez utiliser string.replace

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input">
<select id="select">
  <option>Custom Phrase [NAME HERE] 1</option>
  <option>Custom Phrase [NAME HERE] 2</option>
  <option>Custom Phrase [NAME HERE] 3</option>
  <option>Custom Phrase [NAME HERE] 4</option>
  <option>Custom Phrase [NAME HERE] 5</option>
</select>

5 commentaires

Cela modifierait chaque option qui peut exister sur la page.

@Scottmarcus bien sûr. C'est un exemple, d'illustrer l'utilisation de la chaîne remplacer. Mon objectif n'est pas un dépôt de mon code dans un projet.

Je vous entends, mais je vous rappelle simplement qu'il est prudent de supposer que, avec une simple question comme celle-ci, que l'OP est très nouveau et si nous ne signions pas de choses comme ça, ils ne sauront pas mieux et Ils vont simplement prendre la réponse comme prévu, puis être de retour 20 minutes plus tard avec une autre question comme "Comment arrêter mon code de l'affectation de tous les éléments d'option de la page?"

Stratégies d'apprentissage de l'échec. S'il obtient mon script et ne connaissez pas le principe du sélecteur JQuery. Il est important de poster une nouvelle question pour apprendre cela ou apprendre de là-bas. Merci pour votre note, je mettez à jour le script pour changer ce sélecteur.

En tant que professionnel d'apprentissage et de développement, spécialisée dans les technologies Web des 25 dernières années, je suis tout à fait d'accord que l'apprentissage de l'échec est une technique très efficace qui cimpe la connaissance. Mais sur une plate-forme comme le débordement de la pile, nous sommes également concernés par des questions ou des questions en double ou des questions qui ne montrent aucune recherche ni effort de la part de l'OP à résoudre eux-mêmes. Donc, dans cet environnement, IMHO, il vaut mieux être complet avec des réponses, c'est tout. ;)

0
votes

Lorsque l'élément code> nom code> est modifié, vous devez boucler sur chacune des éléments code> Option code> et remplacer le [nom ici] code> partie de Le texte avec la valeur du nom code> élément code>.

notes (FYI): strong> p>

  • C'est une bonne idée de ne jamais donner à aucun élément A nom code> ou un identifiant code> de "nom" code> car nom code> est une propriété globale de la fenêtre code> objet code> et en utilisant cela avec vos éléments HTML peut causer des problèmes dans certains caisses de bord. li>
  • car vous avez donné vos éléments ID code> s, utilisez simplement ceux comme votre JQuery Selcors - - C'est moins à taper et il fonctionne mieux. Li>
  • Vous n'utilisez pas correctement l'élément code> étiquette code>. C'est censé être un légende pour un champ de formulaire et vous pouvez "se connecter" à un champ par Ajout d'un pour code> attribuer qui a une valeur du ID code> de la champ de forme C'est une étiquette pour ou vous pouvez nier le champ de formulaire qu'il est Une étiquette pour l'étiquette code> code> elle-même. Vous avez eu le pour code> attribut configuré sur le second, mais vous n'avez pas eu la valeur de le pour code> défini correctement. Les étiquettes sont très importantes pour l'utilisateur Accessibilité, vous voudrez donc prendre soin de leur utilisation. LI>
  • L'équipe JQuery a déprécié l'utilisation de méthodes d'événement raccourci ( Cliquez sur () CODE>, Modifier () code>, etc.) il y a assez longtemps. Ils recommandent maintenant Utilisation du On () code> méthode de liaison d'événement (illustrée ci-dessous ). LI>
  • N'utilisez pas d'éléments HTML en raison du style visuel par défaut qui vient avec eux. Utilisez l'élément HTML correct qui transmet le Signification du contenu. Par exemple, vous avez utilisé code> ci-dessous le plus probablement parce qu'il produit du texte en italique. Mais, la vraie raison de utiliser cet élément est de transmettre que le contenu doit être interprété comme étant déclaré dans une "voix ou une humeur alternative" - ​​comme si c'était Quelque chose a dit quelqu'un. Pour tous les coiffants visuels, utilisez CSS. LI> ul>

    p> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
  <div class="well">

    <div class="form-group">
      <label for="userName">Client's Name or Animal </label>
      <input type="text" class="form-control" name="userName" id="userName" placeholder="Example: John Doe">
    </div>

    <div class="form-group">
      <label for="phrase">Select Phrase or Enter Custom Text Below</label>
      <select class="form-control" id="phrase" name="phrase">
        <option>Please Select</option>
        <option>Custom Phrase [NAME HERE] 1</option>
        <option>Custom Phrase [NAME HERE] 2</option>
        <option>Custom Phrase [NAME HERE] 3</option>
        <option>Custom Phrase [NAME HERE] 4</option>
        <option>Custom Phrase [NAME HERE] 5</option>
      </select>
    </div>


    <div class="form-group">
      <label for="line">Custom Word(s), Sentence or Paragraph</label>
      <textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
      <span class="help-block emphasized">500 Words MAX</span>
    </div>

0 commentaires
0
votes

Vous pouvez plutôt chercher des modifications sur la zone d'entrée code> nom code>, puis lorsqu'un changement se produit, obtenez les noms et remplacez toutes les options avec le nom donné à l'aide de .replace code > et .text code>:

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
  <div class="well">

    <div class="form-group">
      <label>Client's Name or Animal </label>
      <input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
    </div>

    <div class="form-group">
      <label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
      <select class="form-control" id="phrase" name="phrase">
        <option>Please Select</option>
        <option>Custom Phrase [NAME HERE] 1</option>
        <option>Custom Phrase [NAME HERE] 2</option>
        <option>Custom Phrase [NAME HERE] 3</option>
        <option>Custom Phrase [NAME HERE] 4</option>
        <option>Custom Phrase [NAME HERE] 5</option>
      </select>
    </div>


    <div class="form-group">
      <label>Custom Word(s), Sentence or Paragraph</label>
      <textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
      <span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
    </div>

0 commentaires
0
votes

Un peu plus compliqué, mais cette solution permet la mise à jour en temps réel de la boîte de sélection. Cela fonctionne de la manière suivante:

  1. Enregistrez la valeur initiale des options dans une variable. LI>
  2. sur 'Keyup' (ou tout ce que vous voulez) procédez comme suit:
    1. clonez les options de modèle et remplacez l'espace réservé. LI>
    2. Retirez les anciennes options. LI>
    3. Insérez les nouvelles options. LI>
    4. Mettez à jour la zone Select pour avoir l'option avec le même index sélectionné. Li> ol> li>
    5. Déclenchez une fois l'événement pour supprimer l'espace réservé de la vue. Li> ol>

      p> 

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start form -->
<form action="index.php" method="POST" id="myForm">
  <div class="well">

    <div class="form-group">
      <label>Client's Name or Animal </label>
      <input type="text" class="form-control" name="name" id="name" placeholder="Example: John Doe">
    </div>

    <div class="form-group">
      <label for="exampleFormControlSelect1">Select Phrase or Enter Custom Text Below</label>
      <select class="form-control" id="phrase" name="phrase">
        <option>Please Select</option>
        <option>Custom Phrase [NAME HERE] 1</option>
        <option>Custom Phrase [NAME HERE] 2</option>
        <option>Custom Phrase [NAME HERE] 3</option>
        <option>Custom Phrase [NAME HERE] 4</option>
        <option>Custom Phrase [NAME HERE] 5</option>
      </select>
    </div>


    <div class="form-group">
      <label>Custom Word(s), Sentence or Paragraph</label>
      <textarea rows="4" class="form-control" id="line" name="line" placeholder="Example: I MISS YOU"></textarea>
      <span class="help-block" style="color: red;"><em>500 Words MAX</em></span>
    </div>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO