How to create html profile form which saves information to database

  • I’m trying to create an html user registration form which stores information to a database and is displayed on the front end. It’s the dating section of a classifieds site so the idea is user will input info, this would be validated on pressing submit, then send user to a page successful registration. The data gathered would be sent to server database and retrievable by user clicking on their own profile link or someone else clicking on their profile.

    This is how far I’ve got.

    Form:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration</title>
</head>
<body>

<form name="reg" action="code_exec.php" onsubmit="return validateForm()" method="post">
? <table width="274" border="0" align="center" cellpadding="2" cellspacing="0">
??? <tr>
????? <td colspan="2">
??????? <div align="center">
????????? <?php 
????????? // $remarks=$_GET['remarks'];
????????? if (!isset($_GET['remarks']))
????????? {
??????????? echo 'Register Here';
????????? }
????????? if (isset($_GET['remarks']) && $_GET['remarks']=='success')
????????? {
??????????? echo 'Registration Success';
????????? }
????????? ?>? 
??????? </div></td>
????? </tr>
????? <tr>
??????? <p>

            
             <div class="gddlabel"><td><label for="gddlabel">You're:</label></div>
<div class="gdd"><select id ="genderselection">
               <option value = "1">I am a man looking for a woman</option>
               <option value = "2">I am a woman looking for a man</option>
               <option value = "3">I am a man looking for a man</option>
               <option value = "4">I am a woman looking for a woman</option>
               <option value = "5">I am a man looking for both</option>
               <option value = "6">I am a woman looking for both</option>
             </select></td><td><name="genderselection"/></td></div>
<tr>
</tr>
<br>
<div class="af"><td><label for="agefrom">Age From:</label></div>
             <div class="af1"><select id = "agefrom">
               <option value = "1">18</option>
               <option value = "2">19</option>
               <option value = "3">20</option>
               <option value = "4">21</option>
               <option value = "5">22</option>
               <option value = "6">23</option>
               <option value = 
"6">23</option>
               <option value = "7">24</option>
               <option value = "8">25</option>
               <option value = "9">26</option>
               <option value = "10">27</option>
               <option value = "12">28</option>
               <option value = "13">29</option>
               <option value = "14">30</option>
               <option value = "15">31</option>
               <option value = "16">32</option>
               <option value = "17">33</option>
               <option value = "18">34</option>
               <option value = "19">35</option>
               <option value = "20">36</option>
               <option value = "21">37</option>
               <option value = "22">38</option>
               <option value = "23">39</option>
               <option value = "24">40</option>
               <option value = "25">41</option>
               <option value = "26">42</option>
               <option value = "27">43</option>
               <option value = "28">44</option>
               <option value = "29">45</option>
               <option value = "30">46</option>
               <option value = "31">47</option>
<option value = "32">48</option>
<option value = "33">49</option>
<option value = "34">50</option>
<option value = "35">51</option>
<option value = "36">52</option>
<option value = "37">53</option>
<option value = "38">54</option>
<option value = "39">55</option>
<option value = "40">56</option>
<option value = "41">57</option>
<option value = "42">58</option>
<option value = "43">59</option>
<option value = "44">60</option>
<option value = "45">61</option>
<option value = "46">62</option>
<option value = "47">63</option>
<option value = "48">64</option>
<option value = "49">65</option>
<option value = "50">66</option>
<option value = "51">67</option>
<option value = "52">68</option>
<option value = "53">69</option>
<option value = "54">70</option>
<option value = "55">71</option>
<option value = "56">72</option>
<option value = "57">73</option>
<option value = "58">74</option>
<option value = "59">75</option>
<option value = "60">76</option>
<option value = "61">77</option>
<option value = "62">78</option>
             </select></td><td><name="agefrom"/></td></div>
</tr>
<tr>
<div class="at"><td><label for="ageto" >Age  To:</label></div>
             <div class="at1"><select id = "ageto">
               
<option value = "1">18</option>
               <option value = "2">19</option>
               <option value = "3">20</option>
               <option value = "4">21</option>
               <option value = "5">22</option>
               <option value = "6">23</option>
               <option value = 
"6">23</option>
               <option value = "7">24</option>
               <option value = "8">25</option>
               <option value = "9">26</option>
               <option value = "10">27</option>
               <option value = "12">28</option>
               <option value = "13">29</option>
               <option value = "14">30</option>
               <option value = "15">31</option>
               <option value = "16">32</option>
               <option value = "17">33</option>
               <option value = "18">34</option>
               <option value = "19">35</option>
               <option value = "20">36</option>
               <option value = "21">37</option>
               <option value = "22">38</option>
               <option value = "23">39</option>
               <option value = "24">40</option>
               <option value = "25">41</option>
               <option value = "26">42</option>
               <option value = "27">43</option>
               <option value = "28">44</option>
               <option value = "29">45</option>
               <option value = "30">46</option>
               <option value = "31">47</option>
<option value = "32">48</option>
<option value = "33">49</option>
<option value = "34">50</option>
<option value = "35">51</option>
<option value = "36">52</option>
<option value = "37">53</option>
<option value = "38">54</option>
<option value = "39">55</option>
<option value = "40">56</option>
<option value = "41">57</option>
<option value = "42">58</option>
<option value = "43">59</option>
<option value = "44">60</option>
<option value = "45">61</option>
<option value = "46">62</option>
<option value = "47">63</option>
<option value = "48">64</option>
<option value = "49">65</option>
<option value = "50">66</option>
<option value = "51">67</option>
<option value = "52">68</option>
<option value = "53">69</option>
<option value = "54">70</option>
<option value = "55">71</option>
<option value = "56">72</option>
<option value = "57">73</option>
<option value = "58">74</option>
<option value = "59">75</option>
<option value = "60">76</option>
<option value = "61">77</option>
<option value = "62">78</option>

</select></td><td><name="ageto"/></td></div>
	</tr>
<tr>
<div class="ydob"><td><label for="yourdateofbirth">Your Date of Birth:</label></div>
<br>
<br>
<div class="ydobd"><label for="day" >Day:</label></div>
<div class="ydobd1"><select id ="Day">
               <option value = "1">1</option>
               <option value = "2">2</option>
               <option value = "3">3</option>
               <option value = "4">4</option>
               <option value = "5">5</option>
               <option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
<option value = "13">13</option>
<option value = "14">14</option>
<option value = "15">15</option>
<option value = "16">16</option>
<option value = "17">17</option>
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
<option value = "25">25</option>
<option value = "26">26</option>
<option value = "27">27</option>
<option value = "28">28</option>
<option value = "29">29</option>
<option value = "30">30</option>
<option value = "31">31</option>
             </select></td><td><name="day"/></td></div>
</tr>
<tr>
<div class="ydobm"><td><label for="month">Month:</label></div>
             <div class="ydobm1"><select id = "month">
               <option value = "1">1</option>
               <option value = "2">2</option>
               <option value = "3">3</option>
               <option value = "4">4</option>
               <option value = "5">5</option>
               <option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
             </select></td><td><name="month"/></td></div>
</tr>
<tr>
<div class="ydoby"><td><label for="year">Year:</label></div>
             <div class="ydoby1"><select id = "year">
               <option value = "1">2001</option>
               <option value = "2">2000</option>
               <option value = "3">1999</option>
               <option value = "4">1998</option>
               <option value = "5">1997</option>
               <option value = "6">1996</option>
<option value = "7">1995</option>
<option value = "8">1994</option>
<option value = "9">1993</option>
<option value = "10">1992</option>
<option value = "11">1991</option>
<option value = "12">1990</option>
<option value = "13">1989</option>
<option value = "14">1988</option>
<option value = "15">1987</option>
<option value = "16">1986</option>
<option value = "17">1985</option>
<option value = "18">1984</option>
<option value = "19">1983</option>
<option value = "20">1982</option>
<option value = "21">1981</option>
<option value = "22">1980</option>
<option value = "23">1979</option>
<option value = "24">1978</option>
<option value = "25">1977</option>
<option value = "26">1976</option>
<option value = "27">1975</option>
<option value = "28">1974</option>
<option value = "29">1973</option>
<option value = "30">1972</option>
<option value = "31">1971</option>
<option value = "32">1970</option>
<option value = "33">1969</option>
<option value = "34">1968</option>
<option value = "35">1967</option>
<option value = "36">1966</option>
<option value = "37">1965</option>
<option value = "38">1964</option>
<option value = "39">1963</option>
<option value = "40">1962</option>
<option value = "41">1961</option>
<option value = "42">1960</option>
<option value = "43">1959</option>
<option value = "44">1958</option>
<option value = "45">1957</option>
<option value = "46">1956</option>
<option value = "47">1955</option>
<option value = "48">1954</option>
<option value = "49">1953</option>
<option value = "50">1952</option>
<option value = "51">1951</option>
<option value = "52">1950</option>
<option value = "53">1949</option>
<option value = "54">1948</option>
             </select></td><td><name="year"/></td></div>
</tr>
????? <tr>
??????<div class="ye">
          Your Email
        </div>
      </td>
      <td>
        <div class="ye1">
          <input type="text" name="email" />
        </div>
      </tr>
????? <tr>
        <div class="un">
          Username
        </div>
      </td>
      <td>
        <div class="un1">
          <input type="text" name="username" />
        </div>
????? </tr>
????? <tr>
        <div class="pw">
          Password
        </div>
      </td>
      <td>
        <div class="pw1">
          <input type="text" name="password"/>
        </div>
????? </tr>
????? <tr>
??????? <div class="sub"></td></div>
??????? <div class="sub1"><td><input name="submit" type="submit" value="Submit"/></td></div>
????? </tr>
??? </table>
? </form>
</body>
</html>

    I put this form in the page I want it to be on my WordPress site.

    Then in phpmyadmin I created a table called simple_login with a database called xxxxx_dating

    Then I clicked SQL and pasted the following code.

    CREATE TABLE IF NOT EXISTSmember` (
    mem_id int(11) NOT NULL AUTO_INCREMENT,
    username varchar(30) NOT NULL,
    password varchar(30) NOT NULL,
    fname varchar(30) NOT NULL,
    lname varchar(30) NOT NULL,
    address varchar(100) NOT NULL,
    contact varchar(30) NOT NULL,
    picture varchar(100) NOT NULL,
    gender varchar(10) NOT NULL,
    PRIMARY KEY (mem_id)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3`

    Then in puplic html—-themes-my theme I created a file called connections

    In this file I pasted: 

    <?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "registration";
$prefix = "";
 
$bd = mysqli_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysqli_select_db($bd, $mysql_database) or die("Could not select database");
?>

    Then saved.

    Next I created a file called code_exec.php, and also saved in public html, my theme, pasting: 

    <?php
session_start();

include('connection.php');

$genderselection=$_POST['genderselection'];
$agefrom=$_POST['agefrom'];
$ageto=$_POST['ageto'];
$day=$_POST['day'];
$month=$_POST['month'];
$year=$_POST['year'];
$email=$_POST['email'];
$username=$_POST['username'];
$password=$_POST['password'];

mysqli_query($bd, "INSERT INTO member(fname, lname, gender, address, contact, picture, username, password)VALUES('$fname', '$lname', '$mname', '$address', '$contact', '$pic', '$username', '$password')");

header("location: index.php?remarks=success");

mysqli_close($con);
?>

    Saved.

    Then I pasted in the head tag of index.php:

    <script type="text/javascript">
? function validateForm()
? {
??? var a=document.forms["reg"]["genderselection"].value;
??? var b=document.forms["reg"]["agefrom"].value;
??? var c=document.forms["reg"]["ageto"].value;
??? var d=document.forms["reg"]["month"].value;
??? var e=document.forms["reg"]["day"].value;
??? var f=document.forms["reg"]["username"].value;
??? var g=document.forms["reg"]["password"].value;
? var h=document.forms["reg"]["year"].value;
? var i=document.forms["reg"]["email"].value;
??? if ((a==null || a=="") && (b==null || b=="") && (c==null || c=="") && (d==null || d=="") && (e==null || e==""))
??? {
????? alert("All Field must be filled out");
????? return false;
??? }
??? if (a==null || a=="")
??? {
????? alert("First name must be filled out");
????? return false;
??? }
??? if (b==null || b=="")
??? {
????? alert("Last name must be filled out");
????? return false;
??? }
??? if (c==null || c=="")
??? {
????? alert("Gender name must be filled out");
????? return false;
??? }
??? if (d==null || d=="")
??? {
????? alert("address must be filled out");
????? return false;
??? }
??? if (e==null || e=="")
??? {
????? alert("contact must be filled out");
????? return false;
??? }
??? if (f==null || f=="")
??? {
????? alert("username must be filled out");
????? return false;
??? }
??? if (g==null || g=="")
??? {
????? alert("password must be filled out");
????? return false;
??? }
? }
</script>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter adsler26

    (@adsler26)

    This didn’t work. Where am I going wrong? Thanks.

    Thread Starter adsler26

    (@adsler26)

    *correction, – table actually reads:

    CREATE TABLE IF NOT EXISTS member( mem_id int(11) NOT NULL AUTO_INCREMENT, genderselection varchar(30) NOT NULL, password varchar(30) NOT NULL, agefrom varchar(30) NOT NULL, ageto varchar(30) NOT NULL, day varchar(100) NOT NULL, month varchar(30) NOT NULL, email varchar(100) NOT NULL, gender varchar(10) NOT NULL, PRIMARY KEY (mem_id) )ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create html profile form which saves information to database’ is closed to new replies.