Résolu Comment afficher du texte en temp réelle

[Weazl]

Salut, je m'explique, j'aimerais, lorsqu'on remplis un formulaire, on a un retour direct de ce qu'on écrit, c'est a dire je tape 'bonjour' dans l'input par exemple, ça me l'écrit directement dans un tableau par exemple (un sorte de résumé de tout ce qu'on tape) si quelqu'un aurai un piste a exploité je suis preneur ! Merci

 

[WhiiTe']

Salut,

Tu peux le faire en NodeJs, couplé avec du socket.io par exemple, tu peux faire des applications en temps réels.

Après tu peux t'embêter un peu si tu le fais en Ruby PHP ou même python tu peux écrire dans un fichier et de l'autre coté le lire et rafraichir la lecture toutes les secondes, mais c'est pas optimal

 

[Paul GTP]

Tu parles côté client ou côté serveur ? Si c'est côté serveur effectivement tu peux passer par des sockets ou du nodejs (ou ajax pour les plus fifous )
Si c'est côté client un script js simple fera l'affaire

Si tu peux nous en dire un peu plus sur ce que tu veux faire exactement

 

[Mathieu ?]

Ruby PHP

 

[WhiiTe']

Ah bah en vrai ça fonctionne hein

 

[Daniel.Dev]

Soit NodeJS, soit avec jQuery et tu peux faire les formulaires avec Ajax.

<div id="resume"></div>

<form id="nomDuFormulaire">
    <input type="text" class="pseudonyme" placeholder="Votre pseudonyme">
    <input type="text" class="age" placeholder="Votre âge">
    <input type="submit" value="Valider">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#nomDuFormulaire").submit(function(e) {
    e.preventDefault();
    var Pseudonyme = $("#nomDuFormulaire .pseudonyme").val();
    var Age = $("#nomDuFormulaire .age").val();
    $("#resume").text("Ton pseudonyme est " + Pseudonyme + " et tu as " + Age + " ans.")
});
</script>

Envoyer un formulaire avec Ajax

$("#nomDuFormulaire").submit(function(e) {
    e.preventDefault();
    var Pseudonyme = $("#nomDuFormulaire .pseudonyme").val();
    var Age = $("#nomDuFormulaire .age").val();
    $("#resume").text("Ton pseudonyme est " + Pseudonyme + " et tu as " + Age + " ans.");
    
    $.ajax({
        type: "POST",
        name: "nomDuFormulaire",
        url: 'app/form/page.php',
        data: {
            pseudonyme: Pseudonyme,
            age: Age
        },
        success: function(data)
        {
            alert(data);
        }
    });
});

et tu récupère tes valeurs dans le fichier PHP avec

$_POST['pseudonyme']

et

$_POST['age']

 

[Weazl]

Tu parles côté client ou côté serveur ? Si c'est côté serveur effectivement tu peux passer par des sockets ou du nodejs (ou ajax pour les plus fifous )
Si c'est côté client un script js simple fera l'affaire

Si tu peux nous en dire un peu plus sur ce que tu veux faire exactement

Côté client en effet des screen serons surement plus parlant :

You must be registered for see images attach

donc voilà en gros j'aimerais que quand je tape le nom du jeu ou autre ça se répercute directement dans le tableau en dessous !

 

[Weazl]

Soit NodeJS, soit avec jQuery et tu peux faire les formulaires avec Ajax.

<div id="resume"></div>

<form id="nomDuFormulaire">
<input type="text" class="pseudonyme" placeholder="Votre pseudonyme">
<input type="text" class="age" placeholder="Votre âge">
<input type="submit" value="Valider">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#nomDuFormulaire").submit(function(e) {
e.preventDefault();
var Pseudonyme = $("#nomDuFormulaire .pseudonyme").val();
var Age = $("#nomDuFormulaire .age").val();
$("#resume").text("Ton pseudonyme est " + Pseudonyme + " et tu as " + Age + " ans.")
});
</script>

Envoyer un formulaire avec Ajax

$("#nomDuFormulaire").submit(function(e) {
e.preventDefault();
var Pseudonyme = $("#nomDuFormulaire .pseudonyme").val();
var Age = $("#nomDuFormulaire .age").val();
$("#resume").text("Ton pseudonyme est " + Pseudonyme + " et tu as " + Age + " ans.");

$.ajax({
type: "POST",
name: "nomDuFormulaire",
url: 'app/form/page.php',
data: {
pseudonyme: Pseudonyme,
age: Age
},
success: function(data)
{
alert(data);
}
});
});

et tu récupère tes valeurs dans le fichier PHP avec

$_POST['pseudonyme']

et

$_POST['age']

Oui mais là ça s'affichera uniquement lorsque le formulaire est envoyer mais une fois envoyer j'ai plus l’intérêt de garder ses infos ..

 

[Daniel.Dev]

Oui mais là ça s'affichera uniquement lorsque le formulaire est envoyer mais une fois envoyer j'ai plus l’intérêt de garder ses infos ..

Je viens de comprendre, on peut avoir le code du screen que tu as envoyé ?

 

[Paul GTP]

Dans ce cas, exemple tout con:

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

<input type="text" id="game" name="game" placeholder="Choisis ton jeu..." />

<div id="platform">
    <button id="pc">PC</button>
    <button id="pc">PS4</button>
    <button id="pc">Xbox One</button>
</div>

<div id="recap">
    <h2>Récapitulatif</h2>
    <p>Jeu: <span id="preview-game"></p>
    <p>Plateforme: <span id="preview-platform" /></p>
</div>

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

<script>
$('#game').keyup(function() {
    $('#preview-game').html($(this).val());
});

$('#platform button').click(function() {
    $('#preview-platform').html($(this).text())
});
</script>

 

[Weazl]

Dans ce cas, exemple tout con:

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

<input type="text" id="game" name="game" placeholder="Choisis ton jeu..." />

<div id="platform">
<button id="pc">PC</button>
<button id="pc">PS4</button>
<button id="pc">Xbox One</button>
</div>

<div id="recap">
<h2>Récapitulatif</h2>
<p>Jeu: <span id="preview-game"></p>
<p>Plateforme: <span id="preview-platform" /></p>
</div>

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

<script>
$('#game').keyup(function() {
$('#preview-game').html($(this).val());
});

$('#platform button').click(function() {
$('#preview-platform').html($(this).text())
});
</script>

Bah c'est parfait ! Merci beaucoup

 

[Melvin' SEC]

Salut,
J'ai déplacé ta discussion en section Résolu.

Bonne soirée,
Melvin'