Récupérer une valeur d'un modal dans un input [Résolu]

Messages postés
3
Date d'inscription
mardi 2 avril 2019
Statut
Membre
Dernière intervention
12 avril 2019
- - Dernière réponse : molotov_4
Messages postés
3
Date d'inscription
mardi 2 avril 2019
Statut
Membre
Dernière intervention
12 avril 2019
- 3 avril 2019 à 12:41
Bonjour,
J'ai une question SVP, je dois réaliser une interface de gestion des articles sur laquelle j'ai plusieurs bottons on cliquant sur n'importe laquelle ça me sort une boite de dialogue (Pop-Up), jusqu'ici tout est OK.

Dans le Modal j'ai des valeur dans une liste déroulante, lors'que je clique sur "Sauvegarder" j'arrive à afficher l’élément sélectionné dans le premier 'input', par contre pour les autres boutons ça ne marche pas.

Voici le code du modal + click
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>TEST </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id^=btn_]").on('click', function(){
var boutton_selectionne = this.id
console.log(boutton_selectionne)
$("#monModal").modal('show')
})
$('#sauvegarder').on('click', function(){
var btn1 = $('#nbre_compart option:selected').text()
$('#txt_btn1').val(btn1)
return
})
});
</script>
</head>
<body>
<button class="btn btn-info" id="btn_mdl1">Boutton 1</button>
<input type="text" name="btn_1" id="txt_btn1">
<button class="btn btn-info" id="btn_mdl2">Boutton 2</button>
<input type="text" name="btn_2" id="txt_btn2">
<button class="btn btn-info" id="btn_mdl3">Boutton 3</button>
<input type="text" name="btn_3" id="txt_btn3">
<button class="btn btn-info" id="btn_mdl4">Boutton 4</button>
<input type="text" name="btn_4" id="txt_btn4">
<div id="monModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<label for="nbre_compart">Nombre de compartiments</label>
<select id="nbre_compart">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="modal-footer">
<button type="button" id="sauvegarder" class="btn btn-primary">Sauvegarder</button>
</div>
</div>
</div>
</div>
</body>
</html>


Avec ce que je viens de faire j'arrive a afficher le selected dans le premier "input"
Le but c'est que lorsque je clique sur chaque bouton la valeur choisi doit s'afficher dans l'input qui le suit Ex : clique sur 'btn_mdl2' la valeur choisi s'affiche dans l'input avec l'id "txt_btn1"
J’espère que ma demande était claire, par avance merci.
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
Messages postés
1683
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 avril 2019
37
1
Merci
bonjour

j'ai fait des modification mais pour ce fair il a falu creer une varable global qui pointe lien vers le input ciblé

var el=''

        $(document).ready(function(){
            $("[id^=btn_]").on('click', function(){
                var boutton_selectionne = this.id
                console.log(boutton_selectionne)
				el=this.nextElementSibling
				console.log(el)
                $("#monModal").modal('show')
            })
            $('#sauvegarder').on('click', function(){
                var btn1 = $('#nbre_compart option:selected').text()
                el.value=btn1
                return
            })   
        });

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CodeS-SourceS

Codes Sources 111 internautes nous ont dit merci ce mois-ci

molotov_4
Messages postés
3
Date d'inscription
mardi 2 avril 2019
Statut
Membre
Dernière intervention
12 avril 2019
-
Merci beaucoup pour votre réponse.
Je viens de test et ça fonctionne, merci encore une fois
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.