Hallo
Ich habe folgenes problem und zwar habe ich eine index.html und eine script.js diese dienen zu regestrierung auf einen fivem server dieses geht auch soweit klar jedoch fehlt ein wert der nicht in der datenbank gesetzt wird dieses sieht so aus
muss aber normal so geschrieben werden
jedoch geht es nicht leider bin ich noch am lernen mit der basic und co und verstehe es nicht ich habe alle versucht aber komme leider nicht weiter
hier der code von html und der js
und die html
hoffe jemand kann mir helfen wie ich den wert 0 oder 1 hinzufüge was er bei male oder female auswählt
Ich habe folgenes problem und zwar habe ich eine index.html und eine script.js diese dienen zu regestrierung auf einen fivem server dieses geht auch soweit klar jedoch fehlt ein wert der nicht in der datenbank gesetzt wird dieses sieht so aus
Javascript:
,"gender":"man",
muss aber normal so geschrieben werden
Javascript:
,"gender":1,"man",
jedoch geht es nicht leider bin ich noch am lernen mit der basic und co und verstehe es nicht ich habe alle versucht aber komme leider nicht weiter
hier der code von html und der js
Javascript:
var selectedChar = null;
var WelcomePercentage = "30vh"
qbMultiCharacters = {}
var Loaded = false;
$(document).ready(function (){
window.addEventListener('message', function (event) {
var data = event.data;
if (data.action == "ui") {
if (data.toggle) {
$('.container').show();
$(".welcomescreen").fadeIn(150);
qbMultiCharacters.resetAll();
var originalText = "Retrieving player data";
var loadingProgress = 0;
var loadingDots = 0;
$("#loading-text").html(originalText);
var DotsInterval = setInterval(function() {
$("#loading-text").append(".");
loadingDots++;
loadingProgress++;
if (loadingProgress == 3) {
originalText = "Validating player data"
$("#loading-text").html(originalText);
}
if (loadingProgress == 4) {
originalText = "Retrieving characters"
$("#loading-text").html(originalText);
}
if (loadingProgress == 6) {
originalText = "Validating characters"
$("#loading-text").html(originalText);
}
if(loadingDots == 4) {
$("#loading-text").html(originalText);
loadingDots = 0;
}
}, 500);
setTimeout(function(){
$.post('https://qb-multicharacter/setupCharacters');
setTimeout(function(){
clearInterval(DotsInterval);
loadingProgress = 0;
originalText = "Retrieving data";
$(".welcomescreen").fadeOut(150);
qbMultiCharacters.fadeInDown('.character-info', '20%', 400);
qbMultiCharacters.fadeInDown('.characters-list', '20%', 400);
$.post('https://qb-multicharacter/removeBlur');
}, 2000);
}, 2000);
} else {
$('.container').fadeOut(250);
qbMultiCharacters.resetAll();
}
}
if (data.action == "setupCharacters") {
setupCharacters(event.data.characters)
}
if (data.action == "setupCharInfo") {
setupCharInfo(event.data.chardata)
}
});
$('.datepicker').datepicker();
});
$('.continue-btn').click(function(e){
e.preventDefault();
});
$('.disconnect-btn').click(function(e){
e.preventDefault();
$.post('https://qb-multicharacter/closeUI');
$.post('https://qb-multicharacter/disconnectButton');
});
function setupCharInfo(cData) {
if (cData == 'empty') {
$('.character-info-valid').html('<span id="no-char">The selected character slot is not in use yet.<br><br>This character doesn\'t have information yet.</span>');
} else {
var gender = "Mann"
if (cData.charinfo.gender == 0) { cData.charinfo.gender == 1}
$('.character-info-valid').html(
'<div class="character-info-box"><span id="info-label">Name: </span><span class="char-info-js">'+cData.charinfo.firstname+' '+cData.charinfo.lastname+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Birth date: </span><span class="char-info-js">'+cData.charinfo.birthdate+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Gender: </span><span class="char-info-js">'+gender+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Nationality: </span><span class="char-info-js">'+cData.charinfo.nationality+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Job: </span><span class="char-info-js">'+cData.job.label+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Cash: </span><span class="char-info-js">$ '+cData.money.cash+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Bank: </span><span class="char-info-js">$ '+cData.money.bank+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Phone number: </span><span class="char-info-js">'+cData.charinfo.phone+'</span></div>' +
'<div class="character-info-box"><span id="info-label">Account number: </span><span class="char-info-js">'+cData.charinfo.account+'</span></div>');
}
}
function setupCharacters(characters) {
$.each(characters, function(index, char){
$('#char-'+char.cid).html("");
$('#char-'+char.cid).data("citizenid", char.citizenid);
setTimeout(function(){
$('#char-'+char.cid).html('<span id="slot-name">'+char.charinfo.firstname+' '+char.charinfo.lastname+'<span id="cid">' + char.citizenid + '</span></span>');
$('#char-'+char.cid).data('cData', char)
$('#char-'+char.cid).data('cid', char.cid)
}, 100)
})
}
$(document).on('click', '#close-log', function(e){
e.preventDefault();
selectedLog = null;
$('.welcomescreen').css("filter", "none");
$('.server-log').css("filter", "none");
$('.server-log-info').fadeOut(250);
logOpen = false;
});
$(document).on('click', '.character', function(e) {
var cDataPed = $(this).data('cData');
e.preventDefault();
if (selectedChar === null) {
selectedChar = $(this);
if ((selectedChar).data('cid') == "") {
$(selectedChar).addClass("char-selected");
setupCharInfo('empty')
$("#play-text").html("Create");
$("#play").css({"display":"block"});
$("#delete").css({"display":"none"});
$.post('https://qb-multicharacter/cDataPed', JSON.stringify({
cData: cDataPed
}));
} else {
$(selectedChar).addClass("char-selected");
setupCharInfo($(this).data('cData'))
$("#play-text").html("Play");
$("#delete-text").html("Delete");
$("#play").css({"display":"block"});
$("#delete").css({"display":"block"});
$.post('https://qb-multicharacter/cDataPed', JSON.stringify({
cData: cDataPed
}));
}
} else if ($(selectedChar).attr('id') !== $(this).attr('id')) {
$(selectedChar).removeClass("char-selected");
selectedChar = $(this);
if ((selectedChar).data('cid') == "") {
$(selectedChar).addClass("char-selected");
setupCharInfo('empty')
$("#play-text").html("Register");
$("#play").css({"display":"block"});
$("#delete").css({"display":"none"});
$.post('https://qb-multicharacter/cDataPed', JSON.stringify({
cData: cDataPed
}));
} else {
$(selectedChar).addClass("char-selected");
setupCharInfo($(this).data('cData'))
$("#play-text").html("Play");
$("#delete-text").html("Delete");
$("#play").css({"display":"block"});
$("#delete").css({"display":"block"});
$.post('https://qb-multicharacter/cDataPed', JSON.stringify({
cData: cDataPed
}));
}
}
});
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'': '`',
'=': '='
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'=/]/g, function (s) {
return entityMap[s];
});
}
function hasWhiteSpace(s) {
return /\s/g.test(s);
}
$(document).on('click', '#create', function (e) {
e.preventDefault();
let firstname= escapeHtml($('#first_name').val())
let lastname= escapeHtml($('#last_name').val())
let nationality= escapeHtml($('#nationality').val())
let birthdate= escapeHtml($('#birthdate').val())
let gender= escapeHtml($('select[name=gender]').val())
let cid = escapeHtml($(selectedChar).attr('id').replace('char-', ''))
//An Ugly check of null objects
if (!firstname || !lastname || !nationality || !birthdate || hasWhiteSpace(firstname) || hasWhiteSpace(lastname)|| hasWhiteSpace(nationality) ){
console.log("FIELDS REQUIRED")
}else{
$.post('https://qb-multicharacter/createNewCharacter', JSON.stringify({
firstname: firstname,
lastname: lastname,
nationality: nationality,
birthdate: birthdate,
gender: gender,
cid: cid,
}));
$(".container").fadeOut(150);
$('.characters-list').css("filter", "none");
$('.character-info').css("filter", "none");
qbMultiCharacters.fadeOutDown('.character-register', '125%', 400);
refreshCharacters()
}
});
$(document).on('click', '#accept-delete', function(e){
$.post('https://qb-multicharacter/removeCharacter', JSON.stringify({
citizenid: $(selectedChar).data("citizenid"),
}));
$('.character-delete').fadeOut(150);
$('.characters-block').css("filter", "none");
refreshCharacters();
});
$(document).on('click', '#cancel-delete', function(e){
e.preventDefault();
$('.characters-block').css("filter", "none");
$('.character-delete').fadeOut(150);
});
function refreshCharacters() {
$('.characters-list').html('<div class="character" id="char-1" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-2" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-3" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-4" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character" id="char-5" data-cid=""><span id="slot-name">Empty Slot<span id="cid"></span></span></div><div class="character-btn" id="play"><p id="play-text">Select a character</p></div><div class="character-btn" id="delete"><p id="delete-text">Select a character</p></div>')
setTimeout(function(){
$(selectedChar).removeClass("char-selected");
selectedChar = null;
$.post('https://qb-multicharacter/setupCharacters');
$("#delete").css({"display":"none"});
$("#play").css({"display":"none"});
qbMultiCharacters.resetAll();
}, 100)
}
$("#close-reg").click(function (e) {
e.preventDefault();
$('.characters-list').css("filter", "none")
$('.character-info').css("filter", "none")
qbMultiCharacters.fadeOutDown('.character-register', '125%', 400);
})
$("#close-del").click(function (e) {
e.preventDefault();
$('.characters-block').css("filter", "none");
$('.character-delete').fadeOut(150);
})
$(document).on('click', '#play', function(e) {
e.preventDefault();
var charData = $(selectedChar).data('cid');
if (selectedChar !== null) {
if (charData !== "") {
$.post('https://qb-multicharacter/selectCharacter', JSON.stringify({
cData: $(selectedChar).data('cData')
}));
setTimeout(function(){
qbMultiCharacters.fadeOutDown('.characters-list', "-40%", 400);
qbMultiCharacters.fadeOutDown('.character-info', "-40%", 400);
qbMultiCharacters.resetAll();
}, 1500);
} else {
$('.characters-list').css("filter", "blur(2px)")
$('.character-info').css("filter", "blur(2px)")
qbMultiCharacters.fadeInDown('.character-register', '25%', 400);
}
}
});
$(document).on('click', '#delete', function(e) {
e.preventDefault();
var charData = $(selectedChar).data('cid');
if (selectedChar !== null) {
if (charData !== "") {
$('.characters-block').css("filter", "blur(2px)")
$('.character-delete').fadeIn(250);
}
}
});
qbMultiCharacters.fadeOutUp = function(element, time) {
$(element).css({"display":"block"}).animate({top: "-80.5%",}, time, function(){
$(element).css({"display":"none"});
});
}
qbMultiCharacters.fadeOutDown = function(element, percent, time) {
if (percent !== undefined) {
$(element).css({"display":"block"}).animate({top: percent,}, time, function(){
$(element).css({"display":"none"});
});
} else {
$(element).css({"display":"block"}).animate({top: "103.5%",}, time, function(){
$(element).css({"display":"none"});
});
}
}
qbMultiCharacters.fadeInDown = function(element, percent, time) {
$(element).css({"display":"block"}).animate({top: percent,}, time);
}
qbMultiCharacters.resetAll = function() {
$('.characters-list').hide();
$('.characters-list').css("top", "-40");
$('.character-info').hide();
$('.character-info').css("top", "-40");
$('.welcomescreen').css("top", WelcomePercentage);
$('.server-log').show();
$('.server-log').css("top", "25%");
}
und die html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<title>Qbus Multicharacter</title>
</head>
<body>
<div class="container">
<div class="bars">
<div class="topbar">
</div>
<div class="bottombar">
</div>
</div>
<div class="main-screen">
<div class="welcomescreen">
<div class="loading-rondje">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
<p id="loading-text">Data loading</p>
</div>
<!-- <img src="./logo.png" id="logo"> -->
<!-- <p><span id="welcome-titel">DojM Test Server</span></p>
<div class="start-btn continue-btn"><p>Enter</p></div>
<div class="start-btn disconnect-btn"><p>Exit</p></div> -->
</div>
<div class="characters-list">
<div class="character-list-header"><p>My Characters</p></div>
<div class="character" id="char-1" data-cid="">
<span id="slot-name">Empty charcater slot<span id="cid"></span></span>
</div>
<div class="character" id="char-2" data-cid="">
<span id="slot-name">Empty charcater slot<span id="cid"></span></span>
</div>
<div class="character" id="char-3" data-cid="">
<span id="slot-name">Empty charcater slot<span id="cid"></span></span>
</div>
<div class="character" id="char-4" data-cid="">
<span id="slot-name">Empty charcater slot<span id="cid"></span></span>
</div>
<div class="character" id="char-5" data-cid="">
<span id="slot-name">Empty charcater slot<span id="cid"></span></span>
</div>
<div class="character-btn" id="play"><p id="play-text">Select a character</p></div>
<div class="character-btn" id="delete"><p id="delete-text">Select a character</p></div>
</div>
<div class="character-info">
<div class="char-info-titel"><i class="material-icons" id="char-info-icon">info</i><span id="char-info-titel">Character Information</span></div>
<div class="character-info-valid">
<span id="no-char">Select a character slot to see all your information.</span>
</div>
</div>
<div class="character-register">
<div class="characters-register-block-header">
<p>Character Registration</p>
</div>
<div class="char-register-inputs">
<input type="text" id="first_name" placeholder="First name" class="char-reg-input">
<input type="text" id="last_name" placeholder="Last Name" class="char-reg-input">
<input type="text" id="nationality" placeholder="Nationality" class="char-reg-input">
<input type="date" id="birthdate" placeholder="Birth Date" min="1900-01-01" max="2999-12-31" class="char-reg-input">
<select id="gender" name="gender">
<option value="man" selected>Male</option>
<option value="woman">Female</option>
</select>
</div>
<img class="new-character-image" src="images/male.png" draggable="false" />
<img class="new-character-image" src="images/female.png" draggable="false" />
<div class="character-return-btn2" id="char-cancel"><p id="return-text">Exit</p></div>
<div class="character-reg-btn2" id="create"><p id="create-text">Confirm</p></div>
</div>
<div class="character-delete">
<div class="characters-delete-block-header">
<p>Delete Character</p>
</div>
<p>Are You Sure You Want To Delete Your Character?</p>
<div class="character-acceptdel-btn" id="accept-delete"><p id="accept-text">YES</p></div>
<div class="character-canceldel-btn" id="cancel-delete"><p id="cancel-text">NO</p></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</html>
hoffe jemand kann mir helfen wie ich den wert 0 oder 1 hinzufüge was er bei male oder female auswählt
Zuletzt bearbeitet von einem Moderator: