html übergibt an js ein wert nicht

[H0xt]

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

,"gender":"man",

muss aber normal so geschrieben werden

,"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

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">&#36; '+cData.money.cash+'</span></div>' +
        '<div class="character-info-box"><span id="info-label">Bank: </span><span class="char-info-js">&#36; '+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 = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '/': '&#x2F;',
    '': '&#x60;',
    '=': '&#x3D;'
};

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

<!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

 

[KonradN]

Also im Augenblick bin ich etwas irritiert von Deiner Aussage. Die Daten sollen als JSON weiter gegeben werden und dann ist
,"gender":1,"man",
schlicht kein gültiges JSON mit Key / Value pair.

Evtl. meinst Du einfach etwas wie
,"gender":1,
also das statt man eine 1 übergeben werden soll?

Dann könnte es ausreichen, einfach value="man" zu value="1" zu ändern, damit das der Wert wird (Habe ich aber jetzt nicht zu sehr im Detail angesehen, was Du da alles an Code hast und so. Zumal der erste Punkt erst einmal geklärt werden sollte.)

Und wichtiger Hinweis: Das ist eine Frage zu HTML / JavaScript und gehört daher nicht in das Java Forum. Wir haben ein Unterforum auch für solche Fragen!

 

[H0xt]

Also im Augenblick bin ich etwas irritiert von Deiner Aussage. Die Daten sollen als JSON weiter gegeben werden und dann ist
,"gender":1,"man",
schlicht kein gültiges JSON mit Key / Value pair.

Evtl. meinst Du einfach etwas wie
,"gender":1,
also das statt man eine 1 übergeben werden soll?

Dann könnte es ausreichen, einfach value="man" zu value="1" zu ändern, damit das der Wert wird (Habe ich aber jetzt nicht zu sehr im Detail angesehen, was Du da alles an Code hast und so. Zumal der erste Punkt erst einmal geklärt werden sollte.)

Und wichtiger Hinweis: Das ist eine Frage zu HTML / JavaScript und gehört daher nicht in das Java Forum. Wir haben ein Unterforum auch für solche Fragen!

Hi und danke erstmal für deine zeit es geht eig nur darum das ein wert fehlt und ich diesen gerne mit hinzufügen wollte so das es in der spalte bei der datenbank mit bei steht sprich "gender":1,"man" derzeit speichert er mir nur "gender":"man" ohne eine 0 oder 1 davor diese zahl dient als geschlechter id also 0 = frau 1 = man und da diese id fehlt und das geschlecht wird dadurch von den anderen resources nicht erkannt bei der html ist ein feld wo man male oder female auswählen kann und bei female gibt er es nicht weiter und man ist ein mann das ist das grund problem

 

[KonradN]

a) Wenn 0 für Frau und 1 für Mann steht, dann solltest Du das im HTML als value Werte eintragen. Wenn die Werte dann genommen werden, dann bekommst Du da die 0 bzw 1 Werte in die Datenbank.

b) Das JSON wird dann aber schon - wie beschrieben - so aussehen:
"gender":1,

Beim JSON werden halt die Eigenschaften eines Objektes mit Key / Value Werten gesetzt, also etwas wie:

{
    "key1": "value1",
    "key2": "value2"
}

Ein Eintrag wie "gender": 1, "man" wäre damit so nicht gültig. "gender" ist der Wert 1 Zugewiesen und dann kommt ein key "man". Das macht zumindest aus meiner Sicht so erst einmal wenig Sinn.

 

[H0xt]

a) Wenn 0 für Frau und 1 für Mann steht, dann solltest Du das im HTML als value Werte eintragen. Wenn die Werte dann genommen werden, dann bekommst Du da die 0 bzw 1 Werte in die Datenbank.

b) Das JSON wird dann aber schon - wie beschrieben - so aussehen:
"gender":1,

Beim JSON werden halt die Eigenschaften eines Objektes mit Key / Value Werten gesetzt, also etwas wie:

{
    "key1": "value1",
    "key2": "value2"
}

Ein Eintrag wie "gender": 1, "man" wäre damit so nicht gültig. "gender" ist der Wert 1 Zugewiesen und dann kommt ein key "man". Das macht zumindest aus meiner Sicht so erst einmal wenig Sinn.

das mit "gender": 1, ist aus der tabelle von der mysql datenbank da alles als text dort in einer tabelle geschrieben wird und wie schon beschrieben wird halt in der datenbank nicht diese 1 dabei geschreieben wenn man weiblich auswählt bei der erstellung was von der html kommt sondern nur "gender":"man" die schreibweise ist so richtig da es so sein muss in fivem hier mal zb ein ganzer ausschnitt der tabelle

{"phone":"9568578725","birthdate":"1992-09-09","gender":"woman","backstory":"placeholder backstory","firstname":"sadas","account":"US07QBCore2337561023","nationality":"sadsad","lastname":"asdasd","cid":"1"}

