Loading...

Follow PHPCluster Blog on Feedspot

Continue with Google
Continue with Facebook
or

Valid
PHPCluster Blog by Vikash Kumar Singh - 2M ago

When we work on web services it is generally required to send json data via POST method.

In this tutorial we will see how to post json data with PHP curl.

It is very easy to post data in json form using header Content-Type: application/json in CURLOPT_HTTPHEADER.

Here we put data in PHP array and encode into a JSON string using json_encode() function.

Let’s see how to send json data via post method

<?php 

$url = 'https://www.website.com/ws/filename.php';

$data = array("first_name" => "First name","last_name" => "last name","email"=>"myemail@gmail.com");

$data_string = json_encode($data);

$ch = curl_init($url);

curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$result = curl_exec($ch);

$err = curl_error($ch); 

curl_close($ch);

if ($err) {
 echo "cURL Error #:" . $err;
}  else {
 return $result;   //display response 
} 

?> 
 

Also Read: How to Receive JSON POST with PHP

Facebook Twitter Google+ WhatsApp LinkedIn

The post How to POST JSON Data With PHP cURL appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Recently I was working on a project and there is a requirement came in front of me.

The requirement was to change the date format of input type date field. I had tried to change, but it hasn’t worked. So, I had used bootstrap datepicker.

Bootstrap datepicker is very good because it allows you to change the format as per your requirements.

So, I am going to share how you can change the date format of datepicker.

Let’s see.

Step 1. First include jQuery library

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

Step 2. Include Bootstrap Datepicker component

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script> 

Step 3. Write markup to create an input field

<input type="text" id="from-datepicker"/>  

Step 4. Write Script to Add Datepicker Functionality

<script> 
$( document ).ready(function() {
$("#from-datepicker").datepicker({
format: 'yyyy-mm-dd' //can also use format: 'dd-mm-yyyy'
});
});
</script>

Now you can change datepicker format with the above given script. If you have any query feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post Change the Date Format to yyyy-mm-dd in Datepicker appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
PHPCluster Blog by Vikash Kumar Singh - 3M ago

We all know that $_POST is used to collect post data in PHP. That’s true. But when we try to get JSON post data using $_POST then it fails.

Recently I was working on project and need to receive JSON POST with PHP. I had expected that JSON POST data in $_POST superglobal variable but variable was empty.

Then how can we receive JSON POST data using PHP.

Finally to receive JSON string, I used php://input along with file_get_contents function.

Let’s see

// takes raw data from the request 
$json = file_get_contents('php://input');

// Converts it into a PHP object
$data = json_decode($json);

php://input is used to read raw data from the request body.

File_get_contents function is used to read a file source and returns it as PHP string.

So we can write a single line of code to get body of POST in PHP. Have a look.

// Receive the JSON Post data in form of array
$data = json_decode( file_get_contents( 'php://input' ), true );

Read : Send Form Data as JSON via AJAX with JQuery

So you have learned that JSON POST data can not be received using $_POST variable. If you have any query regarding this article, feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post How to Receive JSON POST with PHP appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
PHPCluster Blog by Vikash Kumar Singh - 4M ago

This tutorial is all about creating form using JavaScript.

In this tutorial, we are going to see how to create simple html form using JavaScript step by step.

So if you want to create a form dynamically with javascript, you must read this tutorial.

Live Demo

First we write HTML markup.

HTML
<html>   
<body>
<div id="formcontent">
</div>
</body>
</html>
JavaScript

Here we write script to create form and append it above div.

<script> 
var content = document.getElementById("formcontent");
var url = 'http://www.phpcluster.com';
var form = document.createElement("form");
form.setAttribute('method', 'post');
form.setAttribute('action', url);
form.setAttribute('target', 'pclu');

// Create an input
var heading = document.createElement('h2'); // Heading of Form heading.innerHTML = "Form ";
form.appendChild(heading);

var linebreak = document.createElement('br');
form.appendChild(linebreak);

var namelabel = document.createElement('label'); // Create Label for Name Field namelabel.innerHTML = "Name : "; // Set Field Labels form.appendChild(namelabel);
var inputelement = document.createElement('input'); // Create Input Field for Name inputelement.setAttribute("type", "text"); inputelement.setAttribute("name", "name");
form.appendChild(inputelement);

var linebreak = document.createElement('br');
form.appendChild(linebreak);

