jQuery Bestätigungsdialog Modal - Formular kann nicht erfolgreich gesendet werden

Ich habe unten einen Beispielcodeblock, der aus einem einfachen Bootstrapformular besteht, wobei ich einen jqueryUI Modaldialog als Ersatz für das grundlegende Javascript Bestätigungsfenster verwende.jQuery Bestätigungsdialog Modal - Formular kann nicht erfolgreich gesendet werden

Wenn ich das Formular abschicke, indem ich auf den Submit-Button klicke, erscheint das jqueryUI-Modal-Fenster ohne Probleme.

Wenn;

ich auf "Nein" - ich alle 3 console.log Nachrichten heißt

1-Confirmation_In_Progress
4-Confirmation_Cancelled
5-Confirmation_Cancelled

Wenn;

I "Ja" klicken - ich alle 3 console.log Nachrichten also

1-Confirmation_In_Progress
2-Confirmation_AboutTo
3-Confirmation_Done

Deshalb schließe ich die jQuery-Code muss einigermaßen funktionieren, aber die Formularwerte scheinen nicht gepostet zu werden.

Ich habe verschiedene Methoden ausprobiert, um das Formular wie unten gezeigt einzureichen. Irgendeine Idee, was ist falsch mit meinem jQuery Formular Einreichung?

Der Formularcode ist unten;

<!DOCTYPE html> 
<html> 
<head> 

<title> Simple BootStrap Form - jQuery UI Modal Dialog as Confirmation Box </title> 
<meta charset="utf-8"> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans"            rel="stylesheet" type="text/css"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"    media="all" rel="stylesheet" type="text/css"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"    rel="stylesheet" type="text/css">  
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"         rel="stylesheet" type="text/css"> 


<!-- CSS --> 
<style> 

.customColor { background: darkturquoise; } 
.jqDialogAdjust { float: left; margin: 2px 2px 0 0; } 
.no-close .ui-dialog-titlebar-close { display: none } 

</style>  


</head> 
<!-- HTML --> 
<body> 

<div class="container"> 
<br><br> 
    <a href="<?php echo $_SERVER['PHP_SELF']; ?>"> HOME </a> 
<br><br> 

<?php 
if (isset($_POST['submit_btn'])) { 

    echo "<br>"."<br>"; 
    echo "Name :".$_POST['name']."<br>"; 
    echo "Email :".$_POST['email']."<br>"; 

} else { 

?> 

<form id="simpleform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" > 

<div class="form-group"> 
    <label for="name">Your Name:</label> 
    <input type="text" class="form-control" name="name" id="name"> 
</div> 
<div class="form-group"> 
    <label for="email">Your Email:</label> 
    <input type="email" class="form-control" name="email" id="email"> 
</div> 

<button type="submit" class="btn btn-default" name="submit_btn" id="submit_btn" value="submit_btn" >Submit</button> 

</form> 

<div id="confirmdialog" title="Confirmation Required"></div> 

<?php } ?> 
</div> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"             type="text/javascript"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"             type="text/javascript"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"       type="text/javascript"> </script>   

<script type="text/javascript" >  


    $(document).ready(function(){ 


     $("#submit_btn").click(function(event){ 

     console.log('1-Confirmation_In_Progress'); 

     event.preventDefault();  
     var $target = $(event.target);  
     var message = 'Proceed With Action?'; 
     var icon = '<span class="ui-icon ui-icon-alert jqDialogAdjust" ></span>'; 

     $('#confirmdialog').html('<p>' + icon + message + '</p>'); 

     $("#confirmdialog").dialog({ 
      autoOpen : false, 
      modal : true, 
      height: 170, 
      width: 340, 
      resizable: false, 
      draggable:false, 
      closeOnEscape: true, 
      title : " :: Confirmation Required :: ",    
      classes: { 
         "ui-dialog-titlebar": "ui-corner-all customColor"       
        }, 
      dialogClass: "no-close",   
      buttons: [{ 
         text : "Yes",       
         click : function() {          
            console.log('2-Confirmation_AboutTo'); 
            //die;         
           $target.closest("form").submit(); 
           //$('form#simpleform').submit(); 
            console.log('3-Confirmation_Done');       
           $(this).dialog("close");        
         }        
        },       
        { 
         text : "No", 
         click : function() { 
            console.log('4-Confirmation_Cancelled'); 
           $(this).dialog("close"); 
            console.log('5-Confirmation_Cancelled'); 
         } 
        }] 



     }); // end of confirmdialog.dialog 

    $('#confirmdialog').dialog('open');  

    }); // end of submit_btn.click(function(event)  

    }); // end jQuery Document Ready 

    </script> 
    </body> 
    </html>

