Submit Return False, aber immer noch Formular einreichen - PHP, Javascript, AJAX, CodeIgniter

Question

Dies wird wahrscheinlich rückwärts klingen. Ich brauche für ein Formular die Rückgabe false, sende aber trotzdem das Formular ein.

Ich habe ein Formular über Ajax in eine Seite gezogen (jquery load function), und am submit würde ich gerne eine Grafik und etwas Text im selben div anzeigen, anstatt die Seite umzuleiten.

Dies ist meine Submit-Button (codeigniter):

<?php $attributes = array('class' => 'button', 'onclick' => 'form_success_client(); return false;', 'name' => 'submit'); echo form_submit($attributes, 'Save'); ?> 

und in html:

<input type="submit" onclick="form_success(); return false;" class="button" value="Save" name="submit"> 

und die JavaScript-Funktion, die die Erfolgsmeldung lädt:

function form_success_client() { // form success 
    $('.contentarea').load("/mm/index.php/site/form_success_client/"); 
} 

, dass alle funktioniert gut, aber es ist nicht überraschend, dass es das Formular nicht einreicht. Ich weiß, dass der richtige Weg, dies zu tun, darin besteht, die Formularübergabe an jQuery zu übergeben, aber ich bin mir nicht sicher, wie ich das machen soll. Könnte mit einer schnellen Lösung wenn möglich tun (bis ich Zeit habe, eine bessere Lösung zu sortieren), aber alle Vorschläge geschätzt.

Danke!

ANTWORT:

Dies ist, was für mich gearbeitet, nur eine leichte Bearbeitung von Maggies Antwort:

function form_success_client(obj) { 
    $.ajax({ 
     type: 'POST', 
     url: $(obj).attr('action'), 
     data: $(obj).serialize(), 
     success: function(msg){ 
     $('.contentarea').load("/mm/index.php/site/form_success_client/"); 
     } 
    }); 
    return false; 
} 

Beachten Sie die $() Umwickeln obj auf URL und Daten.

Answer 1

binden Sie Ihr JS onclick-event an das Formular (nicht an die Schaltfläche) wie folgt 'onclick' => 'form_success_client(this); return false;'

und ändern Sie Ihre Funktion

function form_success_client(obj) { 
    $.ajax({ 
     type: "POST", 
     url: obj.attr("action"), 
     data: obj.serialize(), 
     success: function(msg){ 
     $('.contentarea').load("/mm/index.php/site/form_success_client/"); 
     } 
    }); 
} 

ungetestet

Answer 2

können Sie jquery verwenden .post, .get oder

basierend auf SUCCESS oder zurückgegebenen Daten Schnipsel können Sie das Formular abschicken

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

http://api.jquery.com/jQuery.ajax/

Answer 3

Mögliche Lösung. Ich bleibe an Ihrem Code

<input type="submit" onclick="form_success_client(this); return false;" class="button" value="Save" name="submit"> 

function form_success_client(i) { 
    formData = $(i).parents('form').serialize(); 
    $.post("/mm/index.php/site/form_success_client/", formData, function(loaded) { $('.contentarea').append(loaded) }, 'html'); 
} 

EDIT: Und ja, wie maggie sagte, sollten Sie form_success_client(this); return false; wie die

<form onsubmit="form_success_client(this); return false;"> 

binden nicht an die Taste