Licznik znaków w JavaScript

2012-01-13T09:16:00.000-08:00

Cześć!

Dziś przedstawię wam prosty sposób w jaki można wyświetlać użytkownikowi informację ile zostało mu jeszcze znaków do wykorzystania np. podczas pisania komentarza na naszej strony. Skrypt wykonany jest w JavaScript.

Poniżej przedstawię kod tego skryptu, po czym go omówię.

<script type="text/javascript">
function Count(cid,eid,limit) {
 var counter = document.getElementById(cid);
 var leng = eid.value.length;
 counter.innerHTML = ( ( leng ) ) +'/' + limit;
 if ( eid.value.length > limit ) {
  var input = eid.value.substring(0,limit);
  eid.value = input;
 }
}
</script>

Ok, funkcja Count() pobiera od użytkownika następujące informacje:

cid - jest to id elementu, który ma za zadanie wyświetlać aktualną liczbę wykorzystanych znaków.
eid - jest to id elementu, z którego ma zostać pobierana wartość aktualnie zużytych znaków, np z pola textarea lub input.
limit - jest to wartość ustawiona na stałe, która określa liczbę dostępnych znaków do wykorzystania.

Zastosowanie kodu jest bardzo proste. Nie będę go opisywał tylko zobrazuję go przykładem, który można podejrzeć tutaj, a pobrać można go stąd.

Jquery i SQL? To proste!

2012-01-12T14:24:00.000-08:00

Witam, dziś przedstawię wam jak w bardzo prosty sposób dodawać dane do bazy danych przez przeładowywania strony wykorzystując JQUERY.

Zaczniemy od stworzenia pliku ze skryptem jquery. Będzie on pobierał dane z formularza i przesyłał je dalej do skryptu php, który zapisze je w bazie danych.

1. Stwórz nowy plik i wklej do niego poniższy skrypt

$(document).ready(function(){
 $("form#comment_form").submit(function() {
  // Pobieranie danych z formularza
  var name = $('input[name=name]');
  var web = $('input[name=web]');
  var comment = $('textarea[name=comment]');
  
  // Sprawdzenie czy uzytkownik wpisal imie
  if(name.val() == "") {
   // wyswietlenie diva z informacja o bledzie
   $('div.error1').fadeIn(400);
   // ukrycie diva po 3 sekundach
   setTimeout(function(){ $("div.error1").fadeOut(400) }, 3000);
   return false;
  }
  
  // Sprawdzenie czy uzytkownik wpisal komentarz
  if(comment.val() == "") {
   // wyswietlenie diva z informacja o bledzie
   $('div.error2').fadeIn(400);
   // ukrycie diva po 3 sekundach
   setTimeout(function(){ $("div.error2").fadeOut(400) }, 4000);
   return false;
  }
  
  // stworzenie zmiennej data z zawartymi danymi z formularza
  var data = 'name=' + name.val() + '&web=' + web.val() + '&comment=' + comment.val();

  $.ajax({
   // wybranie metody przeslania danych do skryptu POST lub GET
   type: "POST",
   // sciezka do pliku wykonawczego. Moze tez byc link.
   url: "insert.php",
   // zdeklarowanie danych ktore maja zostac dodane do SQL
   data: data,
   // tutaj mozna umieszczac wszystko co ma sie wykonac po poprawnym wykonaniu skryptu :)
   success: function(){
    // Usuniecie wpisanych danych do formularza
    $('#name').val('');
    $('#web').val('');
    $('#comment').val('');
    // Wyswietlenie diva z informacja o poprawnym dodaniu do SQL 
    $('div.done').fadeIn(400);
    // Usuniecie diva po 3 sekundach
    setTimeout(function(){ $("div.done").fadeOut(400) }, 3000);
   }
   
  });
  return false;
 });
});

Plik zapisz jako dodaj.js

2. W drugim kroku utwórz plik html o nazwie index, następnie umieść w nim następującą treść zawierającą między innymi formularz dla naszego skryptu.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jquery - dodawanie danych do SQL - http://parismo.blogspot.com/</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="dodaj.js"></script>
</head>
<body>
 <div id="content">
     <form action="" method="post" id="comment_form" name="comment_form">
         <input class="input_form" id="name" type="text" name="name" /><label for="name">&nbsp;&nbsp;Imie</label><br>
            <input class="input_form" id="web" type="text" name="web" /><label for="web">&nbsp;&nbsp;Strona www</label><br>
            <label for="comment">&nbsp;&nbsp;Komentarz</label><br>
            <textarea class="textarea" id="comment" name="comment"></textarea><br>
            <input class="submit" type="submit" value=" Dodaj " />
        </form>
        <div class="done" style="display:none;">
           <p>Twój komentarz został dodany!</p>
        </div>
        <div class="error1" style="display:none;">
           <p>Pole "Imie" jest wymagane!</p>
        </div>
        <div class="error2" style="display:none;">
           <p>Pole "Komentarz" jest wymagane!</p>
        </div>
    </div>
</body>
</html>

3. Aby wszystko było ładnie sformatowane potrzebujemy jeszcze plik ze stylami. W tym celu tworzymy plik o nazwie style.css i dodajemy do niego taką zawartość

body {
 background:#333;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
}
#content {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 width:400px;
 height:380px;
 background:#CCC;
 margin:100px auto;
 padding:15px;
}
.input_form {
 width:200px;
 margin-bottom:10px;
}
.textarea {
 width:400px;
 height:170px;
 margin-top:3px;
}
.submit {
 margin-left:165px;
 margin-top:10px;
}
.done {
 margin-left:80px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background:#6C3;
 text-align:center;
 padding:1px;
 width:240px;
 margin-top:10px;
}
.error1, .error2 {
 margin-left:80px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background:#900;
 text-align:center;
 padding:1px;
 width:240px;
 margin-top:10px;
 color:#fff;
}

4. Na koniec pozostaje nam stworzenie pliku php o nazwie insert.php wraz, który wykona główne zadanie :)

<?php
   // Odebranie danych, ktore przeslal jquery
   $name = htmlspecialchars(trim($_POST['name']));
   $web = htmlspecialchars(trim($_POST['web']));
   $comment = htmlspecialchars(trim($_POST['comment']));

   // Informacje potrzebne do polaczenia z baza danych
   $host=("");
   $login=("");
   $haslo=("");
   $nazwa=("");

   // nawiazanie polaczenia z baza danych
   $connect = mysql_connect($host, $login, $haslo);
   $db = mysql_select_db($nazwa);

   // Dodanie nowego komentarza do bazy danych
   $query  = "INSERT INTO comments (name,web,comment) VALUES ('$name','$web','$comment')";
   mysql_query($query) or die(mysql_error());
   mysql_close($connect);
?>

oraz dodanie do bazy danych odpowiedniej tabeli

CREATE TABLE IF NOT EXISTS `comments` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `web` varchar(100) NOT NULL,
  `comment` varchar(1000) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Działanie skryptu można zobaczyć tutaj
Gotową paczkę ze skryptem można pobrać stąd

Parismo

Licznik znaków w JavaScript

Jquery i SQL? To proste!