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

Résolu

molotov_4 Messages postés 2 Date d'inscription mardi 2 avril 2019 Statut Membre Dernière intervention 12 avril 2019 - 2 avril 2019 à 16:03
molotov_4 Messages postés 2 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.

A voir également:

1 réponse

Réponse 1 / 1

@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 154
3 avril 2019 à 12:32

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
            })   
        });

molotov_4 Messages postés 2 Date d'inscription mardi 2 avril 2019 Statut Membre Dernière intervention 12 avril 2019
3 avril 2019 à 12:41

Merci beaucoup pour votre réponse.
Je viens de test et ça fonctionne, merci encore une fois

Discussions similaires

Fenêtre modale Bootstrap

page modale

Form modal c'est quoi

Form modal ou on top

comment faire une fenetre modale

Votre réponse

Discussions similaires