Der obige Codeblock von beziehe, um verschiedene Schnipsel hier auf Stackoverflow zusammengestellt wurde, aber irgendwie einreichen ich kippe erhalten nur die Form. Wenn ich die jquery Linien entferne und ein grundlegendes Javascript bestätige Fenster verwende - übergibt das Formular richtig.

Quelle

2017-12-29 MarcoZen

Ich vermute '' (event.target) .closes() 'wählt das Formular nicht aus. Irgendwelche Fehler oder Warnungen in der Konsole? – Twisty

@ Twisty- ich auf "Ja" - ich alle 3 console.log Nachrichten also 1-Confirmation_In_Progress 2-Confirmation_AboutTo 3-Confirmation_Done – MarcoZen

@Twisty - Ersetzen der Javascript Bestätigung Feld (return confirm()) scheint recht Ärger in jQuery. Was benutzt du ? – MarcoZen

Wie in meinem Kommentar oben zu Benutzer Twisty erwähnt, sieht wie mein Problem war diese Linie;

Die Jquery-Formularübergabe enthält die Schaltflächennamen und -werte nicht im Post-Superglobal. Wenn Sie if entweder auf "Name" oder "E-Mail" ändern, können die Post-Werte angezeigt werden.

Alle diese Formulareinreichungen funktionieren, solange die if-Bedingung NICHT auf dem Namen/Wert der Schaltfläche basiert.

$target.closest("form").submit();          
$('form[name="simpleform"]').submit();          
$('form#simpleform').submit(); 
document.forms["simpleform"].submit(); 
document.getElementById("simpleform").submit() 
$('#simpleform').submit();

Danke.

Quelle

2018-01-02 16:35:17 MarcoZen

Ich habe eine Testgeige erstellt und versucht, das Problem zu replizieren. Ich könnte nicht. Am besten ist es, zuerst den Dialog und dann die Ereignisse zu definieren.

Beispiel: https://jsfiddle.net/Twisty/f0sa5nmL/

JavaScript

$(function() { 
    $("#confirmdialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    height: 170, 
    width: 340, 
    resizable: false, 
    draggable: false, 
    closeOnEscape: true, 
    classes: { 
     "ui-dialog-titlebar": "ui-corner-all customColor" 
    }, 
    dialogClass: "no-close", 
    buttons: [{ 
     text: "Yes", 
     click: function() { 
     console.log('2-Confirmation_AboutTo'); 
     $("#simpleform").submit(); 
     console.log('3-Confirmation_Done'); 
     $(this).dialog("close"); 
     } 
    }, { 
     text: "No", 
     click: function() { 
     console.log("4-Confirmation_Cancelled"); 
     $(this).dialog("close"); 
     console.log("5-Confirmation_Cancelled"); 
     } 
    }] 
    }); 

    $("#submit_btn").click(function(event) { 
    console.log("1-Confirmation_In_Progress"); 
    event.preventDefault(); 
    $("#confirmdialog").dialog("open"); 
    }); 
});

Wenn ich wählen Nein, erhalte ich:

1-Confirmation_In_Progress 
4-Confirmation_Cancelled 
5-Confirmation_Cancelled

Das Formular nicht und der Dialog geschlossen wird. Wenn ich Ja wählen, erhalte ich:

1-Confirmation_In_Progress 
2-Confirmation_AboutTo 
3-Confirmation_Done

Das Formular versucht dann einreichen (und nicht, da es nicht selbst in der Geige zu sich nehmen kann.).

Hoffe, dass hilft.

Quelle

2018-01-02 06:10:41 Twisty

Roger, dass @Twisty. Will weitermachen. – MarcoZen

jQuery Bestätigungsdialog Modal - Formular kann nicht erfolgreich gesendet werden

Antwort

Verwandte Themen