JQuery - Wie man ein Formular sendet und einen Anker ruft?

Ich habe ein Problem mit einem Formular - das Formular macht eine Überprüfung ohne Neuladen der Seite und Drucken auf dem Bildschirm den Fehler erst, nachdem ich auf die Schaltfläche Senden geklickt habe.JQuery - Wie man ein Formular sendet und einen Anker ruft?

Das Problem tritt auf, weil die Fehlermeldung nur über dem Formular angezeigt wird.

dann, wenn Sie kleine Geräte und kleine Bildschirme verwenden - die obere und die Schaltfläche senden wird nicht auf dem gleichen Bildschirm angezeigt.

Wenn das Formular einen Fehler enthält - und Sie auf senden klicken - Sie können die Nachricht nicht sehen und das Formular geht nirgendwohin.

für die korrekte dieses Ich brauche wieder auf den Bildschirm am oberen Rand des Formulars zu verlassen, nachdem die Taste

einreichen klicken Ich habe versucht, auf der Oberseite einen Anker-ID setzen, und erstellen Sie eine

<a href="#topform"><button type="submit"></a>

oder

<button type="submit" onclick="document.href:#topform">

aber das funktioniert nicht. irgendeine Idee?

Quelle

2016-08-07 DANIEL

so wollen Sie das Formular abzuschicken von Top-Anker-Taste. richtig ? – jaysingkar

Verschieben Sie die Nachricht vom oberen Rand des Formulars in die Nähe der Schaltfläche? Es scheint, als ob Sie versuchen, eine einfache UX-Änderung drastisch zu überarbeiten. – David

ohh .. benutzen Sie Validierungs-Plugin? – jaysingkar

Überprüfen Sie dieses Beispiel, das Sie oben auf Ihr Formular-ID-Element setzen können.

function toTop() { 
 
    
 
\t $('html, body').animate({scrollTop: $($('body')).offset().top}, 500, 'swing'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
<form id="contactForm" class="form-horizontal"> 
 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label">Full name</label> 
 
     <div class="col-xs-4"> 
 
      <input type="text" class="form-control" name="firstName" placeholder="First name" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <input type="text" class="form-control" name="lastName" placeholder="Last name" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label">Phone number</label> 
 
     <div class="col-xs-5"> 
 
      <input type="text" class="form-control" name="phoneNumber" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label">Email address</label> 
 
     <div class="col-xs-5"> 
 
      <input type="text" class="form-control" name="email" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label">Message</label> 
 
     <div class="col-xs-9"> 
 
      <textarea class="form-control" name="message" rows="7"></textarea> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label" id="captchaOperation"></label> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control" name="captcha" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <div class="col-xs-9 col-xs-offset-3"> 
 
      <button type="submit" class="btn btn-primary" onclick='toTop()'>Submit</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
    </body> 
 
    </html>

Machen Sie eine Funktion, die nach oben scrollen und als Anruf von Ihrem HTML-Schaltfläche Element Ich weiß nicht, ob Sie das Formular in der Haupt-Seite haben oder wo so haben Sie die überprüfen Element, aber das ist die Idee:

Javascript

function toTop() { 
    $('html, body').animate({scrollTop: $($('body')).offset().top}, 500, 'swing'); 
}

html

<button onclick="toTop()">Click me</button>

Prost !!!

Quelle

2016-08-07 13:49:41

Hi .. ja .. Ich teste hier und habe eine ähnliche "FAST" -Lösung mit folgendem Befehl: $ ("html, body"). Animate ({scrollTop: 0}, "swing"); - aber ich kann nicht den richtigen Anker angeben - damit gehe ich an die Spitze oder ich muss das richtige Pixel für Scrolltop konfigurieren .. und FÜR JEDE SCREEN-GRÖSSE .. (verrückt!) - Ich teste gerade deine neue Lösung! Tks !!! – DANIEL

@DANIEL ok :) du musst das pixel nicht anpassen nur ändere 'body' mit deiner form id. Als Ihr Validierungs-Plugin als einige Fehler-Antwort zum Beispiel Jquery Form Validierung als .on ('err.form.fv', Funktion (Ereignis) {}) gut nicht brauchen, um die Funktion über Senden Schaltfläche, sondern nur innerhalb der Fehlerfunktion aufrufen . –

hi Ich habe das gleiche mit Ihrer neuen Funktion .. das ursprüngliche Skript fehlte der "HTML-Körper" am Anfang rechts? Jetzt funktioniert es, aber - ich kann den Anker nicht konfigurieren .. Ich habe #anchor Körper ersetzen? – DANIEL

< a> und < taste> nicht gut mischen, niemals übereinander legen. Sie könnte die einfachere tun und nicht so elegante Lösung

<button type="submit" onclick="jQuery('#after_submit').click();"> 
<a id="after_submit" style="display:none;" href="#topform"></a>

oder das Richtige tun und für eine Scroll-Funktion gehen wie erwähnt mit animieren oben

Quelle

2016-08-07 14:31:05 Elentriel

großartige Lösung! Funktioniert gut! – DANIEL

JQuery - Wie man ein Formular sendet und einen Anker ruft?

Antwort

Verwandte Themen