tash517 tash517 - 5 months ago 40
jQuery Question

Insert data to cpanel database

So I'm working on this project where users can sign up for the newsletter and their names get added to the online database. I am using the online database (CPanel - PhPMyAdmin) I've been stuck on what type of code am I supposed to use to add this data from my form to the database.

This is what I have so far and I'm not quite sure how to go from here. Any help is appreciated.

ALSO: I'm using Bootstrap3 and jquery/ajax

<div id="newsletter" class="container-fluid text-center">
<h3>NEWSLETTER</h3>

<form id="signup-form" action="" method="">
<div class="input-prepend" ><span class="add-on"><i class="glyphicon glyphicon-user"></i></span>
<label for="name">Your Full Name</label>
<input type="text" id="name" name="name" placeholder="your full name" size="40" style="color:black;" class="validate" required>
</div>

<div class="input-prepend"><span class="add-on"><i class="glyphicon glyphicon-envelope"></i></span>
<label for="email">Your Email</label>
<input type="email" id="email" name="email" placeholder="your@email.com" size="40" style="color:black;"class="validate" required>
</div>

<button id="sub" type="submit" class="btn btn-large"> Sign Up!</button>
</form>
<br/>

</div>

Answer

You can use Ajax

Example -

$('#button').click(function() {//give id of submit button 
    var val1 = $('#text1').val();//get value you need to post
    var val2 = $('#text2').val();//get value you need to post
    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: { text1: val1, text2: val2 },
        success: function(response) {
            $('#result').html(response);//responce you recevied 
        }
    }); });

Get both values using Post method. Perform your action and send true false in the result.

---------------Explaning in deep with new example----------------

HTML File: ajaxsubmit.html

<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>

PHP File: ajaxsubmit.php

<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("mydba", $connection); // Selecting Database
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
$query = mysql_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
mysql_close($connection); // Connection Closed
?>

jQuery File: script.js

$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});

MY-SQL Code Segment:

CREATE DATABASE mydba;
CREATE TABLE form_element(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
contact varchar(255) NOT NULL,
PRIMARY KEY (id)
)