das ist der ganze wert der über die html und dem js script eingetragen werden was auch alles so richtig ist und bei der valu mit dem man oder frau in der html sieht es wie folgt aus

                        <select id="gender" name="gender">
                            <option value="man" selected>Male</option>
                            <option value="woman">Female</option>
                        </select>

und in der js ist ja diese abfrage und ich habe keine ahnung wie ich das jetzt umbaue
halt das hier

'<div class="character-info-box"><span id="info-label">Gender: </span><span class="char-info-js">'+gender+'</span></div>' +

und dieses hier

        var gender = "Man"
        if (cData.charinfo.gender == 1) { gender = "Woman" }

 

[KonradN]

Du kannst die Value Werte ändern - das ist, was ich mit der Aussage zu value = "1" meinte:

                        <select id="gender" name="gender">
                            <option value="1" selected>Male</option>
                            <option value="0">Female</option>
                        </select>

Siehe: HTML option tag (w3schools.com)

value

text

Specifies the value to be sent to a server

 

[H0xt]

Du kannst die Value Werte ändern - das ist, was ich mit der Aussage zu value = "1" meinte:

                        <select id="gender" name="gender">
                            <option value="1" selected>Male</option>
                            <option value="0">Female</option>
                        </select>

Siehe: HTML option tag (w3schools.com)

ah okay und wie müsste dann in der js diese if abfrage aussehen

        var gender = "man"
        if (cData.charinfo.gender == 1) { gender = "woman" }

zb dann so?

        var gender = nil;
        if (cData.charinfo.gender == 0) { gender = 1 }

 

[KonradN]

Ich habe mir den ganzen Code nicht im Detail angesehen und ich weiss nicht, an welcher Stelle des Code du da jetzt überhaupt bist.

Es gibt eine Codestelle, die da ja das create machen soll:

$(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()
    }
});

Und da wird der Wert aus dem html Control in gender gespeichert und dann wird alles gesendet. Und da dort der value selbst genommen wir, sollte es ausreichen, da eine 0 bzw 1 als value zu setzen.

Und das war ja das Problem, von dem Du bisher geschrieben hattest, oder?

 

[H0xt]

oh sorry das ist der ganze abschnitt aus der js mit der if abfrage wo auch die sachen wohl von der html durch gehen

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 = "man"
        if (cData.charinfo.gender == 1) { gender = "woman" }
        $('.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">&#36; '+cData.money.cash+'</span></div>' +
        '<div class="character-info-box"><span id="info-label">Bank: </span><span class="char-info-js">&#36; '+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>');
    }
}

 

[Oneixee5]

So kannst du den selektierten Wert als JSON weitergeben:

<select id="gender" name="gender">
  <option value="man" selected>Male</option>
  <option value="woman">Female</option>
</select>
<p id="p_gender">
  Test
</p>

const gender = $("#gender");
const pGender = $("#p_gender");
const data = {};
gender.on("change", () => {
  data.gender = $(gender, "option:selected").val();
  pGender.text(`Test: ${ JSON.stringify(data) }`);
});

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Du kannst option.value dann auch auf 0 und 1 setzen, falls dir das lieber ist.

 

[Oneixee5]

Ich will dir nicht zu nahe treten, aber wenn du noch dabei bist JavaScript zu lernen, dann solltest du dich NICHT mit JQuery beschäftigen. JQuery ist obsolet, da alle modernen Framewarks diese oder ähnliche Funktionen bereits mitbringen. JQuery ist auch für "breaking changes" bekannt. So wird nach einer API-Änderung die Webseite, mit vertretbarem Aufwand, nach einiger Zeit nicht mehr wartbar sein. Zum Beheben von Sicherheitsproblemen ist es dann notwendig die Seite neu zu entwickeln.
Auch wenn es mehr Schreibarbeit bedeutet, empfehle ich dir pures „Vanilla" JavaScript zu verwenden. Die zusätzliche Schreibarbeit kannst du mit einer gut eingestellten IDE vermeiden. Bei JavaScript ist VSCode quasi Standard.

 

[H0xt]

Ich will dir nicht zu nahe treten, aber wenn du noch dabei bist JavaScript zu lernen, dann solltest du dich NICHT mit JQuery beschäftigen. JQuery ist obsolet, da alle modernen Framewarks diese oder ähnliche Funktionen bereits mitbringen. JQuery ist auch für "breaking changes" bekannt. So wird nach einer API-Änderung die Webseite, mit vertretbarem Aufwand, nach einiger Zeit nicht mehr wartbar sein. Zum Beheben von Sicherheitsproblemen ist es dann notwendig die Seite neu zu entwickeln.
Auch wenn es mehr Schreibarbeit bedeutet, empfehle ich dir pures „Vanilla" JavaScript zu verwenden. Die zusätzliche Schreibarbeit kannst du mit einer gut eingestellten IDE vermeiden. Bei JavaScript ist VSCode quasi Standard.

