ilch Forum » Allgemein » HTML, PHP, SQL,... » Jquery submit nach preventDefault()

Geschlossen
  1. Do. 17.11.2016 17:19 Uhr #1
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Hallo zusammen,

    ich unterbinde das Abschicken eines Formulares in Javascript per preventDefault(), um vorher die einzelnen Eingaben per php ($.ajax) genauer zu prüfen.
    Leider kann ich im späteren Verlauf das Formular bei gegebenen Umständen nicht mehr submitten, warum auch immer.
    Hat eventuell jemand ne Lösung für mein Problem?
    Ich poste mal den Javascript-Teil, hilft eventuell dem Einen oder Anderen... 
    $("newconvform").submit(function(e) {
    
        var conv_member_input = $('#convmemberinput');
        var conv_title_input  = $('#convtitleinput');
        var conv_text_input   = $('#NewConvTE');
        
        e.preventDefault();

        
        $.ajax({
            url         : 'index.php?conversation-checknewconv',
            type        : 'POST',
            dataType    : 'json',
            data        : newconvform.serialize(),
            success     : function(response) {
                console.log(response);
                if (response.success) {
                    newconvform.trigger('submit');
                } else {
                    $('.innerErrorName').remove();
                    
                    var err_msg_empty = '<small class="innerErrorName">Bitte füllen Sie dieses Eingabefeld aus.</small>';
                    
                    // kein Titel
                    if (response.errEmptyTitle) {
                        conv_title_input.removeClass('successClass');
                        conv_title_input.addClass('errorClass');
                        conv_title_input.after(err_msg_empty);
                    } else {
                        conv_title_input.removeClass('errorClass');
                        conv_title_input.addClass('successClass');
                    }
                    
                    // kein Text
                    if (response.errEmptyText) {
                        conv_text_input.removeClass('successClass');
                        conv_text_input.addClass('errorClass');
                        conv_text_input.after(err_msg_empty);
                    } else {
                        conv_text_input.removeClass('errorClass');
                        conv_text_input.addClass('successClass');
                    }
                    
                    // kein Teilnehmer
                    if (response.errEmptyName) {
                        conv_member_input.removeClass('successClass');
                        conv_member_input.addClass('errorClass');
                        conv_member_input.after(err_msg_empty);
                    } else {
                        //
                        if (response.notfoundMember != '') {
                            var err_msg_not_found = '<small class="innerErrorName">' + response.notfoundMember + '</small>';
                            conv_member_input.after(err_msg_not_found);
                        } else {
                            conv_member_input.removeClass('errorClass');
                            conv_member_input.addClass('successClass');
                        }
                    }
                }
            }
        });
    });

    Verschiebe ich das e.preventDefault(); in den else-Zweig von response.success, wird trotzdem submittet.

    verwendete ilch Version: 1.1 P


    Zuletzt modifiziert von Outi77 am 17.11.2016 - 17:21:26
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  2. Do. 17.11.2016 17:55 Uhr #2
    User Pic
    blakedj06 gelöschter User
    In die Submit Function ein return false; vor der letzten });

    Und das e.preventDefault(); löschen
    0 Mitglieder finden den Beitrag gut.
  3. Do. 17.11.2016 18:07 Uhr #3
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Hi blakedj06,

    danke zunächst mal für Deine Antwort.
    Vielleicht habe ich mich etwas ungünstig ausgedrückt.
    Die Form soll schon submittet werden, aber nur, wenn ganz bestimmte Kriterien erfüllt sind.
    das ganze sieht so aus:
    gesperrtes Bild
    Die 3 inputs bzw deren Inhalt wird in php geprüft, dort erfolgt dann ein json-Response. Nur wenn alle 3 Felder ausgefüllt sind und im Feld Teilnehmer kein Fehler vorliegt (nicht gefundener User o.ä.), soll submittet werden.
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  4. Do. 17.11.2016 18:18 Uhr #4
    User Pic
    blakedj06 gelöschter User
    Also mit Submit meinst Du den Ajax Submit? Dacht dir geht es darum den normalen Form Submit zu unterbinden.

    Also es gibt da jetzt mehrere Ansätze wie ich es machen würde. Fakt ist er submited ja schon. Brauchst Du das Ajax nur zum check? Oder soll es auch per Ajax in die Datenbank gespeichert werden?
    0 Mitglieder finden den Beitrag gut.
  5. Do. 17.11.2016 18:25 Uhr #5
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Also das ajax ist nur für den Check, das Eintragen in die DB sollte dann eigentlich übers Submit der Form passieren.
    Ich poste mal noch den php-Teil aus dem ajax: 
    case 'checknewconv':
            $success = $err_empty_Title = $err_empty_Text = $err_empty_Name = false;
            
            $not_found_txt = '';
            
            $name  = escape($_POST['name'], 'string');
            $title = escape($_POST['title'], 'string');
            $text  = escape($_POST['txt'], 'textarea');
            
            # Betreff leer
            if (empty($title)) {
                $err_empty_Title = true;
            }
            
            # Textfeld leer
            if (empty($text)) {
                $err_empty_Text = true;
            }
            
            # Teilnehmer leer
            if (empty($name)) {
                $err_empty_Name = true;
            } else {
                # Teilnehmer nicht leer, aber Teilnehmer nicht gefunden (einen oder mehrere)
                $names_new_conv = explode(',', $name);
                if (!is_array($names_new_conv)) $names_new_conv = array();
                $count_new_conv = count($names_new_conv);
                if ($count_new_conv > 1) {
                    $new_conv_namessql = array();
                    for($i = 0; $i < $count_new_conv; $i++){
                        $name = trim($names_new_conv[$i]);
                        $names_new_conv[$i] = $name;
                        $new_conv_namessql[] = "'{$name}'";
                    }
                    $new_conv_userids = array();
                    
                    $qry = db_query("SELECT id, name FROM prefix_user WHERE name IN (".implode(', ', $new_conv_namessql).")");
                    while ($r = db_fetch_assoc($qry)){
                        $userids[$r['id']] = $r['name'];
                        $usersfound[] = $r['name'];
                    }
                    
                    $countids = count($userids);
                    if ($countids) {
                        if ($count_new_conv != $countids) {
                            $notfound = array_diff($names_new_conv, $usersfound);
                            $not_found_txt = 'Folgende Namen konnten nicht gefunden werden: '.implode(', ', $notfound).'.';
                        }
                    }
                    
                } elseif (1 == db_result(db_query("SELECT count(*) FROM prefix_user WHERE name = BINARY '" . $name . "'"), 0)) {
                    $userids = array();
                    $empf_id = db_result(db_query("SELECT id FROM prefix_user WHERE name = BINARY '" . $name . "'"), 0);
                    $userids[$empf_id] = $name;
                } else {
                    $not_found_txt = 'Folgender Name konnte nicht gefunden werden: '.$name.'.';
                }
                
                # Mein Name in Teilnehmer-Feld
                if (in_array($_SESSION['authname'], $names_new_conv)) {
                    $not_found_txt .= ' Sie sind bereits Teilnehmer der Unterhaltung.';
                }
            }
            
            if ($err_empty_Title == false AND $err_empty_Text == false AND $err_empty_Name == false AND $not_found_txt == '') {
                $success = true;
            }
            
            $response = array (
                'success'           => $success,
                'errEmptyTitle'     => $err_empty_Title,
                'errEmptyText'      => $err_empty_Text,
                'errEmptyName'      => $err_empty_Name,
                'notfoundMember'    => $not_found_txt
            );
            echo json_encode($response);
            break;

    Die ganzen empty's könnte man auch im Javascript prüfen, beim Feld Teilnehmer wird's eher schwierig, das mit js zu lösen.


    Zuletzt modifiziert von Outi77 am 17.11.2016 - 18:26:59
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  6. Do. 17.11.2016 18:25 Uhr #6
    User Pic
    blakedj06 gelöschter User
    Also wenn ich das richtig verstehe dann mach es mal so. Der Trigger submit ist sinnlos da du ihn ja schon mit der function triggerst. 

            $("newconvform").submit(function () {

            var conv_member_input = $('#convmemberinput');
            var conv_title_input  = $('#convtitleinput');
            var conv_text_input   = $('#NewConvTE');

            $.ajax({
                url      : 'index.php?conversation-checknewconv',
                type     : 'POST',
                dataType : 'json',
                data     : newconvform.serialize(),
                success  : function (response) {
                    console.log(response);
                    if (response.success) {
                        return true;
                    } else {
                        $('.innerErrorName').remove();

                        var err_msg_empty = '<small class="innerErrorName">Bitte füllen Sie dieses Eingabefeld aus.</small>';

                        // kein Titel
                        if (response.errEmptyTitle) {
                            conv_title_input.removeClass('successClass');
                            conv_title_input.addClass('errorClass');
                            conv_title_input.after(err_msg_empty);
                        } else {
                            conv_title_input.removeClass('errorClass');
                            conv_title_input.addClass('successClass');
                        }

                        // kein Text
                        if (response.errEmptyText) {
                            conv_text_input.removeClass('successClass');
                            conv_text_input.addClass('errorClass');
                            conv_text_input.after(err_msg_empty);
                        } else {
                            conv_text_input.removeClass('errorClass');
                            conv_text_input.addClass('successClass');
                        }

                        // kein Teilnehmer
                        if (response.errEmptyName) {
                            conv_member_input.removeClass('successClass');
                            conv_member_input.addClass('errorClass');
                            conv_member_input.after(err_msg_empty);
                        } else {
                            //
                            if (response.notfoundMember != '') {
                                var err_msg_not_found = '<small class="innerErrorName">' + response.notfoundMember + '</small>';
                                conv_member_input.after(err_msg_not_found);
                            } else {
                                conv_member_input.removeClass('errorClass');
                                conv_member_input.addClass('successClass');
                            }
                        }
                        return false;
                    }
                }
            });
return false;
        });



    Zuletzt modifiziert von blakedj06 am 17.11.2016 - 18:26:53
    0 Mitglieder finden den Beitrag gut.
  7. Do. 17.11.2016 18:37 Uhr #7
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    1 zu 1 kopiert, aber es wird leider nicht abgeschickt, wenn alles ok ist.
    Hier mal die Ausgabe im Firebug:
    gesperrtes Bild
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  8. Do. 17.11.2016 18:45 Uhr #8
    User Pic
    blakedj06 gelöschter User
    Hast eine PM.
    0 Mitglieder finden den Beitrag gut.
  9. Do. 17.11.2016 19:17 Uhr #9
    User Pic
    blakedj06 gelöschter User
    So hab es nun. 


    var a;
        $("newconvform").submit(function () {
 
            var conv_member_input = $('#convmemberinput');
            var conv_title_input  = $('#convtitleinput');
            var conv_text_input   = $('#NewConvTE');
 
            $.ajax({
                url      : 'index.php?conversation-checknewconv',
                type     : 'POST',
                dataType : 'json',
                data     : newconvform.serialize(),
                success  : function (response) {
                    console.log(response);
                    if (response.success) {
                      a = 1;
                    } else {
                        $('.innerErrorName').remove();
 
                        var err_msg_empty = '<small class="innerErrorName">Bitte füllen Sie dieses Eingabefeld aus.</small>';
 
                        // kein Titel
                        if (response.errEmptyTitle) {
                            conv_title_input.removeClass('successClass');
                            conv_title_input.addClass('errorClass');
                            conv_title_input.after(err_msg_empty);
                        } else {
                            conv_title_input.removeClass('errorClass');
                            conv_title_input.addClass('successClass');
                        }
 
                        // kein Text
                        if (response.errEmptyText) {
                            conv_text_input.removeClass('successClass');
                            conv_text_input.addClass('errorClass');
                            conv_text_input.after(err_msg_empty);
                        } else {
                            conv_text_input.removeClass('errorClass');
                            conv_text_input.addClass('successClass');
                        }
 
                        // kein Teilnehmer
                        if (response.errEmptyName) {
                            conv_member_input.removeClass('successClass');
                            conv_member_input.addClass('errorClass');
                            conv_member_input.after(err_msg_empty);
                        } else {
                            //
                            if (response.notfoundMember != '') {
                                var err_msg_not_found = '<small class="innerErrorName">' + response.notfoundMember + '</small>';
                                conv_member_input.after(err_msg_not_found);
                            } else {
                                conv_member_input.removeClass('errorClass');
                                conv_member_input.addClass('successClass');
                            }
                        }
                        a = 0;
                    }
                }
            });
    return a == 1;
        });
    1 Mitglieder finden den Beitrag gut.
  10. Do. 17.11.2016 19:22 Uhr #10
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Jawoll, sieht gut aus. Hat im ersten Test zumindest schon mal richtig funktioniert.
    Danke für Deine Hilfe, echt sauber Yes
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    1 Mitglieder finden den Beitrag gut.
  11. Do. 17.11.2016 19:27 Uhr #11
    User Pic
    blakedj06 gelöschter User
    Sollte wohl auch im 2ten funktionieren. ^^ Ja manchmal denkt man viel zu kompliziert. Eigentlich ne simple Lösung hätte ich schon beim ersten Beitrag von mir drauf kommen können. lächeln
    0 Mitglieder finden den Beitrag gut.
  12. Do. 17.11.2016 20:01 Uhr #12
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    OK etwas zu früh gefreut. Ich muss jetzt immer 2 mal auf Absenden klicken, damit das Formular abgeschickt wird.
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  13. Do. 17.11.2016 20:30 Uhr #13
    User Pic
    blakedj06 gelöschter User
    Ja nun sollte es aber funktionieren man o man ^^ 

            $('[name=reply]').click(function () {
  
            var conv_member_input = $('#convmemberinput');
            var conv_title_input  = $('#convtitleinput');
            var conv_text_input   = $('#NewConvTE');
  
            $.ajax({
                url      : 'index.php?conversation-checknewconv',
                type     : 'POST',
                dataType : 'json',
                data     : newconvform.serialize(),
                success  : function (response) {
                    console.log(response);
                    if (response.success) {
                $("newconvform").submit();
                    } else {
                        $('.innerErrorName').remove();
  
                        var err_msg_empty = '<small class="innerErrorName">Bitte füllen Sie dieses Eingabefeld aus.</small>';
  
                        // kein Titel
                        if (response.errEmptyTitle) {
                            conv_title_input.removeClass('successClass');
                            conv_title_input.addClass('errorClass');
                            conv_title_input.after(err_msg_empty);
                        } else {
                            conv_title_input.removeClass('errorClass');
                            conv_title_input.addClass('successClass');
                        }
  
                        // kein Text
                        if (response.errEmptyText) {
                            conv_text_input.removeClass('successClass');
                            conv_text_input.addClass('errorClass');
                            conv_text_input.after(err_msg_empty);
                        } else {
                            conv_text_input.removeClass('errorClass');
                            conv_text_input.addClass('successClass');
                        }
  
                        // kein Teilnehmer
                        if (response.errEmptyName) {
                            conv_member_input.removeClass('successClass');
                            conv_member_input.addClass('errorClass');
                            conv_member_input.after(err_msg_empty);
                        } else {
                            //
                            if (response.notfoundMember != '') {
                                var err_msg_not_found = '<small class="innerErrorName">' + response.notfoundMember + '</small>';
                                conv_member_input.after(err_msg_not_found);
                            } else {
                                conv_member_input.removeClass('errorClass');
                                conv_member_input.addClass('successClass');
                            }
                        }
                 
                    }
                }
            });
    return false;
        });


    Reply ist der name deines Submitbutton


    Zuletzt modifiziert von blakedj06 am 17.11.2016 - 20:31:58
    0 Mitglieder finden den Beitrag gut.
  14. Do. 17.11.2016 21:11 Uhr #14
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Nö immer noch nicht, jetzt wird wieder das Formular nicht abgeschickt ^^
    Ich hab mal in Zeile 15 das 
    $("newconvform").submit();
    geändert in 
    newconvform.submit();
    .
    Das Einzige, was passiert, ist dass die Seite neu läd, und das Formular wieder leer angezeigt wird.


    Zuletzt modifiziert von Outi77 am 17.11.2016 - 21:16:55
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  15. Do. 17.11.2016 21:41 Uhr #15
    User Pic
    blakedj06 gelöschter User
    Ja hast PM ich muss mir das mal genauer anschauen. Weil bei meinem Test funktioniert es ohne Probleme. Kann jetzt nur noch an einer Kleinigkeit liegen.

    EDIT:

    Ersetze mal das newconvform.submit() mit

    newconvform.attr('action', "index.php?conversation-new").submit();


    Zuletzt modifiziert von blakedj06 am 17.11.2016 - 21:50:34
    0 Mitglieder finden den Beitrag gut.
  16. Fr. 18.11.2016 09:49 Uhr #16
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Also aktueller Stand ist, dass die Prüfungen der inputs und deren Fehler-Ausgabe funktionieren.
    Der Submit, wenn alle Felder ordnungsgemäß ausgefüllt sind, funktioniert nicht, es wird einfach die Seite neu geladen.
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  17. Fr. 18.11.2016 10:53 Uhr #17
    User Pic
    blakedj06 gelöschter User 
     var a = false;

        $('[name=reply]').on('click', function () {

            var conv_member_input = $('#convmemberinput');
            var conv_title_input  = $('#convtitleinput');
            var conv_text_input   = $('#NewConvTE');

            $.ajax({
                url      : 'index.php?conversation-checknewconv',
                type     : 'POST',
                dataType : 'json',
                data     : newconvform.serialize(),
                async    : false,
                success  : function (response) {
                    console.log(response);
                    if (response.success) {
                        a = true;
                        newconvform.submit();
                    } else {
                        $('.innerErrorName').remove();

                        var err_msg_empty = '<small class="innerErrorName">Bitte füllen Sie dieses Eingabefeld aus.</small>';

                        // kein Titel
                        if (response.errEmptyTitle) {
                            conv_title_input.removeClass('successClass');
                            conv_title_input.addClass('errorClass');
                            conv_title_input.after(err_msg_empty);
                        } else {
                            conv_title_input.removeClass('errorClass');
                            conv_title_input.addClass('successClass');
                        }

                        // kein Text
                        if (response.errEmptyText) {
                            conv_text_input.removeClass('successClass');
                            conv_text_input.addClass('errorClass');
                            conv_text_input.after(err_msg_empty);
                        } else {
                            conv_text_input.removeClass('errorClass');
                            conv_text_input.addClass('successClass');
                        }

                        // kein Teilnehmer
                        if (response.errEmptyName) {
                            conv_member_input.removeClass('successClass');
                            conv_member_input.addClass('errorClass');
                            conv_member_input.after(err_msg_empty);
                        } else {
                            //
                            if (response.notfoundMember != '') {
                                var err_msg_not_found = '<small class="innerErrorName">' + response.notfoundMember + '</small>';
                                conv_member_input.after(err_msg_not_found);
                            } else {
                                conv_member_input.removeClass('errorClass');
                                conv_member_input.addClass('successClass');
                            }
                        }

                    }
                }
            });
            return a;
        });


    So nun sollte es aber funktionieren.

    Achso und mach aus deinem input type="button" ein type="submit" sonst geht es nicht!


    Zuletzt modifiziert von blakedj06 am 18.11.2016 - 12:21:58
    0 Mitglieder finden den Beitrag gut.
  18. Fr. 18.11.2016 12:38 Uhr #18
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    So, endlich geschafft. Jetzt haut's hin, vielen Dank an Dich für Deine Hilfe Yes
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    1 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten