jquery dialog als bestätigung für Eingabe

supercat1510 · 1. Januar 2011

Ich will das Jquery Dialog als eine Art Bestätigung verwenden.

Sprich man füllt ein Formular aus, klickt auf Senden, und dann kommt das Dialog Feld das fragt ob man wirklich speichern will.

Mit Klick auf OK soll das ganze dann gespeichert werden und auf eine andere Seite weiterleiten.

Allerdings verstehe ich bisher noch nicht ganz wie ich dem Button "OK" das zuweisen soll das er ein PHP-Script ausführt und dann weiterleitet.

[Edit:] Hab die eine Hälfte jetzt mit einem versteckten Formular gemacht das in dem Div für den Dialog eingeschlossen ist, jetzt brauch ich nur noch das absenden eines Formulars über den "OK" button.

Code:

	$('#dialog').dialog({
		buttons: {
			"Ok": function() {
				$(this).dialog("close");
			},
			"Cancel": function() {
				$(this).dialog("close");
			}
		}
	});

Quaese · 2. Januar 2011

Hi,

überwach das submit-Ereignis des Formulars, das gesendet werden soll. Tritt es ein, unterbindest du das Senden und blendest stattdessen den Dialog ein. Wird dort OK gedrückt, löst du das Absenden durch die submit-Methode aus.

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.custom.css">
<style type="text/css">
  <!--
#dialog{
  display: none;
}
 //-->
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('#form_id').bind('submit', function(evt){
    $form = this;
    evt.preventDefault();

    $("#dialog").dialog({
      buttons: {
        'OK': function(){
          $form.submit();
          $(this).dialog("close");
        },
        'Abbrechen': function(){
          $(this).dialog("close");
        }
      }
    });
  });
});
 //-->
</script>
</head>
<body>
<div id="dialog" title="Speichern">
  <p>Speichern?</p>
</div>

<form id="form_id" method="post" action="get_formdata.php">
  <input type="hidden" name="hiddenText" value="Versteckt">
  <input type="text" name="txtText" value="Sichtbar"><br>
  <input type="submit" value="senden">
</form>
</body>
</html>

Ciao
Quaese

supercat1510 · 2. Januar 2011

Habs jetzt mal eingebaut - Dialog wird schön geöffnet beim Klick auf Submit, aber beim Klick auf "OK" passiert nichts.

Edit: Nommal rumprobiert und jetzt gehts - musste iwie id und name aus dem submit rausnehmen.

jquery dialog als bestätigung für Eingabe

supercat1510

Erfahrenes Mitglied

Quaese

Moderator

supercat1510

Erfahrenes Mitglied

Neue Beiträge