Holen Sie sich den Wert von Bootstrap.modal

ich dieses Bootstrap modal haben:Holen Sie sich den Wert von Bootstrap.modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="form-group"> 
         <label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label> 
         <input type="text" class="form-control" id="recipient-name"> 
        </div> 
        <div class="form-group"> 
         <label for="message-text" class="form-control-label">Max #pics per cluster:</label> 
         <input type="text" class="form-control" id="message-text"> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal"> 
        Close 
       </button> 
       <button id="paramsOkay" type="button" class="btn btn-primary"> 
        Okay 
       </button> 
      </div> 
     </div> 
    </div> 
</div>

und ich dies tue:

$('#exampleModal').on('click','#paramsOkay', function (e) { 
    console.log($('#recipient-name').text()); 
    console.log(e); 
});

, die ausgelöst wird, wenn die "Okay" Schaltfläche geklickt wird, aber die zuerst console.log() ist leer, und ich würde erwarten, Benutzereingaben zu erhalten! Die zweite Konsole wird das Ereignis protokollieren, aber ich lese jetzt nicht wirklich, wie die Benutzereingabe daraus extrahiert wird.

Wie erhält man den Wert, den der Benutzer eingegeben hat, nachdem der "Okay" -Wert geklickt wurde?

Quelle

2016-09-04 gsamaras

Sie müssen val() keine text() verwenden.

Wechsel:

console.log($('#recipient-name').text());

An:

console.log($('#recipient-name').val());

Schlusscode:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    
 
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form> 
 
        <div class="form-group"> 
 
         <label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label> 
 
         <input type="text" class="form-control" id="recipient-name" value="Test"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="message-text" class="form-control-label">Max #pics per cluster:</label> 
 
         <input type="text" class="form-control" id="message-text"> 
 
        </div> 
 
       </form> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal"> 
 
        Close 
 
       </button> 
 
       <button id="paramsOkay" type="button" class="btn btn-primary"> 
 
        Okay 
 
       </button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    
 
    <script> 
 
     
 
    $(document).ready(function(){ 
 

 
     $('#exampleModal').on('click','#paramsOkay', function (e) { 
 
      console.log($('#recipient-name').val()); 
 
    //console.log(e); 
 
}); 
 

 
    }) 
 
    </script> 
 
     
 
    </body> 
 
</html>

Quelle

2016-09-04 05:41:28 Ehsan

Oh mein Gott! Ich schwöre, ich habe es auch mit 'val()' versucht, aber ich konnte es nicht funktionieren lassen, aber wenn ich deinen Code kopierte, funktionierte es, wahrscheinlich etwas albernes von mir! Vielen Dank! – gsamaras

Holen Sie sich den Wert von Bootstrap.modal

Antwort

Verwandte Themen