JSFiddle - React, Tailwind, and code Playground

by anonwebdev

HTML

<?php

session_start();

if(!isset($_SESSION['user_auth'])) {
    header('Location: ../');
    exit;
} else include('../dbconfig.php');

?>
<div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-10 col-md-offset-1">
                    <form action="add_note_script.php" method="post" class="form-horizontal">
                        <fieldset>
                            <legend>Dodaj notatkę</legend>
                            <div class="form-group" id="title-group">
                                <label for="note_title" class="col-md-2 control-label">Tytuł</label>
                                <div class="col-md-10">
                                    <input type="text" name="note_title" id="note_title" class="form-control" placeholder="Tytuł">
                                </div>
                            </div>
                            <div class="form-group" id="content-group">
                                <label for="note_content" class="col-md-2 control-label">Treść</label>
                                <div class="col-md-10">
                                    <textarea class="form-control" rows="3" id="note_content" name="note_content" placeholder="Treść"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Kolor</label>
                                <div class="col-md-4">
                                    <div class="radio radio-primary">
                                        <label>
                                            <input type="radio" name="note_color" id="note_color_1" value="" checked>
                                            Czarny
                                        </label>
                                    </div>
                                    <div class="radio radio-primary">
                         ...

JavaScript

// add_note_script.js
$(document).ready(function() {

	// process the form
	$('form').submit(function(event) {

		$('.form-group').removeClass('has-error'); // remove the error class
		$('.help-block').remove(); // remove the error text        
		$('.alert').remove(); // remove the alert block

		// get the form data
		// there are many ways to get this data using jQuery (you can use the class or id also)
		var formData = {
			'note_title'        : $('input[name=note_title]').val(),
            'note_content'      : $('textarea[name=note_content]').text(),
			'note_color'        : $('input[name=note_color]').val()
		};
        
        console.log(note_content);

		// process the form
		$.ajax({
			type 		: 'POST', // define the type of HTTP verb we want to use (POST for our form)
			url 		: 'add_note_script.php', // the url where we want to POST
			data 		: formData, // our data object
			dataType 	: 'json', // what type of data do we expect back from the server
			encode 		: true
		})
			// using the done promise callback
			.done(function(data) {

				// log data to the console so we can see
				console.log(data); 

				// here we will handle errors and validation messages
				if (!data.success) {
					
					// handle errors for title ---------------
					if (data.errors.title) {
						$('#title-group').addClass('has-error'); // add the error class to show red input
						$('#title-group .col-md-10').append('<p class="help-block">' + data.errors.title + '</p>'); // add the actual error message under our input
					}
                    
                    // handle errors for content ---------------
					if (data.errors.content) {
						$('#content-group').addClass('has-error'); // add the error class to show red input
						$('#content-group .col-md-10').append('<p class="help-block">' + data.errors.content + '</p>'); // add the actual error message under our input
					}
                    
                    // handle errors for connection error...