{"id":3197,"date":"2016-01-28T17:47:07","date_gmt":"2016-01-28T13:47:07","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=3197"},"modified":"2023-05-05T13:26:52","modified_gmt":"2023-05-05T10:26:52","slug":"save-login-password-in-browser","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/save-login-password-in-browser\/","title":{"rendered":"DHTMLX Little-Known Features: How To Save Login\/Password in Browser"},"content":{"rendered":"

From time to time we are asked to offer an easy way to use real HTML form with dhtmlxForm<\/a>. So we’d like to share this tip with you and show you the working sample of login form that forces a browser to save credentials for login\/password form.<\/p>\n

\"Login\/password<\/p>\n

Here is a complete demo (Enter “admin \/ 1” login details to check it). If you want to know how to make it in your application, continue reading this mini tutorial.
\n<\/p>\n

Step 1.<\/strong><\/p>\n

First of all, let’s create a real html form:<\/p>\n

<<\/span>form id=<\/span>"realForm"<\/span> action=<\/span>"check.php"<\/span> method=<\/span>"POST"<\/span>><\/<\/span>form><\/span><\/div><\/div>\n

Do not add inputs into it, this will be done by dhtmlxForm.<\/p>\n

Step 2.<\/strong><\/p>\n

Add hidden iframe on page to submit real form without the page reloading:<\/p>\n

<<\/span>iframe border=<\/span>"0"<\/span> frameBorder=<\/span>"0"<\/span> name=<\/span>"submit_ifr"<\/span> class<\/span>=<\/span>"submit_iframe"<\/span>><\/<\/span>iframe><\/span><\/div><\/div>\n

And you need some css to hide it from eyes:<\/p>\n

<style><\/span>
\n    iframe.submit_iframe<\/span> {<\/span>
\n        position<\/span>:<\/span> absolute<\/span>;<\/span>
\n        width<\/span>:<\/span> 1px<\/span>;<\/span>
\n        height<\/span>:<\/span> 1px<\/span>;<\/span>
\n        left<\/span>:<\/span> -100px<\/span>;<\/span>
\n        top<\/span>:<\/span> -100px<\/span>;<\/span>
\n        font-size<\/span>:<\/span> 1px<\/span>;<\/span>
\n    }<\/span>
\n<\/style><\/span><\/div><\/div>\n

Step 3.<\/strong><\/p>\n

Add target<\/em> attr to form to force submit to the hidden iframe:<\/p>\n

<<\/span>form id=<\/span>"realForm"<\/span> action=<\/span>"check.php"<\/span> method=<\/span>"POST"<\/span> target=<\/span>"submit_ifr"<\/span>><\/<\/span>form><\/span><\/div><\/div>\n

Step 4.<\/strong><\/p>\n

Now it’s time to add dhtmlxForm:<\/p>\n

var<\/span> formData =<\/span> [<\/span>
\n    {<\/span>type:<\/span> "settings"<\/span>,<\/span> position:<\/span> "label-left"<\/span>,<\/span> labelWidth:<\/span> 75<\/span>,<\/span> inputWidth:<\/span> 150<\/span>}<\/span>,<\/span>
\n    {<\/span>type:<\/span> "block"<\/span>,<\/span> blockOffset:<\/span> 30<\/span>,<\/span> offsetTop:<\/span> 15<\/span>,<\/span> width:<\/span> "auto"<\/span>,<\/span> list:<\/span> [<\/span>
\n        {<\/span>type:<\/span> "label"<\/span>,<\/span> label:<\/span> "Please introduce yourself"<\/span>,<\/span> labelWidth:<\/span> "auto"<\/span>,<\/span> offsetLeft:<\/span> 35<\/span>}<\/span>,<\/span>
\n        {<\/span>type:<\/span> "input"<\/span>,<\/span> label:<\/span> "Login"<\/span>,<\/span> name:<\/span> "dhxform_demo_login"<\/span>,<\/span> value:<\/span> ""<\/span>,<\/span> offsetTop:<\/span> 20<\/span>}<\/span>,<\/span>
\n        {<\/span>type:<\/span> "password"<\/span>,<\/span> label:<\/span> "Password"<\/span>,<\/span> name:<\/span> "dhxform_demo_pwd"<\/span>,<\/span> value:<\/span> ""<\/span>}<\/span>,<\/span>
\n        {<\/span>type:<\/span> "button"<\/span>,<\/span> name:<\/span> "submit"<\/span>,<\/span> value:<\/span> "Let me in"<\/span>,<\/span> offsetTop:<\/span> 20<\/span>,<\/span> offsetLeft:<\/span> 72<\/span>}<\/span>
\n    ]<\/span>}<\/span>
\n]<\/span>;<\/span>
\nvar<\/span> myForm =<\/span> new<\/span> dhtmlXForm(<\/span>"dhxForm"<\/span>,<\/span> formData)<\/span>;<\/span><\/div><\/div>\n

Step 5.<\/strong><\/p>\n

Add an event handler for submitting (here instead of dhtmlxForm we’ll submit the real form):<\/p>\n

myForm.attachEvent<\/span>(<\/span>"onButtonClick"<\/span>,<\/span> function<\/span>(<\/span>name)<\/span> {<\/span>
\n    if<\/span> (<\/span>name ==<\/span> "submit"<\/span>)<\/span> {<\/span>
\n        document.getElementById<\/span>(<\/span>"realForm"<\/span>)<\/span>.submit<\/span>(<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Step 6.<\/strong><\/p>\n

Here is the server side code you need:<\/p>\n

<?php<\/span>
\nheader<\/span>(<\/span>"Content-Type: text\/html; charset=utf-8"<\/span>)<\/span>;<\/span>
\n
\nif<\/span> (<\/span>@<\/span>$_REQUEST<\/span>[<\/span>"dhxform_demo_login"<\/span>]<\/span> ==<\/span> "admin"<\/span> &&<\/span> @<\/span>$_REQUEST<\/span>[<\/span>"dhxform_demo_pwd"<\/span>]<\/span> ==<\/span> "1"<\/span>)<\/span> {<\/span>
\n    $state<\/span> =<\/span> 1<\/span>;<\/span>
\n}<\/span> else<\/span> {<\/span>
\n    $state<\/span> =<\/span> 0<\/span>;<\/span>
\n}<\/span>
\n
\nprint_r<\/span>(<\/span>"<meta http-equiv='Content-Type' content='text\/html; charset=UTF-8'\/>"<\/span>)<\/span>;<\/span>
\nprint_r<\/span>(<\/span>"<script> try { parent.submitCallback("<\/span>.<\/span>$state<\/span>.<\/span>"); } catch(e) {};<\/script>"<\/span>)<\/span>;<\/span>
\n?><\/span><\/div><\/div>\n

Final Step 7.<\/strong><\/p>\n

Add submitCallback<\/em> function on client which will parse server response:<\/p>\n

function<\/span> submitCallback(<\/span>status)<\/span> {<\/span>
\n    if<\/span> (<\/span>status ==<\/span> 1<\/span>)<\/span> {<\/span>
\n        document.location<\/span>.href<\/span> =<\/span> "secret.html"<\/span>;<\/span>
\n    }<\/span> else<\/span> {<\/span>
\n        \/\/ reset form<\/span>
\n        myForm.setFormData<\/span>(<\/span>{<\/span>dhxform_demo_login:<\/span> ""<\/span>,<\/span> dhxform_demo_pwd:<\/span> ""<\/span>}<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

As a result you have a login\/password form that allows you to save credentials in browsers. We’ve set up our server so that if you enter the credentials “admin \/ 1” you’ll get to the secret page.<\/p>\n

\"login<\/p>\n

We hope this piece of information was useful for you; and feel free to use it in your applications. Share your comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"

From time to time we are asked to offer an easy way to use real HTML form with dhtmlxForm. So we’d like to share this tip with you and …<\/p>\n","protected":false},"author":2,"featured_media":3392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,72,1,38],"tags":[33,43,31,14],"class_list":["post-3197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-general","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlx-tips","tag-form","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3197"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3197\/revisions"}],"predecessor-version":[{"id":11387,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3197\/revisions\/11387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3392"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}