How to prevent the user from changing values in the HTML or the JavaScript

Question

I am trying to make a user can change they are changing profile text color and background color.

I created this DEMO from codepen.io

In this d

Answer 1

The bottom line: Never trust anything from the client. The client can change whatever they desire, and can even edit the data that's going to the server. If you wish to ensure they can't do something, then you will have to put checks on the only thing they can't change (The server). Here is a good guide explaining the benefits of what I mentioned.

To answer your comment below:

Javascript:

$.ajax({
     type: "POST",
     url: 'change_theme.php',
     data: {change-text-color:$('input[name="change-text-color"]:checked').val(),change-background-color:$('input[name="change-background-color"]:checked').val()},
     beforeSend: function(){$("#posting").html(''); },
     success: function(html) {
        if ( html == "1" ) {
            $('.tduzalani, .temayi-degistir-alani').animate({'opacity':'0'}, 300, 'linear', function(){
            $('.tduzalani, .temayi-degistir-alani').css('display', 'none');});
            swal({   title: "Theme was changing succuesfully!",   text: ":)",   timer: 5000 });
        } else {
            alert('There was an error saving this!')
        }
      }
});

PHP:

change_theme($uid,$text-color,$background-color);
    echo 1;
}
else
{
    echo 0;
}

exit;

?>