Formularz, dodanie nowych elementów

Dla specjalistów Webmastering
#1

Witam,

Posiadam taki formularz: http://jsbin.com/eronag/2/edit

Wiem, że tam jest trochę błędów w js (50 :P) ale nie w tym rzecz. Chciałbym dodać kilka rzeczy typu ilosc pokoi itp.

Wiem jak to dodać w php, ale nie wiem co muszę zmienić w js.

Tutaj kod php:

<?php

    $owner_email = "email"; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< tutaj wpisz adres email na który mają byc wysyłane maile

    $headers = "From: ".$_POST["email"]."\r\n";

    $headers .= "MIME-Version: 1.0\r\n";

	$headers .= "Content-type: text/plain; charset=utf-8\r\n";

    $headers .= "Content-Transfer-Encoding: 8bit";

    $subject = 'Wiadomość ze strony internetowej';

	$subject = "=?utf-8?B?".base64_encode($subject)."?=";

    $messageBody = "";



    if($_POST['name']!='nope'){

        $messageBody .= '
Imię i nazwisko: ' . $_POST["name"] . '' . "\n";

        $messageBody .= '
' . "\n";

    }

    if($_POST['email']!='nope'){

	$mailnadawcy = $_POST['email'];

        $messageBody .= '
Email: ' . $_POST['email'] . '' . "\n";

        $messageBody .= '
' . "\n"; 

    }else{

        $headers = '';

    }

    if($_POST['state']!='nope'){        

        $messageBody .= '
State: ' . $_POST['state'] . '' . "\n";

        $messageBody .= '
' . "\n";

    }

    if($_POST['phone']!='nope'){        

        $messageBody .= '
Telefon: ' . $_POST['phone'] . '' . "\n";

        $messageBody .= '
' . "\n";

    }    

    if($_POST['fax']!='nope'){        

        $messageBody .= '
Fax: ' . $_POST['fax'] . '' . "\n";

        $messageBody .= '
' . "\n";

    }

    if($_POST['message']!='nope'){

        $messageBody .= '
Treść: ' . $_POST['message'] . '' . "\n";

    }


    if($_POST["stripHTML"] == 'true'){

        $messageBody = strip_tags($messageBody);

    }

	mail($owner_email, $subject, $messageBody, $headers);



?>
#2

A czy jesteś w stanie podać informacje, jak wygląda sam formularz?

Bo powyższy kod służy jedynie do wysłania danych.

Nie ma narzędzia wprowadzającego te dane do niego…

#3

@Hookz

a pod linkiem byłeś?

@kernelus

W js wystarczy, ze do elementu, gdzie ślesz posta

(zaczyna się tak:

$.ajax({

								type: "POST",

								url:_.mailHandlerURL,

)

Dodasz do obiektu data namiary na inputa, którego dodasz do html.

oraz do obiektu rx dodasz odpowiednie regexpy dla swoich pól.

Na pewno dasz rade!

#4

Z tą częścią o obiekcie data sobie poradzę, ale nie wiem kompletnie o co chodzi z rx. :stuck_out_tongue:

#5

w rx znajdują się wyrażenia regularne, które potem przeznaczone są do walidowania pól. Na przykład to:

rx:/.{20}/

Oznacza, że jeśli pole posiada więcej niż 19 znaków, to będzie ok. Nie wiec co chcesz wrzucić do swoich inputów, ale jeśli nie ma dla Ciebie większego znaczenia walidowanie tych pół zawsze możesz posłużyć się taką zaślepką.

#6

@kernelus- to może tak:

http://jsbin.com/equbef/12/edit ?

Skorzystałem z trochę innego kodu, ale chyba na jedno wychodzi…

I nie pokazuje tysiąca błędów… :wink:

#7

Hmmm bardzo fajny formularz. Świetnie wygląda z samym css. :smiley: A jak tam zrobić różne komunikaty na nie podanie pola?

@tfl ja musiałbym zrobić niektóre pola tlyko na liczby a niektóre tylko text a jeszcze jedno tylko format daty. :stuck_out_tongue:

#8

Komunikaty na nie podanie pola robia się same.

Wystarczyło dodać “required” do każdego miejsca do wprowadzenia (w kodzie html) i jesli nie wprowadzisz , a będziesz chciał przesłać formularz, to pokaże Ci się info, że musisz coś wpisać :wink:

Wartości - czy liczba , czy co tam etc. ustala się poprzez type=“jakistyp”

]

Jakistyp to może być:

button - definiuje “klikalny” przycisk.

checkbox Definiuje pole możliwe do zaznaczenia

colorNew Definiuje kolor (wybór koloru czegośtam)

dateNew Definiuje datę (dzień, miesiąc, rok)

datetimeNew Definiuję datę i czas (rok, miesiąc, dzień, godziny, minuty, sekundy, milisekundy- bazując na czasie UTC lub UTC+x)

datetime-localNew Definiuję datę i czas lokalny (bez stref czasowych)

emailNew Definiuje pole na adres email

file Definiuje pole do wyboru pliku (np. do wysłania na serwer, np. tak jak ImageShack)

hidden Definiuje ukryte pole (niewidzialne z poziomu użytkownika. z poziomu kodu- niestety tak)

image Definiuje obrazek jak przycisk do wysłania czegoś (pole input)

monthNew Defines a month and year control (no time zone)

numberNew Definiuje pole do wpisania numeru

password Definiuje pole hasła

radio Definiuje przycisk typu “radio”

rangeNew Defines a control for entering a number whose exact value is not important (like a slider control)

reset Defines a reset button (resets all form values to default values)

searchNew Defines a text field for entering a search string

submit Defines a submit button

telNew Defines a field for entering a telephone number

text Default. Defines a single-line text field (default width is 20 characters)

timeNew Defines a control for entering a time (no time zone)

urlNew Defines a field for entering a URL

weekNew Defines a week and year control (no time zone)

Reszty nie chce mi się tłumaczyc… torchę tego jest… :wink:

Źródło: http://www.w3schools.com/tags/att_input_type.asp