<style> в <body> - нехорошо<script type=""text/JavaScript"> - 1 лишняя кавычка<script type=""text/JavaScript">
var username = document.querySelector('#username');
var msg = document.querySelector('#msg');
var submit_btn = document.querySelector('#submit_button');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText);
//status == false ник занят
//status == true ник свободен
if(result['status'] === false){
msg.innerHTML = '❌ Ник занят!';
} else {
msg.innerHTML = '✅ Ник свободен';
submit_btn.disabled = false;
}
}
};
username.addEventListener("blur", function(){
msg.innerHTML = '';
let nick = username.value;
submit_btn.disabled = true;
let regexp = /^[A-Za-z0-9_]{1,16}$/;
if(regexp.test(nick)){
let data = new FormData();
data.append('username', nick);
xhttp.open("POST", "/scripts/check.php", true);
xhttp.send(data);
} else {
msg.innerHTML = '❌ Ник от 1 до 16 символов и должен содержать только английские буквы, цифры и знак подчеркивания!';
}
});
</script><script type=""text/JavaScript">
var username = document.querySelector('#username');
var msg = document.querySelector('#msg');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText);
if(result['status'] === false){
msg.innerHTML = '❌ Этот ник занят!';
} else {
msg.innerHTML = '✅ Ник свободен';
}
}
};
username.addEventListener("blur", function(){
msg.innerHTML = '';
let data = new FormData();
data.append('username', username.value);
xhttp.open("POST", "/scripts/check.php", true);
xhttp.send(data);
});
</script>var_dump($_SESSION); в коде тов. Антон Р. что вывело? На других страницах session_start() есть?
<form action="/scripts/create.php" method="POST" data-toggle="validator" data-delay="200" autocomplete="off">
<fieldset>
<br />
<p><b>Придумайте игровой ник:</b></p>
<p><input required type="text" id="username" name="username" maxlength="16" title="Разрешены только английские буквы и цифры!" placeholder="Игровой ник"></p>
<div id="msg"></div>
<p><input type="submit" id="submit_button" disabled value="Далее"></p>
</fieldset>
</form>
<script type=""text/JavaScript">
var username = document.querySelector('#username');
var msg = document.querySelector('#msg');
var submit_btn = document.querySelector('#submit_button');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText);
//status == false ник занят
//status == true ник свободен
if(result['status'] === false){
msg.innerHTML = '❌ Ник занят!';
} else {
msg.innerHTML = '✅ Ник свободен';
submit_btn.disabled = false;
}
}
};
username.addEventListener("blur", function(){
msg.innerHTML = '';
let nick = username.value;
submit_btn.disabled = true;
let regexp = /^[A-Za-z0-9_]{1,16}$/;
if(regexp.test(nick)){
let data = new FormData();
data.append('nick', nick);
xhttp.open("POST", "ajax.php", true);
xhttp.send(data);
} else {
msg.innerHTML = '❌ Ник от 1 до 16 символов и должен содержать только английские буквы, цифры и знак подчеркивания!';
}
});
</script>value, убрал onclick и onblur атрибуты у input, потому что бессмысленно так делать, когда есть placeholder. Регулярное выражение перенес в username.addEventListener("blur", function(){. Заблокировал кнопку отправки формы.
$.post() лучше отправлять момент готовности DOM, то есть $(document).ready()<?php
if($_POST){
$foo = $_POST['variable']
}
?>
. . .
some html code
. . .
<form action="">
<input type="text" value="foo" name="variable">
<input type="submit" value="Отправить форму">
</form>
<div class="inputs">
<?php
echo $foo ? $foo : '';
?>
</div><html>
<body>
<div id="out"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var variableToSend = 'Все работает!';
$.post(
'file.php',
{variable: variableToSend},
function(response){
$('#out').append(response + '<br>');
},
'text'
);
});
</script>
</body>
</html>