{"id":5251,"date":"2022-08-27T11:44:34","date_gmt":"2022-08-27T06:14:34","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/"},"modified":"2022-08-27T11:44:34","modified_gmt":"2022-08-27T06:14:34","slug":"solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/","title":{"rendered":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

To achieve this you will need ajax, you have two options<\/p>\n

    \n
  1. on the username field you can have an onblur event, then call a function that will check the username in the database using the onblur event. <\/li>\n<\/ol>\n

    <input name=\"username\" type=\"text\" id=\"username\" onBlur=\"checkAvailability()\"><\/code><\/p>\n

    \n

    The onblur event<\/strong> occurs when an object loses focus. The onblur event
    \n is most often used with form validation code (e.g. when the user
    \n leaves a form field).<\/p>\n<\/blockquote>\n

    With this method as soon as the user finishes typing the email address and leaves the input field, the checkAvailability()<\/code> function is fired up and send Asynchronous request to the server using ajax. the user will know if the username is taken even before they can submit.<\/p>\n

      \n
    1. Collect all form data and return results when the submit button is hit without refreshing the page, (ajax as well).<\/li>\n<\/ol>\n

      Lets start with option 2 because its kinda easy.<\/p>\n

      First you will need to use prepared statements, also use php builtin password_hash<\/code> and password_verify()<\/code> functions for better safer passwords<\/p>\n

      lets begin, we will have a form with username field(email) only just you can see whats’s happening, then when we click the register button we start our ajax that will call the php script and return json data back to use.<\/p>\n

      index.php<\/strong><\/p>\n

      <style>\n.status-available{color:#2FC332;}\n.status-not-available{color:#D60202;}\n<\/style>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-2.1.1.min.js\" type=\"text\/javascript\"><\/script>\n <script type=\"text\/javascript\">\n    $(document).ready(function (){\n\n    $('#register').submit(function (event){\n\n    var formData = {\n\n        'username' : $('input[name=username]').val()\n    };\n    $.ajax({\n\n        type : 'POST',\n        data  : formData,\n        url  : 'register.php',\n        dataType :'json',\n        encode   : true\n\n    })\n    .done(function(data){\n\n        console.log(data); \/\/debugging puroposes\n\n        if(!data.success){\n\n          if(data.errors.username){\n\n\n            $('#user-availability-status').append(data.errors.username);\n\n          }\n\n          if(data.errors.exists){\n\n            $('#user-availability-status').append(data.errors.exists);\n            $('#submit').prop('disabled', true);\n          }\n        }else{\n\n          $('#submit').prop('disabled', false);\n          $('#success').append('<div class=\"alert alert-success\">'+data.message+'<\/div>');\n         \/\/ alert('done');\n        }\n\n    })\n\n    .fail(function(data){\n\n      console.log(data); \/\/server errrors debugging puporses only\n    });\n\n    event.preventDefault();\n\n\n    });\n\n    });\n\n<\/script>\n<div id=\"frmCheckUsername\">\n\n<div id=\"success\" class=\"status-available\"><\/div>\n\n    <form method=\"POST\" action=\"register.php\" id=\"register\">\n        <label>Username:<\/label>\n        <input name=\"username\" type=\"text\" id=\"username\"><span id=\"user-availability-status\" class=\"status-not-available\"><\/span><br><br>\n        <button type=\"submit\" name=\"submit\" id=\"submit\"> Register <\/button>   \n<\/div>\n<p><img src=\"LoaderIcon.gif\" id=\"loaderIcon\" style=\"display:none\" \/><\/p>\n<\/form>\n<\/code><\/pre>\n
      Register.php<\/strong><\/p>\n
      <?php\nrequire_once(\"dbcontroller.php\");\n\n\n$data   = array();\n$errors = array();\n\nif (empty($_POST['username'])) {\n\n    $errors['username'] = 'enter username';\n} else {\n\n\n    $username = $_POST['username'];\n\n    \/\/check if username exists\n    $statement = $con->prepare(\"SELECT email FROM users WHERE email = ? LIMIT 1\");\n    $statement->bind_param('s', $username);\n    $statement->execute();\n    $statement->store_result();\n    if ($statement->num_rows == 1) {\n\n        $errors['exists'] = 'the email ' . $username . ' already registered please login';\n\n    }\n}\n\nif (!empty($errors)) {\n\n    \/\/We have errors send them back\n\n    $data['success'] = false;\n    $data['errors']  = $errors;\n} else {\n\n    \/\/No errors insert\n\n    $stmt = $con->prepare(\"INSERT INTO users (username) VALUES(?)\");\n    $stmt->bind_param(\"s\", $username);\n    $stmt->execute();\n\n\n\n    $data['success'] = true;\n    $data['message'] = 'user registered';\n\n    $stmt->close();\n    $con->close();\n}\n\necho json_encode($data);\n\n\n\n?>\n<\/code><\/pre>\n
      dbcontroller.php<\/strong> is my database connection class, so you can ignore that and have your own.<\/p>\n
      This will point you to the correct direction atleast<\/p>\n
      Option 1 using the onblur event<\/p>\n
      <style>\n.status-available{color:#2FC332;}\n.status-not-available{color:#D60202;}\n<\/style>\n<script src=\"https:\/\/code.jquery.com\/jquery-2.1.1.min.js\" type=\"text\/javascript\"><\/script>\n<script>\nfunction checkAvailability() {\n    $(\"#loaderIcon\").show();\n    jQuery.ajax({\n    url: \"register.php\",\n    data:'username=\"+$(\"#username\").val(),\n    type: \"POST\",\n    success:function(data){\n        $(\"#user-availability-status\").html(data);\n        $(\"#loaderIcon\").hide();\n        $(\"#submit').prop('disabled', true);\n    },\n    error:function (){}\n    });\n}\n<\/script>\n\n<div id=\"frmCheckUsername\">\n  <label>Check Username:<\/label>\n  <input name=\"username\" type=\"text\" id=\"username\" onBlur=\"checkAvailability()\"><span id=\"user-availability-status\" class=\"status-not-available\"><\/span>  <br><br>\n\n  <button type=\"submit\" name=\"submit\" id=\"submit\"> Register <\/button>  \n<\/div>\n<p><img src=\"LoaderIcon.gif\" id=\"loaderIcon\" style=\"display:none\" \/><\/p>\n<\/code><\/pre>\n
      On this one as soon as the user leaves the input box the checkAvailability(); is fired up<\/p>\n<\/p><\/div>\n
      <\/div>\n<\/div>\n
                  <\/span> <\/p><\/div>\n<\/div>\n
      [ad_2]<\/p>\n
      solved How to stop form submission if email address is already available in MySQL db ? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
      [ad_1] To achieve this you will need ajax, you have two options on the username field you can have an onblur event, then call a function that will check the username in the database using the onblur event. <input name=”username” type=”text” id=”username” onBlur=”checkAvailability()”> The onblur event occurs when an object loses focus. The onblur event … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[334,1117,339],"class_list":["post-5251","post","type-post","status-publish","format-standard","hentry","category-solved","tag-ajax","tag-mysqli","tag-php"],"yoast_head":"\n[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] To achieve this you will need ajax, you have two options on the username field you can have an onblur event, then call a function that will check the username in the database using the onblur event. <input name="username" type="text" id="username" onBlur="checkAvailability()"> The onblur event occurs when an object loses focus. The onblur event ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-27T06:14:34+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed]\",\"datePublished\":\"2022-08-27T06:14:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\"},\"wordCount\":286,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"ajax\",\"mysqli\",\"php\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\",\"name\":\"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-08-27T06:14:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb","og_description":"[ad_1] To achieve this you will need ajax, you have two options on the username field you can have an onblur event, then call a function that will check the username in the database using the onblur event. <input name=\"username\" type=\"text\" id=\"username\" onBlur=\"checkAvailability()\"> The onblur event occurs when an object loses focus. The onblur event ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/","og_site_name":"JassWeb","article_published_time":"2022-08-27T06:14:34+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed]","datePublished":"2022-08-27T06:14:34+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/"},"wordCount":286,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["ajax","mysqli","php"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/","name":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-08-27T06:14:34+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-stop-form-submission-if-email-address-is-already-available-in-mysql-db-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to stop form submission if email address is already available in MySQL db ? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/5251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=5251"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/5251\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=5251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=5251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=5251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}