Jquery ajouter des données de texte avec un saut de ligne

Question

Jquery ajouter des données de texte avec un saut de ligne

Demandé el 18 de Décembre, 2021: Quand la question a-t-elle été
79 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai donc ce script qui prend les données d'un formulaire et les ajoute dans un div HTML.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }

    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>

    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data =
      'Name: ' + name.value + ' \r\n ' +  
      'Age: ' + age.value + ' \r\n ' +  
      'Email: ' + email.value + ' \r\n ' +  
      'Country: ' + country.value + ' \r\n ' +  
      'Message: ' + msg.value;

    $('#output').append("<br />" + "<br />");
    $('#output').append(document.createTextNode(data));

  }
</script>

</html>

Mais le problème est que lorsque je remplis les données et que je clique sur Write il produit toutes les données du formulaire sur une seule ligne. (Nom : x Age : 4 Email : y Pays : Japon Message : z)

Et je veux que ce soit comme ça,

Name: x 
Age: 4 
Email: y 
Country: Japan 
Message: z

Name: x 
Age: 42
Email: y 
Country: Japan 
Message: zd ....

J'ai donc essayé de créer une nouvelle ligne ( \n ) en utilisant le javascript mais il semble que cela ne l'affecte pas.

C'est ce que j'ai essayé.

          'Name: ' + name.value + ' \r\n ' + '\n' +   
          'Age: ' + age.value + ' \r\n ' + '\n' +     
          'Email: ' + email.value + ' \r\n ' + '\n' +     
          'Country: ' + country.value + ' \r\n ' + '\n' +     
          'Message: ' + msg.value;

Alors quel est le problème ici. Toute aide serait très appréciée. Merci.

Demandé el 18 de Décembre, 2021 par Daina

Answer 1

3 Réponses

Answer 2

3voto

FivePlyPaper Points 344

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }

    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>

    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = [ 
      `<p>Name: ${name.value}</p>`, 
      `<p>Age: ${age.value}</p>`, 
      `<p>Email: ${email.value}</p>`,  
      `<p>Country: ${country.value}</p>`,  
      `<p>Message: ${msg.value}</p>`];

    $('#output').append("<br />" + "<br />");

    data.forEach(line => $('#output').append(line));

  }
</script>

</html>

Donc ici, je mets d'abord chaque ligne de données dans un fichier <p> et de le mettre dans une liste, j'utilise des littéraux de modèle qui sont plus propres. Ensuite, pour insérer les données, il faut appeler une fonction .forEach() sur la liste et ensuite ajouter chaque ligne (ou élément de la liste) à la sortie. Voici la partie que j'ai modifiée.

let data = [ 
  `<p>Name: ${name.value}</p>`, 
  `<p>Age: ${age.value}</p>`, 
  `<p>Email: ${email.value}</p>`,  
  `<p>Country: ${country.value}</p>`,  
  `<p>Message: ${msg.value}</p>`];

$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));

Répondu el 18 de Décembre, 2021 par FivePlyPaper (344 Points )

Answer 3

2voto

Steve Points 234

Vous pouvez toujours envelopper la sortie dans un fichier <pre> élément.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      padding: 10px;
      background-color: #f6f6f6;
      overflow: hidden;
    }

    input[type=text],
    textarea,
    select {
      font: 17px Calibri;
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    input[type=button] {
      font: 17px Calibri;
      width: auto;
      float: right;
      cursor: pointer;
      padding: 7px;
    }
  </style>
</head>

<body>
  <div>

    <div>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Write" onclick="writeFile()" />
    </div>

  </div>
  <div class="output-area">
    <h4>Output</h4>
    <div id="output" class="inner">
    </div>
  </div>
  <span></span>

</body>
<script>
  let writeFile = () => {

    const name = document.getElementById('txtName');
    const age = document.getElementById('txtAge');
    const email = document.getElementById('txtEmail');
    const country = document.getElementById('selCountry');
    const msg = document.getElementById('msg');

    let data = 'Name: ' + name.value + ' \r\n' +  
      'Age: ' + age.value + ' \r\n' +  
      'Email: ' + email.value + ' \r\n' +  
      'Country: ' + country.value + ' \r\n' +  
      'Message: ' + msg.value;

    //$('#output').append("<br />" + "<br />");
    $('#output').append(`<pre>${data}</pre>`);

  }
</script>

</html>

Répondu el 18 de Décembre, 2021 par Steve (234 Points )

Answer 4

2voto

Tomas Korinek Points 196

Afin de rompre la ligne en HTML, vous voulez utiliser <br> au lieu de \r\n . Par exemple, comme ceci :

let data =
  'Name: ' + name.value + '<br>' +
  'Age: ' + age.value + '<br>' +
  'Email: ' + email.value + '<br>' +
  'Country: ' + country.value + '<br>' +
  'Message: ' + msg.value;

Alors si vous ajoutez du HTML, n'utilisez pas createTextNode() car elle permettrait d'échapper aux entités HTML. Vous pouvez donc simplement utiliser :

$('#output').append(data);

Et la dernière chose. Si vous ne voulez pas ajouter le contenu à chaque fois que vous appuyez sur le bouton, vous pouvez entrer des données dans le DIV en utilisant les éléments suivants html() au lieu de append() .

$('#output').html(data);

Répondu el 18 de Décembre, 2021 par Tomas Korinek (196 Points )

Jquery ajouter des données de texte avec un saut de ligne

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Jquery ajouter des données de texte avec un saut de ligne

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: