Comment obtenir les données les valeurs de bootstrap modale à l'aide de jQuery ou javascript en cliquant sur le bouton à l'intérieur de l'modal?

Je veux obtenir les données les valeurs de bootstrap modal en cliquant sur le bouton à l'intérieur de la modale.
Voici mon modal -

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Cancel</h4>
                                </div>
                                <div class="modal-body"> 
                                    Are you sure you want to cancel this?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="savebutton" class="btn btn-success" >Yes</button>  
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                </div>
                            </div>
                        </div> 
                    </div>

Et ici est la façon dont je suis la transmission des données à modale

Mise à jour -

    <button data-target='#myModal' id='link' data-toggle='modal' data-id="1"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="2"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button>
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="3"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button>
    ...
    ..
    .
    <button data-target='#myModal' id='link' data-toggle='modal' data-id="n"  class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>

Modale peut être appelée à partir de n'importe lequel des nombreux boutons et j'ai besoin d'obtenir les données de l'id du bouton. par exemple, si je clique sur "Annuler 1" sur le bouton, je devrais obtenir des données-id 1 après avoir cliqué sur le bouton "Oui" en modal.

Je veux obtenir les données modales de la valeur du champ "id" qui est 1234 en cliquant sur le bouton "Oui" dans cette modale à l'aide de jQuery ou javascript.

var id=document.getElementById('savebutton').getAttribute("id");
Merci pour l'aide. J'ai essayé, mais c'est de retourner la valeur null au lieu de la valeur. Voici le jsfiddle- jsfiddle.net/Au9tc/4771

OriginalL'auteur gauravparmar | 2016-10-18

  1. 5

    J'ai modifié votre violon :
    http://jsfiddle.net/exr00e0d/

    vous aviez pris href. au lieu de cela, j'ai pris la cible(modale).

    $('.cancel_modal').click(function() {
   //alert('called');
    //we want to copy the 'id' from the button to the modal
    var href = $(this).data('target');
    var id = $(this).data('id');

    //since the value of href is what we want, so I just did it like so
    alert(href);
    //used it as the selector for the modal
    alert(id);
    $(href).data('id', id);
});
    Merci beaucoup. Il a résolu mon problème.

    OriginalL'auteur Abdul Rehman Sayed

  2. 1

    essayer cette

    function getid() {
var id=document.getElementById('savebutton').getAttribute("data-‌​id");
return id;
}

<button type="button" id="savebutton" class="btn btn-success" onclick="getid()" >Yes</button>
    Merci pour l'aide. J'ai essayé, mais c'est de retourner la valeur null au lieu de la valeur. Voici le jsfiddle- jsfiddle.net/Au9tc/4771
    vous avez manqué de données* ie attribut de données , data-id="1234"
    J'ai mis à jour le violon vérifier... jsfiddle.net/Au9tc/4777
    En fait, j'ai plusieurs généré dynamiquement "Annuler" des boutons pour ouvrir le modal et je veux obtenir le data-id du bouton en cliquant sur le bouton "Oui" à l'intérieur du modal. Voici la mise à jour de jsfiddle si vous pouviez s'il vous plaît aidez - jsfiddle.net/gauravparmar/Au9tc/4812

    OriginalL'auteur user1844933

  3. 1

    En jQuery

    $('#savebutton').click(function() {
    var id = $('#link').data('id');
    //if for some reason, the code above doesn't work,
    //$('#link').attr('data-id');
    console.log(id);
});

    Edit:

    Regardant votre jsfiddle

    $('#link').click(function() {
    //we want to copy the 'id' from the button to the modal
    var target = $(this).attr('target');
    var id = $(this).data('id');

    $(target).data('id', id);
});

$('#savebutton').click(function() {
    //now we grab it from the modal
    var id = $('#addBookDialog').data('id');

    console.log(id);
});
    Merci mais ça ne fonctionne pas. Merci de dire ce que je fais mal? Voici le jsfiddle - jsfiddle.net/Au9tc/4776
    j'ai juste regardé dans votre jsfiddle de nouveau, j'ai réalisé que sur votre "type de charge" jsfiddle option doit être "onLoad"... même avec mon ancien code, il doit travailler.
    Désolé. Je ne suis pas bien familiarisés avec Bootstrap auxiliaires modaux. J'ai essayé d'utiliser au-dessus de la solution mais ça ne fonctionne pas pour moi, quand j'ai plusieurs modale de l'ouverture des liens avec le même id qui est mon cas. Peut-être j'ai fait quelque chose de mal. Pouvez vous s'il vous plaît vérifier cette mise à jour jsfiddle - jsfiddle.net/gauravparmar/Au9tc/4792
    vous ne pouvez pas avoir plusieurs élément avec le même Id dans votre violon. Dans le javascript option de liste déroulante, j'ai changé le type de charge à "onLoad" donc mon script va s'exécuter. Voici le nouveau violon. jsfiddle.net/Au9tc/4793
    En fait, j'ai plusieurs généré dynamiquement "Annuler" des boutons pour ouvrir le modal et je veux obtenir le data-id du bouton en cliquant sur le bouton "Oui" à l'intérieur du modal. Voici la mise à jour de jsfiddle si vous pouviez s'il vous plaît aidez - jsfiddle.net/gauravparmar/Au9tc/4812

    OriginalL'auteur Craftein