Loading:


    Formularz kontaktowy wysyłający dane na e-mail - AJAX i PHP

    Skrypt tworzy formularz wysyłający dane na adres e-mail wykorzystując technologie AJAX i PHP



    Napisz Artyku³

    Listing


    //index.html   #############################################

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ajax</title>
    <link href="ajaxcss.css" rel="stylesheet" type="text/css">
    <script src="ajaxcore.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="mainDiv" class="mainDiv">
    <div class="txtDesc">Tu wpisz swoją opinię:</div>
    <div>
      <textarea class="myTextInput" id="taTresc" style="width:100%;"
                rows="10" cols="50"></textarea>
    </div>
    <div style="width:50%;margin:0 auto;text-align:center;">
      <input type="button" value="Wyślij" class="myButton" id="btnWyslij"
             onclick="startRequest();" style="margin-top:10px;" />
    </div>
    </div>
    </body>
    </html>





    //mail.php   #############################################

    <?php
    if(!isSet($_GET["tresc"])){
      echo("Nieprawidłowe wywołanie skryptu!");
    }
    else if($_GET["tresc"] == ""){
      echo("Proszę wpisać swoją opinię!");
    }
    else{
      $do = "admin@moja.domena";
      $temat = "Opinia o stronie";
      $tresc = $_GET["tresc"];
      if(@mail($do, $temat, $tresc)){
        echo("Dziękujemy za wyrażenie swojej opinii.");
      }
      else{
        echo("Wystąpił problem techniczny. Opinia nie została zapisana.");
      }
    }
    ?>








    //ajaxcss.css   #############################################

    .mainDiv
    {
      color: #333333;
      position: relative;
      background-color: #EFEFEF;
      border: 1px solid #000000;
      margin: 10px 10px 10px 10px;
      padding: 14px 14px 14px 14px;
      width: 350px;
      visibility: visible;
    }

    .dataDiv
    {
      color: #333333;
      position: relative;
      background-color: #ffffff;
      border: 1px solid #000000;
      margin: 10px 10px 10px 10px;
      padding: 14px 14px 14px 14px;
      width: 420px;
      visibility: visible;
    }

    .myButton
    {
      font-family:helvetica,sans-serif;
      font-size:84%;
      font-weight:bold;
      border:1px solid;
      border-top-color:#696;
      border-left-color:#696;
      border-right-color:#363;
      border-bottom-color:#363;
      width:120px;
      margin:5px;
    }

    .myTextInput
    {
      border:1px solid;
      background-color: #F8F8F8;
      border-top-color:#696;
      border-left-color:#696;
      border-right-color:#363;
      border-bottom-color:#363;
      width:70%;
    }



    //ajaxcore.js   #############################################

    function getXMLHttpRequestObject()
    {
      try{
        return new XMLHttpRequest();
      }
      catch(e){
        try{
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
          return false;
        }
      }
    }

    function startGETRequest(url, onComplete, onEnd)
    {
      var XMLHttpRequestObject = getXMLHttpRequestObject();
      if(XMLHttpRequestObject){
        XMLHttpRequestObject.open("GET", url);
        XMLHttpRequestObject.onreadystatechange = function()
        {
          if (XMLHttpRequestObject.readyState == 4){
            if(XMLHttpRequestObject.status == 200){
              var responseXML = XMLHttpRequestObject.responseXML;
              var responseText = XMLHttpRequestObject.responseText;
              onComplete(responseText, responseXML);
            }
            delete XMLHttpRequestObject;
            onEnd();
          }
        }
        XMLHttpRequestObject.send(null);
      }
    }

    function startPOSTRequest(url, params, onComplete, onEnd)
    {
      var XMLHttpRequestObject = getXMLHttpRequestObject();
      if(XMLHttpRequestObject){
        XMLHttpRequestObject.open("POST", url);
        XMLHttpRequestObject.setRequestHeader(
          'Content-Type', 'application/x-www-form-urlencoded');
        XMLHttpRequestObject.onreadystatechange = function()
        {
          if (XMLHttpRequestObject.readyState == 4){
            if(XMLHttpRequestObject.status == 200){
              var responseXML = XMLHttpRequestObject.responseXML;
              var responseText = XMLHttpRequestObject.responseText;
              onComplete(responseText, responseXML);
            }
            delete XMLHttpRequestObject;
            onEnd();
          }
        }
        XMLHttpRequestObject.send(params);
      }
    }


    //ajax.js   #############################################

    function startRequest()
    {
      taTrescText = document.getElementById('taTresc').value;

      var btnWyslij = document.getElementById('btnWyslij');
      btnWyslij.disabled = true;

      url = "mail.php?tresc=" + taTrescText;
      url = encodeURI(url);

      startGETRequest(url, onComplete, onEnd);
    }

    function onComplete(text, xml)
    {
      alert(text);
    }

    function onEnd()
    {
      var btnWyslij = document.getElementById('btnWyslij');
      btnWyslij.disabled = false;
    }




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors