J. Jambul J. Jambul - 1 year ago 71
HTML Question

How possibly HTML files to retrieve database from MYSQL (using php on the server)?

I want to create form in HTML files. let say it calls index.html ( client will see this page), and the HTML will be included some ajax codes where it links to php (server connect to Mysql)

So that client can do (insert delete edit) to database by inserting form in the index.html. How possibly to do that?. Please give me a simple code so that I can learn. Thank you so much. I found that PHP can link to others php to retrieve the data. But I would love to use HTML instead ,to link to php on the server.

Thank you so much.

edited code

enter code here (this is index.html)
<title>Submit Form Using AJAX PHP and javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var contact = document.getElementById("contact").value;
var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
if (name == '' || email == '' || password == '' || contact == '')
alert("Please Fill All Fields");
//AJAX code to submit form.
type: "POST",
url: "https://../test2.php",
data: dataString,
cache: false,
success: function(html) {
return false;

<div id="mainform">
<div class="innerdiv">
<h2>Submit Form</h2>
//div starts here

<form id="form">
<h3>Fill Your Information!</h3>
<label>Name :</label>
<input type="text" id="name" /><br/>
<label>Email :</label>
<input type="text" id="email"/><br/>
<label>Password :</label>
<input type="password" id="password" /><br/>
<label>Contact No :</label>
<input type="text" id="contact" /><br/>
<input type="button" id="submit" onclick="myFunction()" value="Submit"/>
<div id="clear"></div>

and this is the php.

//Fetching Values from URL
$name2 = $_POST['name1'];
$email2 = $_POST['email1'];
$password2 = $_POST['password1'];
$contact2 = $_POST['contact1'];

$servername = "localhost";
$username = "user";
$password = "userpwd";
$dbname = "dbname";
// Establishing connection with server..
$dbc = mysqli_connect($servername, $username, $password , $dbname)
or die('Error connecting to MySQL server.');

// Selecting Database
if (isset($_POST['name1'])) {
//Insert query
$query = mysqli_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted succesfully";
//connection closed

I don't get it work.

Answer Source

I don't have all the div's you had in there before, but you should be able to add them!

This should work once you put in the right username, password and database name in connection.php

If this doesn't work or isn't what you wanted, please let me know!

This is also up and running at http://emmetstudios.com/form, if you want to see it in operation.

Here's the code, (put it all in the same folder, different files):


function Connect()
 $dbhost = "localhost";
 $dbuser = "yourusername";
 $dbpass = "yourpassword";
 $dbname = "yourdatabasename";

 // Create connection
 $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname) or die($conn->connect_error);

 return $conn;



require 'connection.php';
$conn    = Connect();
$name   = $conn->real_escape_string($_POST['name']);
$email   = $conn->real_escape_string($_POST['email']);
$password   = $conn->real_escape_string($_POST['password']);
$contact   = $conn->real_escape_string($_POST['contact']);

$query = "INSERT into form_element (name,email,password,contact) VALUES('" . $name . "','" . $email . "','" . $password . "','" . $contact . "')";
$success = $conn->query($query);

if (!$success) {
    die("Couldn't enter data: ".$conn->error);


echo "Successful!";




<!DOCTYPE html>


<form id="form" action="success" method="post" onsubmit="return validateForm()" name="upload">

    <input type="text" name="name">          <br><br>

    <input type="text" name="email">         <br><br>

    <input type="password" name="password">      <br><br>

    Phone Number:<br>
    <input type="text" name="contact">       <br><br>

    <input id="submit" type="submit" value="Submit">

function validateForm() {
    var name = document.forms["form"]["name"].value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    var email = document.forms["form"]["email"].value;
    if (email == "") {
        alert("Email must be filled out");
        return false;
    var password = document.forms["form"]["password"].value;
    if (password == "") {
        alert("Password must be filled out");
        return false;
    var contact = document.forms["form"]["contact"].value;
    if (contact == "") {
        alert("contact must be filled out");
        return false;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download