Insert data into MYSQL database using jQuery, Ajax, PHP, MYSQL

Create a HTML form with id=”myform”, action=”userinfo.php”, and method=”post”. Add name and age text fields and add name attribute. Create a button, give it id=”sub”. Finally create a span with id=”result” and close it.

<form id="myform" action="userinfo.php" method="post">
Name:<input type="text" name="name"><br>
Age:<input type="text" name="age"><br>
<button id="sub">Save</button>
<span id="result"></span>

Create a new PHP file name it as userinfo.php. Write database connections and select the database. Now get the posted values in variables. Finally execute the MYSQL statement and echo the output.

<?php
//userinfo.php file
//Database connection
$conn = mysql_connect('localhost','root','');
$db = mysql_select_db('test');

//Posted values
$name = $_POST['name'];
$age = $_POST['age'];

if(mysql_query("Insert into user values('$name', '$age')"))
	echo  "Successfully inserted";
else
	echo "Insertion failed";
?>

Now write the jQuery script, first we need to serialize the data taken from input boxes. Then post them using jQuery post method and append the result in span tags.

$("#sub").click(function(){
var data = $("#myform :input").serializeArray();
$.post( $("#myform").attr("action"), data, function(info){
$("#result").html(info);
clearinput();
});
});

In the above code clearinput() is the function we will talk about it later. Now when the form is submitted it should not redirect to PHP page. So we write the following code.

$("#myform").submit(function(){
return false;
});

Now every thing is fine. But the text fields are to be cleared when form is submitted. So we will write a code to clear the text fields. We will write clearinput() function to clear the fields.

function clearinput(){
$("#myform :input").each(function(){
$(this).val('');
});
}

Now let’s see the full code in one place.

<form id="myform" action="userinfo.php" method="post">
Name:<input type="text" name="name"><br>
Age:<input type="text" name="age"><br>
<button id="sub">Save</button>
<span id="result"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
$("#sub").click(function(){
var data = $("#myform :input").serializeArray();
$.post( $("#myform").attr("action"), data, function(info){
$("#result").html(info);
clearinput();
});
});

$("#myform").submit(function(){
return false;
});

function clearinput(){
$("#myform :input").each(function(){
$(this).val('');
});
}
</script>

Read More...

Create a textarea with word count using jQuery and PHP

First create a textarea and give it id and name. Add text “Word Count:” and a span tag with id “count” like shown below.

<textarea cols="20" rows="5" name="textarea" id="textarea"></textarea>
<br>Word count: <span id="count"></span>

Now we will write jQuery code so you need to add jQuery library.  We will use the keyup event in the jQuery to call function. So whenever key is released we will call anonymous function to execute the code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#textarea").keyup(function(){

});
</script>

Here we are calling a function whenever we type a character in textarea ie., to count number of words typed in the textarea. Now whenever we type character in textarea we need to count number of words present in the textarea.

We have a built-in function in PHP to count the number of words. So now we should send the typed words to the PHP script and get the output. We can do this using jQuery ajax method.

$.ajax({
    url: 'count.php',
    type: "POST",
    data: {textarea:$("#textarea").val()},
    dataType :'html',
    success: function(result){
        $("#count").empty();
        $("#count").append(result);

    },
    error: function(){
        alert("Ahh! something went wrong. Please try again after sometime.");
    }   
});

In the above code we are sending the data typed in the textarea to count.php file. If success append it to span tag else alert a message. Let’s see the count.php file.

<?php
$str = $_POST['textarea'];
$count = str_word_count($str);
echo $count;
?>

Since we are sending values using post method we are using $_POST in php to store the value in variable. str_word_count will count the number of words in variable $str. Finally output is echoed.

Let’s see the final code.

<textarea cols="20" rows="5" name="textarea" id="textarea"></textarea>
<br>Word count: <span id="count"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#textarea").keyup(function(){

$.ajax({
    url: 'count.php',
    type: "POST",
    data: {textarea:$("#textarea").val()},
    dataType :'html',
    success: function(result){
	$("#count").empty();
	$("#count").append(result);
    },
    error: function(){
	alert("Ahh! something went wrong. Please try again after sometime.");
    }   
});
</script>

Read More...

Convert comma separated words into an array

Sometimes we want to convert a string into an array. String is comma separated words like adam, adam@yahoo.com, male.

You can do the string to array conversion easily with explode function in PHP.

<?php
$myString = "adam,adam@yahoo.com,male";
$myArray = explode(',', $myString);
print_r($myArray);
?>

Output:

Array
(
    [0] => adam
    [1] => adam@yahoo.com
    [2] => male
)

This way you can convert string into array.

Read More...