linkedin facebook linkedin facebook nod32

jQuery va Php e-mail obuna forma shaklni yaratish

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2016-12-03

jQuery va Php e-mail obuna forma shaklni yaratish

Biror saytga qo‘shilgan ma’lumotni bilishni xohlaysizmi unda obuna tugmasini bosib a’zo bo‘lasiz va sizning e-mail ga qo‘shilgan habar haqida oxirigi yangiliklarni etkazishadi. Buning uchun shunchaki o‘zining elektronli pochtagizni kiriting va sizning elektron pochtangizni ro‘yxatga qo‘shadi.

index. html yangini faylni yaratish bilan boshlaymiz. HTML5 ni CSS dizayn va jQuery skript kutubxona bilan bog‘laymiz e-mail kiriting forma shaklini yaratamiz:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>e-mail ga obuna bo‘lish jQuery va pxp da</title>
  <!-- dizayn -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- jQuery bilan bog‘lash-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>

</body>
</html>

e-mail forma shakliga obuna bo‘lish

Endi obuna shaklini yaratib olamiz. E-mail kiriting shakl elektron manzil kiritish bo‘limi, tugmacha obuna bo‘lish shunchaki tasdiqlaydi.

<div id="completeform">
   <span id="error"></span>

   <form id="inviteform" name="inviteform" method="post" action="#">
      <input type="email" name="email" id="email" placeholder="E-mail kiriting" autocomplete="off" autocorrect="off" autocapitalize="off">

      <div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Obuna bo‘lish</button></div>
   </form>
</div>

jQuery va AJAX so‘rovida elektron pochta manzilni tekshirish

Elektron pochta manzillar oddiy funksiya orqali tekshiradi. Agar elektron manzilni tekshirish natijasida to‘g‘ri bo‘lsa true teng bo‘ladi aks holda false ni o‘zlashtiradi.

function isEmail(email) {
      // elektron manzilni tekshirish
      var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test(email);
}

completeInviteForm ( ) vazifasini aniqlab olamiz. Forma shakliga kiritilgan elektron manzil uchun fadeOut 400 millisekunda bajarilishni amalga oshiradi.

$. ajax ( ) funksiyasiga murojat qilish yordami manzil save.php faylga saqlaydi.

function completeInviteForm() {
         setTimeout(function() { $("#completeform").fadeOut(400, function(){
            $.ajax({
                type: 'POST',
                 url: 'save.php',  
                 data: 'email='+$("#email").val(),  
                 success: function(){  
                 $('#completeform').before('<span class="msg">Hammasi!Elektron manzilingiz qabul qilindi.</span>');}
                });
         });
         }, 1100);
      }
var erdiv = $("#error");
var btnwrap = $("#btnwrap");


$(document).ready(function(){
$("#sendbtn").live("click", function(e){
e.preventDefault();
var emailval = $("#email").val();


if(!isEmail(emailval)) {
erdiv.html("elektron pochta manzilingiz xato");
erdiv.css("display", "block");
}

if(isEmail(emailval)) {
erdiv.css("color", "#719dc8");
erdiv.html("obrabotka...");
btnwrap.html('<img src="img/loader.gif" alt="loading">');
(completeInviteForm(), 900);
}
});
});
</script>

Elektron manzilni qabul qilib oladigan ma’lumotlar bazani yaratib olamiz.

CREATE TABLE `email` (
`id` int( 5 ) NOT NULL AUTO_INCREMENT ,
`address` varchar( 255 ) NOT NULL default '',
KEY `id` ( `id` )
)

Jadval (nomi email), qoldirilgan ma’lumotlarni o‘z ichiga olib, quyidagi tarkibga ega:

id - yozuvning identifikatsionn unikal nomeri;
address– electron manzilni qabul qilish;

save.php faylni yaratib olamiz

<?
   if(isset($_POST['email'])) { $email = $_POST['email']; }
   $db = mysql_connect("localhost","root","");
   mysql_select_db("email",$db);
   mysql_query("INSERT INTO address (address) VALUES ('$email')",$db);
?>

Elektron manzilni phpmyadmiz bazaga kiritishni amalga oshiradi.

Quyida kodni yuklab oling: yuklab olish 20,9 kb

350 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений