wake-up-neo.com

Formular senden jQuery funktioniert nicht

Ich habe diese Form

<form action="deletprofil.php" id="form_id" method="post">
            <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
                <button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
                <button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
            </div>
        </form> 

und das Popup von jQuery Mobile

<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">
    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
        <div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
            <h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">Sicher dass Sie das Profil löschen wollen?</h3>
            <p>Es kann nicht mehr rückgängig gemacht werden.</p>
            <a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>
            <a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
        </div>
    </div>
  </div>

mit meinem jQuery-Code

<script language="javascript" type="text/javascript">
$(function(){
    $('#form_id').bind('submit', function(evt){
        $form = this;
        evt.preventDefault();
        $("#popupDialog").popup('open');
        $("#NOlink").bind( "click", function() {
            $("#popupDialog").popup('close');
        });
        $("#OKlink").bind( "click", function() {              
            $("#popupDialog").popup('close');   
            $( "#form_id" ).submit();         
        });         
    });
});    
    </script>

Das Popup-Fenster wird angezeigt, aber das Formular senden funktioniert nicht. Hat jemand Ideen?

44
Phil

Der NUMMER ONE-Fehler besteht darin, dass ALLES mit submit als ID oder NAME in Ihrem Formular enthalten ist.

Benennen Sie Ihre Formularelemente um , andernfalls können Sie .submit() nicht im Formular aufrufen, da die übergebende Methode/der Handler durch das name/id-Attribut gespiegelt wird.


Einige andere Dinge:

Wie bereits erwähnt, müssen Sie das Formular mit einem einfacheren Ereignis als jQuery absenden

ABER Sie müssen auch die Klicks auf die Links abbrechen

Warum hast du übrigens zwei Knöpfe? Da Sie jQuery zum Senden des Formulars verwenden, wissen Sie nie, auf welche der beiden Schaltflächen geklickt wurde, wenn Sie beim Klicken kein ausgeblendetes Feld festlegen.

<form action="deletprofil.php" id="form_id" method="post">
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });

    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});    

Nach Ihren Kommentaren zu urteilen, möchten Sie dies wirklich tun:

<form action="deletprofil.php" id="form_id" method="post">
  <input type="hidden" id="whichdelete" name="whichdelete" value="" />
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          // trigger the submit event, not the event handler
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });
    $(".delete").on("click", function(e) {
        $("#whichdelete").val(this.value);
    });
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});  
121
mplungjan

Wenn Sie $( "#form_id" ).submit(); aufrufen, wird der externe Übergabehandler ausgelöst, der die Standardaktion verhindert, stattdessen zu verwenden

$( "#form_id" )[0].submit();       

oder

$form.submit();//declare `$form as a local variable by using var $form = this;

Wenn Sie die Übergabemethode des dom-Elements programmgesteuert aufrufen, werden die an das Element angehängten Übergabehandler nicht ausgelöst

41
Arun P Johny

Согласно http://api.jquery.com/submit/

Событие submit отправляется элементу, когда пользователь пытается отправить форму. Он может быть прикреплен только к элементам. Формы могут быть отправлены либо нажатием явного <input type="submit">, <input type="image"> или <button type="submit">, либо нажавEnterкогда определенные элементы формы имеют фокус.

В общем, .submit является обязательной функцией, для отправки формы вы можете использовать исполь

document.formName.submit().
7
BrownEyes

Da jedes Steuerelement mit seinem Namen im Formularelement referenziert wird ( siehe Formularangaben ), überschreiben Steuerelemente mit dem Namen "submit" die eingebaute Submit-Funktion.

Was zu dem in den obigen Kommentaren genannten Fehler führt:

Uncught TypeError: Die Eigenschaft 'submit' des Objekts #<HTMLFormElement> ist keine Funktion

Wie in der akzeptierten Antwort oben, wäre die einfachste Lösung, den Namen dieses Steuerelements zu ändern.

Eine andere Lösung könnte jedoch die Verwendung der dispatchEvent-Methode für das Formularelement sein:

$("#form_id")[0].dispatchEvent(new Event('submit')); 
0
Benni

Vergessen Sie nicht, Ihr Formular mit einem </form> zu schließen. Das hörte auf, submit () für mich zu arbeiten.

0
Antony

Okay, das trifft nicht auf die genaue Situation der OP zu, aber für jeden, der wie ich hier ist, der mit einem ähnlichen Problem konfrontiert wird, sollte ich sagen, ich sollte das hier rausschmeißen - vielleicht ein paar Kopfschmerzen. 

Wenn Sie eine nicht standardmäßige "Schaltfläche" verwenden, um sicherzustellen, dass das Ereignis submit nicht aufgerufen wird:

<form>
  <input type="hidden" name="hide" value="1">
  <a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

Wenn Sie dann versuchen, auf this.form im Skript zuzugreifen, wird es undefiniert angezeigt.

Stattdessen können Sie eine button mit type="button" verwenden.

<form>
  <input type="hidden" name="hide" value="1">
  <button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

(Ich habe das noch nicht in allen Browsern getestet, daher muss mich jemand anrufen.)

0
DevBodin

wenn in der Submit-Funktion ein Fehler auftritt, wird die Submit-Funktion ausgeführt. In anderen Sätzen verhindern, dass default (oder return false) nicht funktioniert, wenn ein Fehler in der Übergabefunktion vorhanden ist.

0
Ali Rasouli

Wenn Sie eine Formularprüfung durchführen, z

type="submit" onsubmit="return validateForm(this)"

validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company")  {
        $('input#company').val("Company").css('color','red'); finalReturn = false; 
        $('input#company').on('mouseover',(function() { 
            $('input#company').val("").css('color','black'); 
            $('input#company').off('mouseover');
            finalReturn = true; 
        }));
    } 

    return finalReturn; 
}

Überprüfen Sie nochmals, ob Sie wahr sind. Das scheint einfach zu sein, aber ich hatte

var finalReturn = false;

Wenn das Formular korrekt war, wurde es nicht von validateForm korrigiert und daher nicht als finalReturn übermittelt, sondern wurde immer mit false anstelle von true initialisiert. Der obige Code funktioniert übrigens gut mit Adresse, Stadt, Bundesstaat und so weiter.