var emaillabel = document.createElement('label'); // Create Label for E-mail Field emaillabel.innerHTML = "Email : ";
form.appendChild(emaillabel); var inputelement = document.createElement('input'); // Create Input Field for Name inputelement.setAttribute("type", "email"); inputelement.setAttribute("name", "email");
form.appendChild(inputelement);

var linebreak = document.createElement('br');
form.appendChild(linebreak);

var inputbutton = document.createElement('input'); // Create Input Field for Name
inputbutton.setAttribute("type", "button"); inputbutton.setAttribute("name", "submit"); inputbutton.setAttribute("value", "Submit");
form.appendChild(inputbutton);
content.appendChild(form); </script>

Hope you have created your own form using JavaScript. If you have any query feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post Create HTML Form with JavaScript appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
PHPCluster Blog by Vikash Kumar Singh - 4M ago

We always use a button in HTML form for submission. When a website responds slow to user after click on the button then, user click multiple times on it.

Multiple click on the submit button, send multiple request to the server for processing which is not good for any web application.

This tutorial will help you to understand how to prevent multiple click on submit button using jQuery.

In this tutorial, using jquery disable button after the click and prevent from form submission again.

This will help you to disable button after a click for a few seconds. You can change them as per your need.

Live Demo

Let’s see snippet

HTML
<input type='button' id="btn" value="Click"/>  
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script>
$(document).ready(function(){
$('#btn').click(function() {
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function() {
btn.prop('disabled', false);
},5000); // enable after 5 seconds
});
}); </script>

Hope you have learned how to prevent multiple clicks on submit button in jquery . If you have any query regarding this tutorial, feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post jQuery Disable Button After Click appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

We see on off switch button on many website and also use it on some sites for any action.

Doing an action coders think how do I toggle Show hide in jQuery.

In this tutorial, we are going to see how to create a toggle button with jQuery.

This article will help you to understand how to create toggle switch with jquery or how to use flip switch button in web application.

Simple Ajax Pagination With jQuery and PHP

Switch toggle button mainly worked on true and false condition. Suppose when user switch button from on status to off it means true to false. When user switch button from OFF to ON it means false to true;

ON  = TRUE

OFF = FALSE

So lets see script to understand how to create a toggle button.

HTML
<input type="checkbox" id="switch" value="false" /> 
<label for="switch" >OFF</label>
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script>
var switchStatus = false;
$("#switch").on('change', function() {
if ($(this).is(':checked')) {
switchStatus = $(this).is(':checked');
$(this).val(switchStatus);
$('.status').css('text-align','left');
$('.status').html('ON');
}
else {
switchStatus = $(this).is(':checked');
$(this).val(switchStatus);
$('.status').css('text-align','right');
$('.status').html('OFF');
}
});
</script>
CSS
<style>
input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	padding: 1px;
	text-align:right;
    line-height: 22px;
	cursor: pointer;
	width: 70px;
    height: 26px;
	background: grey;
	display: block;
	border-radius: 20px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 20px;
	transition: 0.3s;
}

input:checked + label {
	background: green;
}

input:checked + label:after {
	left: calc(100% - 25px);
}


label:active:after {
	width: 20px;
}
</style>
 

Hope you have learned how to create toggle button with jQuery. If you have query or problem feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post How To Create a Toggle Button With jQuery appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Do you want to Redirect website after certain amount of time or Page redirect after certain time PHP.

In this tutorial, we will see how to redirect a page after 5 seconds using PHP, JavaScript and Meta tags.

Here are some basic concept to redirect a page after some time. These function also allow to change delay time.

How To Redirect If JavaScript Is Disabled In A Browser

Let’s see snippet to get it better.

Redirect using PHP.
<?php
header( "refresh:5;url=http://www.phpcluster.com" );
?>
Redirect using JavaScript.  
<script type="text/javascript">
 setTimeout(function(){
     window.location="http://www.phpcluster.com";
   },5000);
</script> 
Redirect Using Meta Tag
<meta http-equiv="refresh" content="5;url=http://www.phpcluster.com"> 

Hope you have learned how to Redirect a page after a few seconds using PHP JavaScript and meta tags. If you have any query feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post Redirect Page after Certain Time using PHP, JavaScript or META Tag appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

HTML have an attribute option to open URL in a new tab.

