agungsijawir · December 17, 2015 14:39
diff --git a/index.php b/index.php
 <!-- BEGIN OF index.php file -->
 <?php
    $con=mysqli_connect("localhost","root","","test");
    // Check connection
    if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }
 	
    $result = mysqli_query($con,"SELECT * FROM `imam`");
 	
    while($row = mysqli_fetch_array($result)) {
        $checkData = $row['headerCheck'];
        $checkDataHeader = $row['headerData'];
    }
 ?>

 <html>
 <head>
 	<title>Header?</title>
 	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 	<script type="text/javascript" charset="utf-8">
 		$(document).ready(function() {
 			/* this is when page is loaded, sorry bad structure */
 			if($('#headerCheck:checked').length) {
 				$("#headerCheckData").show();
 			} else {
 				$("#headerCheckData").hide();
 			}
 			
 			$("#headerCheck").click(function() {
 				if($('#headerCheck:checked').length) {
 					$("#headerCheckData").show();
 				} else {
 					$("#headerCheckData").hide();
 				}
 			});
 		})
 	</script>
 </head>

 <body>
 <form action="checkbox.php" method="post">
 	<div id="check">
 		Do you need header? <br/>
 		<!-- 
 			place 'id' property for each object, so jQuery can recognize it. 
 			and place 'name' property for each object, so php can process it.
 		-->
 		<input type="checkbox" name="headerCheck" id="headerCheck" <?php if ($checkData != NULL) { echo "checked"; } ?>/><label for="headerCheck">Header?</label> <br/>
 		<textarea rows="4" cols="50" id="headerCheckData" name="headerCheckData"><?php echo $checkDataHeader; ?></textarea> 
 		
 		<br/>
 		<input type="submit" name="submit" value="Submit" />
 	</div>
 </form>

 </body>
 </html>

 <?php mysqli_close($con); ?>

 <!-- END OF index.php file -->

 <!-- BEGIN OF checkbox.php file -->
 <?php
    $con=mysqli_connect("localhost","root","","test");
 	// Check connection
 	if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }

 	
 	// if the headerCheck is not checked, the data will be null, otherwise, will be 'on' value
 	$checkData = $_POST['headerCheck'];
 	$checkDataHeader = htmlspecialchars($_POST['headerCheckData'], ENT_QUOTES);
 	
 	// save to mysql
 	mysqli_query($con,"UPDATE `imam` SET headerCheck='$checkData', headerData = '$checkDataHeader ';");

 	if(isset($checkData) && $checkData == 'on') {
 		// basically, i have no idea why you should add condition OR
 		// to this: $_POST['headerCheck'] == 'yes'
 		// because, when you try to debug with $_POST['headerCheck'], you will get 'on' value when checkbox is checked.
 		echo "Header is needed. The header checkbox data is: " . $checkData . "<br/>";
 		echo "Header data are:<br/>" . $checkDataHeader;
 	} else {

 		echo "Do not need header at all.";
 	}    
 	mysqli_close($con);
 ?>
 <!-- END OF checkbox.php file -->

 <!-- 
    please take care of MySQL Script below
    I use database 'test' & table 'imam'

    create table `imam` (
        `headerCheck` varchar ,
    	`headerData` varchar 
    ); 
    insert into `imam` (`headerCheck`, `headerData`) values('',' here will be data');

 -->
	<!-- BEGIN OF index.php file -->
	<?php
	$con=mysqli_connect("localhost","root","","test");
	// Check connection
	if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }

	$result = mysqli_query($con,"SELECT * FROM `imam`");

	while($row = mysqli_fetch_array($result)) {
	$checkData = $row['headerCheck'];
	$checkDataHeader = $row['headerData'];
	}
	?>

	<html>
	<head>
	<title>Header?</title>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
	/* this is when page is loaded, sorry bad structure */
	if($('#headerCheck:checked').length) {
	$("#headerCheckData").show();
	} else {
	$("#headerCheckData").hide();
	}

	$("#headerCheck").click(function() {
	if($('#headerCheck:checked').length) {
	$("#headerCheckData").show();
	} else {
	$("#headerCheckData").hide();
	}
	});
	})
	</script>
	</head>

	<body>
	<form action="checkbox.php" method="post">
	<div id="check">
	Do you need header? <br/>
	<!--
	place 'id' property for each object, so jQuery can recognize it.
	and place 'name' property for each object, so php can process it.
	-->
	<input type="checkbox" name="headerCheck" id="headerCheck" <?php if ($checkData != NULL) { echo "checked"; } ?>/><label for="headerCheck">Header?</label> <br/>
	<textarea rows="4" cols="50" id="headerCheckData" name="headerCheckData"><?php echo $checkDataHeader; ?></textarea>

	<br/>
	<input type="submit" name="submit" value="Submit" />
	</div>
	</form>

	</body>
	</html>

	<?php mysqli_close($con); ?>

	<!-- END OF index.php file -->

	<!-- BEGIN OF checkbox.php file -->
	<?php
	$con=mysqli_connect("localhost","root","","test");
	// Check connection
	if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }


	// if the headerCheck is not checked, the data will be null, otherwise, will be 'on' value
	$checkData = $_POST['headerCheck'];
	$checkDataHeader = htmlspecialchars($_POST['headerCheckData'], ENT_QUOTES);

	// save to mysql
	mysqli_query($con,"UPDATE `imam` SET headerCheck='$checkData', headerData = '$checkDataHeader ';");

	if(isset($checkData) && $checkData == 'on') {
	// basically, i have no idea why you should add condition OR
	// to this: $_POST['headerCheck'] == 'yes'
	// because, when you try to debug with $_POST['headerCheck'], you will get 'on' value when checkbox is checked.
	echo "Header is needed. The header checkbox data is: " . $checkData . "<br/>";
	echo "Header data are:<br/>" . $checkDataHeader;
	} else {

	echo "Do not need header at all.";
	}
	mysqli_close($con);
	?>
	<!-- END OF checkbox.php file -->

	<!--
	please take care of MySQL Script below
	I use database 'test' & table 'imam'

	create table `imam` (
	`headerCheck` varchar ,
	`headerData` varchar
	);
	insert into `imam` (`headerCheck`, `headerData`) values('',' here will be data');

	-->