Das problem ist das ich es nicht lassen kann da ich der einzige bin der am server halbwegs was hinbekommt und keiner mir wirklich helfen kann oder andere nicht wollen und da man immer mann ist egal was man auswählt ist der server grade aus und zu nix zu gebrauchen da unsere mädels zb sich auch nicht anmelden können da auch diese ein mann sind... und da kann man jetzt noch hind uner her valuen :-D es liegt einfach und alleine daran dass ich noch zusätzlich noch eine id 0 oder 1 mit in der datenbank / tabelle reingeschrieben brauche vom js script wie ich jetzt auch schon sehr offt erwähnt habe und versucht habe es so gut wie möglich verständlich zu machen gehe ich zb in datenbank rein und trage diese :1, hinter gender ein dann passt es und man ist eine frau zb bei 1 und bei 0 ein mann.. wie gesagt es liegt einzig und alleine daran das er mir nur vom js die gender namen rein schreibt aber keine id dazu

und noch einmal 🙃

"1992-09-09","gender":1,<< daa genau diese zahl muss hier mit bei "woman","backstory"
 
 
und darum geht es auch ich will einfach eine zweite sache mit bei packen
denn so

"1992-09-09","gender":>ohne zahl"woman","backstory"
    geht es nicht das ist das grund problem

 

[H0xt]

naja erledigt jemand der sich auskannte hat es ebend gemacht nun ist id mit dabei danke denoch für eure zeit

/close

 

[Marinek]

Aber die Lösung wirst du hier nicht posten?

 

[Oneixee5]

und versucht habe es so gut wie möglich verständlich zu machen

Ja das war das Problem: Es hat niemand so richtig verstanden was du eigentlich willst. Du willst also einen zusätzlichen Wert in der DB haben, welcher abhängig davon ist, was in der Webseite gespeichert/ausgewählt wird. Dann ist es doch völlig sinnlos die Änderung in der Webseite zu machen. Mach das doch einfach im Backend oder direkt in der DB mit einer Funktionsspalte. Von der Webseite kommt 'woman' also schreibe im SQL-Update-Befehl eine 1 in die betreffende Spalte der DB - ansonsten 0. So einfach. Einen Check-Constraint oder Foreign Key benötigst du ja sowieso noch, falls jemand direkt in der DB arbeitet.

 

[KonradN]

Also den zusätzlichen Wert in der Datenbank kann ich nicht verstehen. Das wäre je redundant. Man speichert doch keine redundanten Daten in der Datenbank.

Es macht also keinen Sinn 1 und "male" (oder "man" oder was auch immer) in der Datenbank zu speichern.

Das ganze Sieht doch etwas so danach aus, dass man als Backend einfach einen REST Service hat und darauf baut man dann ein Frontend. Und das ist ja doch eine relativ einfache Angelegenheit. Und da wäre dann doch die Anzeige von einem Text, wenn gender 1 ist, eine klare Sache des Frontends. Das Frontend muss dann ggf. entscheiden, ob das Frontend nun "male", "männlich", "mâle", "男性", ... anzeigen soll. (Also wenn eine Anzeige in der Sprache des Anwenders gewünscht wird!)

Hier erscheint mir eher wichtig, dass man seine Sachen sauber trennt. Es wurde einfach alles zusammen "gequetsch". Das wird - egal in welcher Sprache und egal ob im Front- oder Backend - unübersichtlich. Und das ist dann ja, wo die ganzen Frameworks ansetzen: Eine saubere Strukturierung. Die meisten Frontends erlauben dazu eine Gliederung in Komponenten (Angular, Razor, ...). Und das wird dann notwendig.

Man kann dann Dinge sauber trennen. Klar, durch dieses Erstellen von html Strukturen in JavaScript wird das etwas erschwert, so dass man da etwas mehr machen muss (oder eben zu einem Framework greift, dass sowas bietet) aber prinzipiell geht da sehr viel und man braucht nicht zwingend ein ganzes Framework um seinen Code etwas besser zu strukturieren.

Aber das ist einfach nur meine Sicht auf dieses Thema.

 

[gulshan212]

Well, I think you should avoid this problem by taking a short example.

<!DOCTYPE html>
<html>
<head>
  <title>Passing Value to JavaScript</title>
  <script>
    function displayValue(value) {
      console.log("Received value: " + value);
    }
  </script>
</head>
<body>
  <button onclick="displayValue('Hello')">Click Me</button>
</body>
</html>

Thanks

 

[H0xt]

ist erledigt habe es anders gebaut danke für alle hilfen

 

[krgewb]

Bitte - falls möglich - immer eine minimalistische Version des Programms posten und nicht hunderte Zeilen Code.