The target attribute basically decide where to open linked anchor.In this tutorial, we will see how to open a URL in new tab using JavaScript.

Window.open function is used to open linked document in new tab. In this function, second param is optional which allow to add attribute.

window.open("http://www.phpcluster.com","_blank"); 

Pass URL in first param and attribute in second param to open URL in new tab or window using  JavaScript.

Recommended Tutorials For You

Amount Field Validation Using JavaScript

How To Redirect If JavaScript Is Disabled In A Browser

Facebook Twitter Google+ WhatsApp LinkedIn

The post Open a URL in a New tab Using JavaScript appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

This post will help you to understand how to create simple Ajax pagination with jQuery and PHP.

Webpage takes a lot of time to load data when there is huge record in database. To solve this issue, we use pagination to load record smoothly.

In this tutorial, we will see AJAX Pagination with jQuery and PHP. User can see record without reloading the page.

You can also like

Simple Pagination with PHP and MySQL.

Steps

  1. Create a database connection file
  2. Write Markup to Load and display results
  3. Show Pagination Format
  4. Show Pagination Results via AJAX
  5. Process AJAX Pagination Results in PHP

Let’s see how to create ajax pagination.

Database Connection
<?php  
$dbname = "test";
$dbuser = "root";
$dbpw = "";
$dbhost = "localhost";
$conn = mysqli_connect($dbhost, $dbuser, $dbpw, $dbname); // Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
Write Markup to Load and display results
<div id="content"></div> 
Show Pagination Format
<?php   
include_once 'config.php';
$sql = mysqli_query($conn, "SELECT course_id FROM courses");
$total_records = mysqli_num_rows($sql);
$limit = 10;
$total_pages = ceil($total_records / $limit);

//start pagination
$PaginationLinks = "<ul >";

for ($i=1; $i<=$total_pages; $i++) {
$PaginationLinks .= "<li><a href='".$_SERVER['PHP_SELF']."?page=".$i."' onclick='getResults(".$i.")'>".$i."</a></li>";
}

$PaginationLinks .= "</ul>"; //end pagination

//show pagination
echo $PaginationLinks;
?>
Show Pagination Results via AJAX

First include jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<script> 
$(document).ready(function(){
$(".link").click(function(e){
e.preventDefault();
});
});

function getResults(page) {
$.ajax({
type: "GET",
url: "result.php",
data: {page : page},
cache: false,
success: function(html) {
$("#content").html(html);
}
});
}

//default homepage content loading
getResults(1);
</script>
Process AJAX Pagination Results in PHP
<?php  
include_once 'config.php';
$limit = 10;
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$start_from = ($page-1) * $limit;
$sql = mysqli_query($conn, "SELECT * FROM courses LIMIT $start_from, $limit");
?>

<table >
<thead>
<tr><th>ID</th><th>Name</th></tr>
<thead>
<tbody>
<?php while($row = mysqli_fetch_array($sql)) {
?>
<tr>
<td><?php echo $row["course_id"]; ?></td>
<td><?php echo $row["course_name"]; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

View Demo

Facebook Twitter Google+ WhatsApp LinkedIn

The post Simple Ajax Pagination With jQuery and PHP appeared first on PHPCluster.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

When we use an Ajax request in a webpage for loading content without page reload, the two most common term comes to use that is content type and datatype.

So before using these things in Ajax request we should understand what is the use of content type and datatype in Ajax request.

Let’s see these terms in detail.

Content Type :

This is type of data which we send to server.

Commonly application/json is used as content Type.

ex.

contentType: “application/json”

DataType :

This is type of data which we expect back from Server.

ex.

Json, html, text etc

Also Read:

How to Make AJAX Call on Same Page
Ajax Contact Form Using jQuery and PHP
Ajax Image Upload With jQuery and PHP

How to Use Content-type and datatype in AJAX Call.

Content-type and datatype example.

$.ajax({     
type : "POST",
url : "filename.php",
dataType : "text",
contentType: "application/json",
data : dataValue,
success : function() {
},
error : function(error) {
}
});

Hope you have understand what is difference between dataType and contentType in jQuery Ajax Call. If you any question regarding this article, feel free to comment.

Facebook Twitter Google+ WhatsApp LinkedIn

The post What is Content Type and Datatype in AJAX Call appeared first on PHPCluster.

Read Full Article

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview