AJAX form met code validatie en opslaan in cookies

0

formulier (HTML/PHP)

<!DOCTYPE html>
<html>
  <head>
	<meta name="robots" content="noindex">
	<title>Saldochecker icm cookie</title>
	<link rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="form.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js" integrity="sha512-iewyUmLNmAZBOOtFnG+GlGeGudYzwDjE1SX3l9SWpGUs0qJTzdeVgGFeBeU7/BIyOZdDy6DpILikEBBvixqO9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
		jQuery(document).ready(function($) {
			$("#reset").click(function(){
				Cookies.remove('codes');
				Cookies.remove('bedrag');
				location.reload();
			}); 
		});
	</script>
</head>
  <body>
	<input type="button" name="reset" id="reset" value="resetten">
	
	<span class="text-danger"><?php echo '&euro; '.number_format($_COOKIE['bedrag'], 2, ',', '.'). '';?></span>
	<div class="col-sm-6 col-sm-offset-3">
	  <h1>Bedrag optellen</h1>

	  <form action="sbmtfrm.php" method="POST">
		<div id="code-group" class="form-group">
		  <label for="code">Code</label>
		  <input type="text" class="form-control" id="code" name="code" placeholder="Voer de code in" />
		</div>

		<button type="submit" class="btn btn-success">
		  Verzenden
		</button>
	  </form>
	</div>
  </body>
</html>

PHP actions (sbmtfrm.php)

<?php

$errors = [];
$data = [];
// Bedrag => Code
$codes = array(
	 "1234" => "500",
	 "2345" => "600",
	 "3456" => "700",
	 "4567" => "800",
	 "5678" => "900",
	 "6789" => "1000",
	 "7890" => "1100",
	 "8901" => "1200",
	 "9012" => "1300",
	 "0123" => "1400",
	 "1245" => "1500",
	 "2356" => "1600",
	 "3467" => "1700",
	 "4578" => "1800",
	 "5689" => "1900",
	 "6790" => "2000",
	 "7891" => "2100",
	 "8902" => "2200",
	 "9013" => "2300",
	 "0124" => "2400",
	 "1235" => "2500",
	 "2346" => "600",
	 "3457" => "700",
	 "4568" => "800",
	 "5679" => "900",
	 "6780" => "1000",
	 "7892" => "1100",
	 "8903" => "1200",
	 "9014" => "1300",
	 "0125" => "1400",
	 "0712" => "2000000",
	 "9837" => "1000000",
	 "3209" => "50000",
	 "2103" => "30000",
	 "0282" => "20000",
	 "0329" => "3000000",
	 "2331" => "0",
	 "8521" => "1500000",
	 "0912" => "100000",
	 "6382" => "65000",
	 "4218" => "400000",
	 "7201" => "5000000",
	 "1022" => "150000",
	 "5892" => "300000",
	 "3392" => "50000",
	 "0291" => "500000",
  );
$codes_formatted = implode("|", array_keys($codes));
$codecheck = preg_match('/\b('.$codes_formatted.')\b/', $_POST['code']);

if(!isset($_COOKIE['bedrag'])) {
	$cookiebedrag = 0;
} else {
	$cookiebedrag = $_COOKIE['bedrag'];
};


if (empty($_POST['code'])) {
	$errors['code'] = 'code is required.';
} elseif(empty($codecheck)){
	$errors['code'] = 'code is onjuist';
} elseif (strpos($_COOKIE['codes'], $_POST['code']) !== false) {
	$errors['code'] = 'Deze code is al gebruikt';
}

if (array_key_exists($_POST['code'], $codes)) {
	  $cookiebedrag += $codes[$_POST['code']];
}

if (!empty($errors)) {
	$data['success'] = false;
	$data['errors'] = $errors;
} else {
	$data['success'] = true;
	if($_COOKIE['codes']):
		$data['cookie'] = $_COOKIE['codes'].'|'.$_POST['code'];
	else:
		$data['cookie'] = $_POST['code'];
	endif;
	$data['bedrag'] = $cookiebedrag;
	$data['message'] = 'Success!';
}

echo json_encode($data);
?>

JS (form.js)

$(document).ready(function () {
  $("form").submit(function (event) {
	$(".form-group").removeClass("has-error");
	$(".help-block").remove();
	var formData = {
	  name: $("#code").val(),
	  code: $("#code").val(),
	};

	$.ajax({
	  type: "POST",
	  url: "sbmtfrm.php",
	  data: formData,
	  dataType: "json",
	  encode: true,
	})
	.done(function (data) {
	  console.log(data);
	  
	  if (!data.success) {	  
		  if (data.errors.code) {
			$("#code-group").addClass("has-error");
			$("#code-group").append(
			  '<div class="help-block">' + data.errors.code + "</div>"
			);
		  }
		} else {
		  $("form").html(
			'<div class="alert alert-success">' + data.message + ' bedrag = ' + data.bedrag + "</div>"
		  );
		  $(".bedrag").html(
			  '<span class="text-danger">' +  data.bedrag + "</span>"
		  );
		  Cookies.set('codes', data.cookie);		  
		  Cookies.set('bedrag', data.bedrag);	
		  location.reload();
		}
	});

	event.preventDefault();
  });
});
Geef een reactie 0