JQuery AutoForm Skript Easy Form Autocomplete

Sind Sie es leid, Webformulare auszufüllen? Testen Sie jede Menge Webformulare und verlieren Sie immer wieder Ihre Standardwerte, da Sie Ihre Cookies löschen müssen? Nun, habe ich einen Vergnügen für Sie! Ich habe dieses JQuery -Skript namens JQuery AutoForm geschrieben und was es tut, ist einfach - es füllt automatisch Ihre Webformulare für Sie . Es funktioniert an allen Formularen, Anmeldeberationen, Registrierungsformularen, Kontaktformularen, im Grunde genommen ein browserbasiertes Formular. Gut für sich wiederholende Form -Tests, um Ihnen eine Menge Entwicklungszeit zu retten. Da die meisten Formulare unterschiedliche Namen wie "Name", "Fullname", "Vollname" usw. haben, kann es damit umgehen und für jede Art von Formularfeldern vollständig anpassbar.

Key Takeaways

• JQuery AutoForm-Skript bietet eine schnelle und anpassbare Lösung für automatische Füllen von Webformularen, unterstützt verschiedene Formularfelder und aktualisiert automatisch Datumsfelder auf dem aktuellen Datum.
• Das Skript kann einfach in Webprojekte integriert werden, sodass das schnelle Setup über ein Lesezeichen, das Benutzer klicken können, um Formulare auf einer beliebigen Seite automatisch zu füllen.
• Trotz seiner Vielseitigkeit unterstützt JQuery AutoForm keine in IFrames oder Popup -Fenster eingebetteten Formulare und funktioniert nur mit Feldern, die Attribute „Name“ haben.

jQuery AutoForm -Funktionen

• Schnell - Füllt Formulare in weniger als 1 Sekunde
• stabil - funktioniert auf jedem Browser
• zugänglich - kann in Form eines Browser -Lesezeichens für einfache Verwendung
ansehen
• Anpassbar - Sie können Eingänge mit einem beliebigen Namen/beliebigen Wert hinzufügen.
• intelligent - Daten laufen nicht ab, es wird das Datum automatisch bis zum aktuellen Datum bevölkert.

JQuery AutoForm Demo

Dies ist ein Formular mit einigen Standardfeldern.

Datum
Name
Adresse



E -Mail
Telefon
Nachricht

Newsletter


JQuery AutoForm
ausführen

Erstellen Sie Ihr eigenes Autoform

1. herunterladen jQuery4u.util.autoform.js
2. Passen Sie Ihren Namen, Ihre E -Mail und andere Formularfelder an
an
Bearbeiten Sie die Eingabefeldnamen so, dass sie bestimmte Formulare
4. übereinstimmen.
verschleiern (optional, aber schön)
Vorbereiten Sie "JavaScript:" in Ihren verschleierten Code und erstellen
6. Besuchen Sie ein Formular und klicken Sie einfach auf das Lesezeichen

jQuery autoform Full Skript

<span>(function($) {
</span> 
<span>;var JQUERY4U = {};
</span> 
<span>;JQUERY4U.UTIL =
</span><span>{
</span> 
    <span>name: 'JQUERY4U.UTIL',
</span> 
    <span>autoForm: function ()
</span>    <span>{
</span>        <span>/* field values fill forms */
</span>        <span>var formValues  = [];
</span>        formValues<span>['firstname'] = 'jQuery';
</span>        formValues<span>['middlename'] = '4u';
</span>        formValues<span>['lastname'] = 'Blog';
</span>        formValues<span>['mobile'] = '0416425699';
</span>        formValues<span>['email'] = 'email@domain.com';
</span>        formValues<span>['house'] = '123';
</span>        formValues<span>['street'] = 'Bank Street';
</span>        formValues<span>['city'] = 'Sunnybank';  
</span>        formValues<span>['country'] = 'Australia';
</span>        formValues<span>['postcode'] = '4109';
</span>        formValues<span>['message'] = 'This is the demo example of jQuery AutoForm.';
</span>        formValues<span>['emailnewsletter'] = true;
</span>     
        <span>/* field name mappings */
</span>        formValues<span>['newsletter'] = formValues['emailnewsletter'];
</span>        formValues<span>['housenumber'] = formValues['house'];
</span>        formValues<span>['name'] = formValues['firstname'] + ' ' + formValues['middlename'] + ' ' + formValues['lastname'];
</span>        formValues<span>['fullname'] = formValues['name'];
</span>        formValues<span>['phone'] = formValues['mobile'];
</span>        formValues<span>['suburb'] = formValues['city'];
</span>        formValues<span>['address1'] = formValues['housenumber'] + ' ' + formValues['street'];
</span>        formValues<span>['address2'] = formValues['suburb'];
</span>        formValues<span>['address3'] = formValues['country'] + ' ' + formValues['postcode'];
</span>        <span>/* enter more field mappings here */
</span>
        <span>/* date functions */
</span>        <span>function twodigits(digits) {
</span>            <span>return (digits > 9) ? digits : '0' + digits;
</span>        <span>}
</span>        <span>var fullDate = new Date();
</span>        <span>var twoDigitDays = twodigits(fullDate.getDate());
</span>        <span>var twoDigitMonth = twodigits(fullDate.getMonth() + 1);
</span>        <span>var date = twoDigitDays + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
</span>        fullDate<span>.setDate(fullDate.getDate()+7);
</span>        formValues<span>['date'] = date;  
</span>     
        <span>/*serialize every input field on page */
</span>        <span>var fields = $("input, select, textarea").serializeArray();
</span>     
        <span>/* init - special input type fixes */
</span>        <span>$('input[type=checkbox], input[type=radio]').attr('checked', true);
</span>     
        jQuery<span>.each(fields, function(i<span>, field</span>){
</span>            <span>/* check if field has a value in array */
</span>            <span>if (formValues[field.name] !== 'undefined') {
</span>                <span>$('input[name='+field.name+']').val(formValues[field.name]); /* generic inputs */
</span>                <span>$('textarea[name='+field.name+']').val(formValues[field.name]); /* textarea */
</span>                <span>$('select[name='+field.name+']').attr('selectedIndex', 1); /* select */
</span>                <span>$('input[name='+field.name+']').attr('checked', formValues[field.name]); /* checkbox/radio */
</span>            <span>}
</span>        <span>});
</span>    <span>}
</span><span>};
</span><span>JQUERY4U.UTIL.autoForm();
</span> 
<span>})(jQuery);</span>

JQuery AutoForm -Skript (Lesezeichen verschleierte Minimified Version)

Wenn Sie alle Anpassungen von automatisch besiedelten Feldnamen abgeschlossen haben, sollte Ihr endgültiges Skript so aussehen, wie der Code unten ist. Um dies in ein Lesezeichen zu konvertieren.

var _0xdd45=["x55x54x49x4C","x4Ax51x55x45x52x59x34x55x2Ex55x54x49x4C","x66x69x72x73x74x6Ex61x6Dx65","x6Ax51x75x65x72x79","x6Dx69x64x64x6Cx65x6Ex61x6Dx65","x34x75","x6Cx61x73x74x6Ex61x6Dx65","x42x6Cx6Fx67","x6Dx6Fx62x69x6Cx65","x30x34x31x36x34x32x35x36x39x39","x65x6Dx61x69x6C","x65x6Dx61x69x6Cx40x64x6Fx6Dx61x69x6Ex2Ex63x6Fx6D","x68x6Fx75x73x65","x31x32x33","x73x74x72x65x65x74","x42x61x6Ex6Bx20x53x74x72x65x65x74","x63x69x74x79","x53x75x6Ex6Ex79x62x61x6Ex6B","x63x6Fx75x6Ex74x72x79","x41x75x73x74x72x61x6Cx69x61","x70x6Fx73x74x63x6Fx64x65","x34x31x30x39","x6Dx65x73x73x61x67x65","x54x68x69x73x20x69x73x20x74x68x65x20x64x65x6Dx6Fx20x65x78x61x6Dx70x6Cx65x20x6Fx66x20x6Ax51x75x65x72x79x20x41x75x74x6Fx46x6Fx72x6Dx2E","x65x6Dx61x69x6Cx6Ex65x77x73x6Cx65x74x74x65x72","x6Ex65x77x73x6Cx65x74x74x65x72","x68x6Fx75x73x65x6Ex75x6Dx62x65x72","x6Ex61x6Dx65","x20","x66x75x6Cx6Cx6Ex61x6Dx65","x70x68x6Fx6Ex65","x73x75x62x75x72x62","x61x64x64x72x65x73x73x31","x61x64x64x72x65x73x73x32","x61x64x64x72x65x73x73x33","x30","x67x65x74x44x61x74x65","x67x65x74x4Dx6Fx6Ex74x68","x2F","x67x65x74x46x75x6Cx6Cx59x65x61x72","x73x65x74x44x61x74x65","x64x61x74x65","x73x65x72x69x61x6Cx69x7Ax65x41x72x72x61x79","x69x6Ex70x75x74x2Cx20x73x65x6Cx65x63x74x2Cx20x74x65x78x74x61x72x65x61","x63x68x65x63x6Bx65x64","x61x74x74x72","x69x6Ex70x75x74x5Bx74x79x70x65x3Dx63x68x65x63x6Bx62x6Fx78x5Dx2Cx20x69x6Ex70x75x74x5Bx74x79x70x65x3Dx72x61x64x69x6Fx5D","x75x6Ex64x65x66x69x6Ex65x64","x76x61x6C","x69x6Ex70x75x74x5Bx6Ex61x6Dx65x3D","x5D","x74x65x78x74x61x72x65x61x5Bx6Ex61x6Dx65x3D","x73x65x6Cx65x63x74x65x64x49x6Ex64x65x78","x73x65x6Cx65x63x74x5Bx6Ex61x6Dx65x3D","x65x61x63x68","x61x75x74x6Fx46x6Fx72x6D"];(function (_0x65dfx1){;;var _0x65dfx2={};;;_0x65dfx2[_0xdd45[0]]={name:_0xdd45[1],autoForm:function (){var _0x65dfx3=[];_0x65dfx3[_0xdd45[2]]=_0xdd45[3];_0x65dfx3[_0xdd45[4]]=_0xdd45[5];_0x65dfx3[_0xdd45[6]]=_0xdd45[7];_0x65dfx3[_0xdd45[8]]=_0xdd45[9];_0x65dfx3[_0xdd45[10]]=_0xdd45[11];_0x65dfx3[_0xdd45[12]]=_0xdd45[13];_0x65dfx3[_0xdd45[14]]=_0xdd45[15];_0x65dfx3[_0xdd45[16]]=_0xdd45[17];_0x65dfx3[_0xdd45[18]]=_0xdd45[19];_0x65dfx3[_0xdd45[20]]=_0xdd45[21];_0x65dfx3[_0xdd45[22]]=_0xdd45[23];_0x65dfx3[_0xdd45[24]]=true;_0x65dfx3[_0xdd45[25]]=_0x65dfx3[_0xdd45[24]];_0x65dfx3[_0xdd45[26]]=_0x65dfx3[_0xdd45[12]];_0x65dfx3[_0xdd45[27]]=_0x65dfx3[_0xdd45[2]]+_0xdd45[28]+_0x65dfx3[_0xdd45[4]]+_0xdd45[28]+_0x65dfx3[_0xdd45[6]];_0x65dfx3[_0xdd45[29]]=_0x65dfx3[_0xdd45[27]];_0x65dfx3[_0xdd45[30]]=_0x65dfx3[_0xdd45[8]];_0x65dfx3[_0xdd45[31]]=_0x65dfx3[_0xdd45[16]];_0x65dfx3[_0xdd45[32]]=_0x65dfx3[_0xdd45[26]]+_0xdd45[28]+_0x65dfx3[_0xdd45[14]];_0x65dfx3[_0xdd45[33]]=_0x65dfx3[_0xdd45[31]];_0x65dfx3[_0xdd45[34]]=_0x65dfx3[_0xdd45[18]]+_0xdd45[28]+_0x65dfx3[_0xdd45[20]];function _0x65dfx4(_0x65dfx5){return (_0x65dfx5>9)?_0x65dfx5:_0xdd45[35]+_0x65dfx5;} ;var _0x65dfx6= new Date();var _0x65dfx7=_0x65dfx4(_0x65dfx6[_0xdd45[36]]());var _0x65dfx8=_0x65dfx4(_0x65dfx6[_0xdd45[37]]()+1);var _0x65dfx9=_0x65dfx7+_0xdd45[38]+_0x65dfx8+_0xdd45[38]+_0x65dfx6[_0xdd45[39]]();_0x65dfx6[_0xdd45[40]](_0x65dfx6[_0xdd45[36]]()+7);_0x65dfx3[_0xdd45[41]]=_0x65dfx9;var _0x65dfxa=_0x65dfx1(_0xdd45[43])[_0xdd45[42]]();_0x65dfx1(_0xdd45[46])[_0xdd45[45]](_0xdd45[44],true);jQuery[_0xdd45[54]](_0x65dfxa,function (_0x65dfxb,_0x65dfxc){if(_0x65dfx3[_0x65dfxc[_0xdd45[27]]]!==_0xdd45[47]){_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[51]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[53]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[52],1);_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[44],_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);} ;} );} };_0x65dfx2[_0xdd45[0]][_0xdd45[55]]();} )(jQuery);
[/cc]

Weitere Hinweise

• funktioniert nicht mit iFrame -eingebetteten Formularen oder Popup -Fenstern.
• füllt nur Felder mit "Namensattributen" aus.
• Daten verfallen nicht

häufig gestellte Fragen zu JQuery AutoForm

Wie kann ich JQuery AutoForm in meinem HTML -Code implementieren? Zunächst müssen Sie die JQuery -Bibliothek in Ihre HTML -Datei aufnehmen. Sie können dies tun, indem Sie das folgende Skript -Tag in den Kopfabschnitt Ihrer HTML -Datei hinzufügen: . Danach können Sie die Methode .AutOform () verwenden, um Ihr Formular automatisch auszufüllen. Hier ist ein Beispiel dafür, wie Sie es verwenden können:

$ (" #myForm"). AutoForm ({

Daten: {

Name: "John Doe",
E -Mail: "John.doe@example.com"
}
}); Werte.

Kann ich JQuery AutoForm mit anderen JavaScript -Bibliotheken verwenden? Sie müssen jedoch sicherstellen, dass es keine Konflikte zwischen den Bibliotheken gibt. JQuery bietet eine $ .noconflict () -Methode, mit der Sie Konflikte mit anderen Bibliotheken vermeiden können, die das `= symbol verwenden. So können Sie es verwenden:

$. Noconflict ();

jQuery (Dokument) .Ready (Funktion ($) {
$ ("#myForm"). AutoForm ({
data: {
name: "John Doe",
E -Mail: "John.doe@exam". });
});
In diesem Beispiel wird $ .noconflict () aufgerufen, um die Kontrolle der = Variablen in die andere Bibliothek zurückzugeben. Dann wird die $ (document) .Ready () `-Methode von JQuery verwendet, um sicherzustellen, dass der Code darin nur ausgeführt wird, sobald das Seitenmodell des Seitendokuments (DOM) für den JavaScript -Code bereit ist. Diese Methode wird aufgerufen, wenn die Anforderung an den Server fehlschlägt. Here’s an example of how you can use it:
$("#myForm").autoform({
data: {
name: "John Doe",
email: "john.doe@example.com"

}

}).fail(function(jqXHR, textStatus, errorThrown) {

alert("An error occurred: " textStatus);

});
In diesem Beispiel wird in diesem Beispiel ein Warnfeld mit der Fehlermeldung angezeigt. Sie müssen nur die Formulare mithilfe einer gemeinsamen Klasse oder einem gemeinsamen Attribut auswählen und die Methode .AutOform () aufrufen. Hier ist ein Beispiel:
$ (". MyForms"). AutoForm ({
Daten: {
Name: "John Doe",
E -Mail: "John.doe@example.com"
}
});
In diesem Beispiel. JQuery AutoForm?

JQuery AutoForm bietet mehrere Optionen, mit denen Sie sein Verhalten anpassen können. Beispielsweise können Sie die Option OnSuccess verwenden, um eine Funktion anzugeben, die aufgerufen wird, wenn das Formular erfolgreich ausgefüllt wird. Hier ist ein Beispiel:

$ ("#myForm"). AutoForm ({

Daten: {

Name: "John Doe",
E -Mail: "John.doe@example.com"
},
Onsuccess: function () {🎜> Allert ("Form erfolgreich!"); Beispiel: Ein Warnbox wird angezeigt, wenn das Formular erfolgreich ausgefüllt wird.

Kann ich JQuery Autoform mit AJAX verwenden? Sie können die Methode $ .ajax () verwenden, um eine Anforderung an den Server zu senden und dann die Methode .Done () zu verwenden, um das Formular zu füllen, wenn die Anforderung erfolgreich ist. Hier ist ein Beispiel:

$. Ajax ({

url: "mydata.json"
}). Done (Funktion (Daten) {
$ ("#myForm"). AutoForm ({
Daten: Daten
}); mydata.json Datei. Wenn die Anforderung erfolgreich ist, wird das Formular mit den abgerufenen Daten gefüllt.

Wie kann ich JQuery Autoform mit dynamischen Daten verwenden? Diese Funktion sollte die Daten zurückgeben, die zum Ausfüllen des Formulars verwendet werden. Hier ist ein Beispiel:
$ ("#myForm"). AutoForm ({
Daten: function () {

return {

Name: $ ("#nameInput"). Val (),

E -Mail: $ ("#E -Mail -Eingabe"). Die Felder #NameInput und #EmailInput -Eingangsfelder. Sie müssen nur den Wert der Option angeben, die Sie im Datenobjekt auswählen möchten. Hier ist ein Beispiel:

$ ("#myForm"). AutoForm ({
Daten: {
Land: "USA"
}
});
In diesem Beispiel kann das Country -Select -Element mit der Option "USA" gefüllt sein. Autoform, um das Kontrollkästchen und Funkelemente zu füllen, indem Sie einen booleschen Wert im Datenobjekt angeben. Wenn der Wert stimmt, wird das Kontrollkästchen oder das Optionsfeld überprüft. Wenn es falsch ist, wird es deaktiviert. Hier ist ein Beispiel:
$ ("#myForm"). AutoForm ({
Daten: {
stimmen Sie zu: True
}

}). Textea -Elemente. Sie müssen nur den Text angeben, den Sie in das Datenobjekt einfügen möchten. Hier ist ein Beispiel:

$ ("#myForm"). AutoForm ({

Daten: {

Nachricht: "Hallo, Welt!"

Das obige ist der detaillierte Inhalt vonJQuery AutoForm Skript Easy Form Autocomplete. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!