Senden Sie die Bestätigung über Bootstrap Modal

Question 1

Ich wollte eine Modalbestätigung senden, aber ich habe es nicht richtig gemacht.

Hier ist mein JS:

function warning(){

      $('#ModalSubmitCart').modal('show');
      var yes = document.getElementById('confirm').value;

      if (yes == 'yes') {
      return true; 
      } 
      else {
      return false;
      } 
}

Teil meines Modals:

<div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button type="submit" class="btn btn-primary" id="confirm" value="yes">Yes</button>
</div>

Meine Form

<form onSubmit="return warning()" method="POST" action="submitcart.php">

Ich wollte so etwas wie bestätigen () haben, aber in modaler Form.

javascript jquery twitter-bootstrap

3

Aaron Alfonso 12 Aug. 2015 im 11:26

Answer

Es gibt keine direkten Rückruffunktionen für den Bootstrap modal.

Ich habe hier einen kleinen Hack gemacht.

Was ich getan habe:

Den beiden Schaltflächen des Modals wurde eine Klasse hinzugefügt.
Hängte einen Klick-Rückruf-Handler für die Schaltflächen an und überprüfe anhand der text der Schaltfläche, ob eine close Schaltfläche oder eine yes Schaltfläche ist.

JS-Code:

$(function () {
  $('#show').on('click', function () {
    console.log('clicked');
    warning();
  });

  $('.buttons').on('click', function () {
    var yes = $(this).text();
    if (yes === 'Yes') {
        console.log('yes');
        //return true;
    } else {
        console.log('close');
        //return false;
    }
 });
});

function warning() {
   $('#ModalSubmitCart').modal('show', function (data) {
      console.log('data:' + data);
   });
}

Live-Demo @ JSFiddle: http://jsfiddle.net/dreamweiver/wccqyzej/

1

dreamweiver 12 Aug. 2015 im 09:10

Answer

Sie können Ihr Modal in ein FORM einwickeln und dabei eine Senden-Schaltfläche verwenden.

<form action="/echo/html/" method="POST" name="modalForm" id="modalForm">
  <!-- 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 panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

Und verwenden Sie jQuery, um das Ereignis submit abzufangen.

$('#modalForm').on('submit', function(e){
    if (!confirm('are you sure?'))
    {
        e.preventDefault();
        return false;
    }
});

Sie können sehen, wie es in dieser Geige funktioniert.

1

LeftyX 12 Aug. 2015 im 09:31

Answer

Ich denke, Sie sollten auf diese Weise Ihren JQuery-Code verwenden

function warning(){

    $('#ModalSubmitCart').modal('show');
    var yes = $('#confirm').attr("value");

    if (yes == 'yes') {
        return true; 
    } 
    else {
        return false;
    } 
}

0

Maximilian Ast 12 Aug. 2015 im 09:13

Question 2