Apparition de boutons pour remplir un formulaire

**kewan** · 30/11/2018, 18h28

Salut tout le monde,

j'ai besoin de votre aide.

Je voudrais remplir un formulaire à l'aide de boutons qui apparaîtraient après un clic.

Comme on peut le faire sur un écran tactile : on clic sur un champ 1, le clavier apparaît, on complète le champ 1, on clic sur un le champ 2, on complète le champ 2 ..........etc

Mon formulaire :
Nom : Image11.jpg
Affichages : 2
Taille : 14,2 Ko

Nom : Image11.jpg
Affichages : 2
Taille : 14,2 Ko

Après le clic :
Nom : Image12.jpg
Affichages : 2
Taille : 98,4 Ko

Après avoir remplis :
Nom : Image13.jpg
Affichages : 2
Taille : 91,4 Ko

Code formulaire :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/css/test.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <script type="text/javascript" src="/js/test.js"></script>
    </head>
    <body>
        <div id="affichageValeur" class="affichageValeur">            <?php
                for($i = 20; $i >= 0; $i = $i - 0.5){
                    ?><input type="button" value="<?php echo $i;?>" onclick ="document.getElementById('champ').value = <?php echo $i;?>" class="bp1"/><?php
                }
            ?>
        </div>
 
        <form onsubmit="return apparitionValeur(this)" method="post">
            <input type="text" id="champ1" /><button type="submit" name="champ1">Noter 1</button><br>
            <input type="text" id="champ2" /><button type="submit" name="champ2">Noter 2</button><br>
            <input type="text" id="champ3" /><button type="submit" name="champ3">Noter 3</button><br>
            <input type="text" id="champ4" /><button type="submit" name="champ4">Noter 4</button><br>
        </form>
    </body>
</html>

Code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function apparitionValeur(){<br>    // Faire apparaitre la div affichageValeur
    $('#affichageValeur').css('display','block');<br>
    // Bloquer l'envoie du formulaire
    return false;
}

Ce qui me manque c'est remplir le bon champ de texte en fonction du clic et faire disparaître les boutons après avoir mis la valeur.

Dans la div affichageValeur dois je créer un nouveau formulaire qui renvoie vers une nouvelle fonction ?

Merci pour votre aide.

kewan

**Toufik83** · 02/12/2018, 14h27

si tu veux utiliser jQuery correctement, il faut supprimer les attributs onclick et onsubmit et traduire ton code en jQuery.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
$(document).ready(function(){
	$('#maForm input')//ne pas oublier d'attribuer le id (maForm)
	.click(function(){//click sur les input de la form ayant l'id #form
		$('#affichageValeur')
		.data({id:$(this).attr('id')})//stocker l'id de l'élément input sur lequel on a cliqué dans data de #affichageValeur
	        .show(200);
	})
	.parent('#maForm')//remonter au parent (#maForm) de l'input
	.submit(function(e){//submit le #maForm
		e.preventDefault();//bloque l'envoie du formulaire
		$('#affichageValeur').css('display','block');
	});
 
	$('#affichageValeur input.bp1')
	.click(function(){//click sur les input ayant la classe .bp1
		$(this)
                .parent('#affichageValeur')//cibler le parent de .bp1 (qui est #affichageValeur)
                .hide(200)//cacher le parent (#affichageValeur)
		.next('#maForm')//cibler l'élément suivant du parent(#affichageValeur) (qui est #maForm)
		.find('#'+$(this).parent().data().id)//chercher l'input correspondant en utilisant la data().id
		.val($(this).val());//attribution de la valeur dans l'input correspondant
	});
 
});

Apparition de boutons pour remplir un formulaire

jQuery

Partager

Partager