We Keep Coding

new input replace Instead of append

Here is the html that I wrote for program
It's working but append is not working.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container m-5">
<div class="row">
<div class="col-md-6 justify-content-center">
<span>Full Name :</span>
<input id="name" type="name" class="d-flex mb-3">
<span>Email :</span>
<input id="email" type="email" name="email" class="d-flex mb-3">
<span>Comment :</span>
<input id="comment" type="text" class="d-flex mb-3">
<button id="btn" class="mt-3">Submit</button>
</div>
<div class="col-md-6">
<p id="demo"></p>
</div>
</div>
</div>
name and comment are inputs.
I type some text but append doesn't working and the new text that entered replace the first one.
function SubmitComment(name, comment) {
let newComment = censor(comment)
for (let i = 0; i < name.length; i++) {
let demo = $("#demo");
demo.html("")
demo.append(`
<h4>${name.val()} :</h4>
<br>
<p>${newComment}</p>
`)
}
}
function censor(comment) {
var splitString = comment.val().split(" ")
for (let b = 0; b < splitString.length; b++) {
if (splitString[b] == "duck") {
splitString[b] = '****';
}
if (splitString[b] == "swan") {
splitString[b] = '****';
}
}
var joinArray = splitString.join(" ");
return joinArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Am not sure why your looping the name property, but here is a working example!
function Submit() {
SubmitComment($('.name'), $('.comment'));
}
function SubmitComment(name, comment) {
let newComment = censor(comment)
let demo = $("#demo");
demo.html("")
for (let i = 0; i < name.length; i++) {
demo.append(`
<h4>${name.val()} :</h4>
<br>
<p>${newComment}</p>
`)
}
}
function censor(comment) {
var splitString = comment.val().split(" ")
for (let b = 0; b < splitString.length; b++) {
if (splitString[b] == "duck") {
splitString[b] = '****';
}
if (splitString[b] == "kilt") {
splitString[b] = '****';
}
}
var joinArray = splitString.join(" ");
return joinArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="name" />
<input class="comment" />
<button onClick="Submit()">Submit</button>
<div id="demo"></div>

Why is this simple username sys not working?

I want to create a chat system (which i already accomplished), but a working username selector, and it gets the username in the input, then when the user sends a message via chat, it is their username!! And also, i tried putting it in a localStorage, so when the user refreshes or rejoins, the name is still there and not removed! I think im close, but it says UNDEFINED, which really got me confused? Please help? Thanks!!
localStorage.playerusername = document.querySelector(".hud-name").value;
let username = localStorage.playerusername;
let chatMsg = [];
function appendChatMessage(currentUserName, chatMessage) {
let chatElem = document.createElement("p");
chatElem.innerHTML = "<strong>" + currentUserName + ": </strong>" + chatMessage;
document.querySelector(".chat").appendChild(chatElem);
}
for (let i = 0; i < chatMsg.length; i++) {
appendChatMessage(username, chatMsg[i])
}
let Game = {
currentGame: {
variables: {
sendMessage: function(messageContent) {
chatMsg.push(messageContent);
appendChatMessage(username, messageContent);
document.querySelector(".enterT").innerHTML = ""
},
addChatTopRemoverPackage: async function() {
if (chatMsg.length == 7) {
let chatElem = document.querySelector(".chat")
if (chatElem.children[0]) {
chatElem.removeChild(chatElem.children[0])
if (chatMsg.length > 0) {
chatMsg.shift()
//if (chatMsg.length == 0) {
//chatMsg.pop();
//}
}
}
}
},
chatRemoverRefresher: setInterval(() => {
Game.currentGame.variables.addChatTopRemoverPackage()
}, 0.000000000001)
}
}
}
HTML:
<div class="hud-name-select
type-text
maxlength-16
">
<input class="hud-name" type="text" maxlength="16" placeholder="Enter Nickname...">
<div></div>
<div><br></div>
<button class="btn-play btn-green background-color-green">
<div style="
display: none;
" display="none">Loading......<div></div>
</div>
<span>Play</span>
</button>
</div>
</div>
</div>
<div class="msgcont">
<div class="messages">
<h1>
CHAT
</h1>
<div class="chat">
</div>
<div>
<input class="enterT" type="text" placeholder="Enter A Message..!"><button
onclick="Game.currentGame.variables.sendMessage(document.querySelector('.enterT').value)">send
message</button>
</div>
<br>
</div>
</div>
Kevin

Fields Added Via Javascript not posting Data into $POST

I have created a form which can be dynamically changed using the buttons included. These buttons allow for more input fields to be added/removed. The issue is that the input fields created are not posting any data/ Values in those fields not being added to the $POST array on the submit of the form.
The main functions below resposible for adding and removing rows is RemoveRows() and addRows()
What should happen is that on submit all values in the form should be "posted" then I can access all of those fields via $_POST["nameOfField"].
The way I have currently approached this is to create an input fields with the relevant id's and names then append that field to where the "hard coded" fields exists.
From my initial debugging none of the fields that have been added via javascript are in $Post which I have checked via var_dump($_REQUEST);
I have also seen that the nodes that are added are not elements of the form tag even though the nodes are added between the opening and closing tag. This can be seen in the doBeforeSubmit() Function where we can see all elements that are children of the and this never changes as rows are added/removed.
function showPlatforms() {
let nacellesOptions = ["Option1", "option2", "Option3"];
let milOptions = ["Option1", "option2", "Option3"]
let highOptions = ["Option1", "option2", "Option3"]
let entry = document.getElementById("vs")
let platfom = document.getElementById("platform")
if (platform.hasChildNodes()) {
var lastChild = platfom.lastElementChild
while (lastChild) {
platfom.removeChild(lastChild)
lastChild = platform.lastElementChild
}
}
if (entry.value == "Nacelles") {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = nacellesOptions[i]
option.innerHTML = nacellesOptions[i]
platform.appendChild(option)
}
} else if (entry.value == "Military") {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = milOptions[i]
option.innerHTML = milOptions[i]
platform.appendChild(option)
}
} else {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = highOptions[i]
option.innerHTML = highOptions[i]
platform.appendChild(option)
}
}
}
function formOptions() {
let entry = document.getElementById("type")
if (entry.value == "Engineering MAM") {
document.getElementById("WBS").disabled = false
document.getElementById("Desc").disabled = false
document.getElementById("ProName").disabled = false
} else {
document.getElementById("WBS").disabled = true
document.getElementById("Desc").disabled = true
document.getElementById("ProName").disabled = true
}
}
function formoptions2() {
let entry2 = document.getElementById("organisation")
if (entry2.value == "Aftermarket") {
document.getElementById("COT").disabled = false
document.getElementById("COC").disabled = false
} else {
document.getElementById("COT").disabled = true
document.getElementById("COC").disabled = true
}
}
count = document.getElementById("partNum").childElementCount
function addRows() {
rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
rowNames.forEach(addRow, count)
count = document.getElementById("partNum").childElementCount
//doBeforeSubmit()
}
function doBeforeSubmit() {
var es = document.getElementById("form").elements;
var l = es.length;
var msgs = [];
for (var idx = 0; idx < l; idx++) {
var e = es[idx];
msgs.push('name=' + e.name + ', type=' + e.type + ', value=' + e.value);
}
alert(msgs.join('\n'));
return false;
}
function addRow(id) {
let col = document.getElementById(id)
var box = document.createElement("INPUT")
box.setAttribute("type", "text")
box.setAttribute("id", id + count)
box.setAttribute("name", id + count)
box.setAttribute("class", "form-control")
col.appendChild(box)
}
function RemoveRows() {
rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
rowNames.forEach(removeBoxes)
count = document.getElementById("partNum").childElementCount
}
function removeBoxes(item) {
let box = document.getElementById(item)
let last = box.lastChild
box.removeChild(last)
}
function checkData() {
// if all stuff is correct do this:
document.getElementById("submit").disabled = false
// else dont activate the submit button.
}
<form method="post" id="form" action="SubmitMAM.php">
<div class="row" id="productRow" style="width:95%; margin:auto">
<div id="partNo" class="col-2">
<h3>Part Number:</h3>
</div>
<div class="col-2">
<h3>Part Description:</h3>
</div>
<div class="col-1">
<h3>Lead Time:</h3>
</div>
<div class="col-1">
<h3>Quantity:</h3>
</div>
<div class="col-1">
<h3>Date Required:</h3>
</div>
<div class="col-1">
<h3>Unit Cost:</h3>
</div>
<div class="col-2">
<h3>Unit Cost Extension:</h3>
</div>
<div class="col-1">
<h3>Unit Sale Value:</h3>
</div>
<div class="col-1">
<h3>Est Sales Value:</h3>
</div>
</div>
<div class="row" id="productRow" style="width:95%; margin:auto">
<div id="partNum" class="col-2">
<input type="text" id="partNum0" class="form-control" name="partNum0">
</div>
<div id="partDesc" class="col-2">
<input type="text" id="partDesc0" class="form-control" name="partDesc0">
</div>
<div id="leadTime" class="col-1">
<input type="text" id="leadTime0" class="form-control" name="leadTime0">
</div>
<div id="quantity" class="col-1">
<input type="text" id="quanitity0" class="form-control" name="quantity0">
</div>
<div id="dateReq" class="col-1">
<input type="text" id="dateReq0" class="form-control" name="dateReq0">
</div>
<div id="unitCost" class="col-1">
<input type="text" id="unitCost0" class="form-control" name="unitCost0">
</div>
<div id="unitExtention" class="col-2">
<input type="text" id="unitExtention0" class="form-control" name="unitExtention0">
</div>
<div id="unitSaleValue" class="col-1">
<input type="text" id="unitSaleValue0" class="form-control" name="unitSaleValue0">
</div>
<div id="estSalesValue" class="col-1">
<input type="text" id="estSalesValue0" class="form-control" name="estSalesValue0">
</div>
<button onclick="addRows()" class="btn btn-primary" type="button">Add a Product</button>
<button onclick="RemoveRows()" class="btn btn-primary" type="button">Remove Row</button>
<button onclick="checkData()" class="btn btn-primary" type="button">Check Data</button>
<br>
<button type="submit" name="submit" id="submit" class="btn btn-primary" disabled>Submit</button>
</form>
PHP:
<?php
var_dump($_REQUEST)
?>
UPDATE:
The code has been changed to use a php array by adding square brackets into the name which produces the following html:
<input type="text" id="partNum0" class="form-control" name="partNum[]">
<input type="text" id="partNum1" name="partNum[]" class="form-control">
<input type="text" id="partNum2" name="partNum[]" class="form-control">

You just need to use the name property of the input and add [] at the end, as GrumpyCrouton said. PHP parse it as an array, and you can access it as:
$partNum = $_POST["partNum"];

FIXED: It turns out the above code did not have any issues with the logic or the way it should work, in the source code in visual studio the indentation of some of the Divs was off causing the browser to have issues in rendering the form correctly hence why the added boxes were not included in the form and their values not POSTED.
As a heads up to anyone with maybe a similar issue, it pays to have your code neat.

WebChat how to set css color for sender/receiver

I am working on implementing a web chat and have come up with an issue that I hope is easily solvable.
How do I change the color for the sender/receiver to differenciate them?
I have tried to saving the colors into my db but the issue is how I can identify that I am the sender and the receivers color needs to be different.
This is how I have implemented my chat:
Chat.js
connection.on("SessionNotification", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var p = document.createElement("span");
var q = document.createElement("li");
p.setAttribute("class", "Sender");
q.setAttribute("class", "Message");
p.textContent = user + " - " + moment(datetime).format("DD-MM-YYYY HH:mm:ss");
q.textContent = msg;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
});
Html
<script>
$(document).ready(function () {
$('#MessageList').stop().animate({
scrollTop: $('#MessageList')[0].scrollHeight
}, 2000);
var SessionId = document.getElementById("Id").value;
console.log(SessionId);
var form_data = {
"SessionId": SessionId
};
$.ajax({
url: "#Url.Action("GetHistory", #ViewContext.RouteData.Values["controller"].ToString())",
method: "POST",
data: JSON.stringify(form_data),
contentType: "application/json",
success: function (result) {
console.log(result);
var output = JSON.parse(result);
for (var i = 0; i < output.length; i++) {
var p = document.createElement("span");
var q = document.createElement("li");
p.setAttribute("class", "Sender");
q.setAttribute("class", "Message");
p.textContent = output[i].Name + " - " + moment(output[i].CreatedOn).format("DD-MM-YYYY HH:mm:ss");
q.textContent = output[i].Message;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
}
},
error: function (error) {
console.log(error);
}
});
return false;
});
</script>
<div class="col-sm-12">
<h2>Session</h2>
<hr />
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div id="MessageListContainer">
<ul id="MessageList">
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
#Html.HiddenFor(m => m.Id)
#Html.HiddenFor(m => m.CurrentUser)
<input class="form-control col-sm-12" id="Message" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="clearfix">
<div class="pull-right">
<input id="Send" type="button" value="Send" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<hr />
</div>
</div>
<script src="~/aspnet/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Your AJAX call that comes back as JSON appears to have a few fields like Name and CreatedOn. You can add an additional field server side for the SessionId, which you are injecting server-side anyway into your HTML. Then you can compare to see if the message's session matches yours. If so, then it is you and not the receiver. So you might have something like:
JS
// You set this earlier on
var SessionId = document.getElementById("Id").value;
// ........ OTHER CODE IN BETWEEN
for (var i = 0; i < output.length; i++) {
var p = document.createElement("span");
var q = document.createElement("li");
// If session ID matches current session (i.e. you) then add different class
if (output[i].SessionId === SessionId) {
// It is you
p.setAttribute("class", "Sender");
} else {
// It is other person
p.setAttribute("class", "Receiver");
}
q.setAttribute("class", "Message");
p.textContent = output[i].Name + " - " + moment(output[i].CreatedOn).format("DD-MM-YYYY HH:mm:ss");
q.textContent = output[i].Message;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
}
CSS
.Sender {
color: blue;
}
.Receiver {
color: green;
}

Connect clicked button value and function in JS

I'm beginner in JS.
I have 2 functions. How to do :
if I click first button, make first function work, if I click second button, make second function work?
Apply pressed button value to function and then apply it to input field.
Example: when I type 'ABC' using Caesar Cipher , it would return 'NOP', when I type 'ABC' using my cipher (or any other), it would return 'BCD' (or any other value, it depends on which cipher is selected). Thanks everyone in advance
My Js and Html code below:
<div class="container">
<div class="row">
<form class="col s12 m12 l12">
<h2>JS Encription</h2>
<div class="row">
<div class="input-field col s5 m5 l5">
<input id="field1" placeholder="Type you text here" id="first_name" type="text" class="validate">
<label for="first_name">Input</label>
</div>
<div class="input-field col s5 m5 l5">
<input id="field2" disabled placeholder="Result is shown here" id="first_name" type="text" class="validate">
<label for="first_name">Output</label>
</div>
</div>
</form>
</div>
<div class="row switchBtns">
<div class="col s12 m12 l12">
<div id="caesarButton" class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">Caesar Cipher</a>
</div>
<div id="mineButton" class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">My Cipher</a>
</div>
<div class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">3rd Variant</a>
</div>
<div class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">4th Variant</a>
</div>
</div>
</div>
</div>
and JS code
// CAESAR
$("#caesarButton").click(function() {
var clicked = $(this).val();
$('#field1').val(encryp(clicked)).val();
});
$('#field1').on('keyup keypress blur', function () {
var textvalue = $(this).val();
$('#field2').val(encryp(textvalue)).val();
});
function encryp(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+13);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-13);
}
else {
result+=" ";
}
}
return result ;
}
//MINE
$("#mineButton").click(function() {
var clicked = $(this).val();
$('#field1').val(encryp(clicked)).val();
});
$('#field1').on('keyup keypress blur', function () {
var textvalue = $(this).val();
$('#field2').val(encryp(textvalue)).val();
});
function encryp(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+3);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-3);
}
else {
result+=" ";
}
}
return result ;
}

I whipped up a simplified example of contextually switching input handler functions for you, here ya go:
// use an object as a key-value store for your functions
var funcs = {
caesar: encryp1, // i dont know if i got these the right way around :D
mine: encryp2
}
// store which funciton is currently selected in a variable
var selected = "caesar"
// call this function just to show the default selected function
determineOutput()
// CAESAR
$("#caesarButton").click(function() {
console.log("caesar button clicked!")
// here assign which function to use
selected = "caesar"
determineOutput()
});
//MINE
$("#mineButton").click(function() {
console.log("mine button clicked!")
// here assign which function to use
selected = "mine"
determineOutput()
});
$('#field1').on('keyup keypress blur', function () {
// this function is alled every time one of the events
// listed happens on the #field1 element
determineOutput()
});
function determineOutput(){
var textvalue = $('#field1').val();
//use the function currently selected by addressing it with
// [] on the funcs object
var correctFunction = funcs[selected]
// then call the selected function with the input text
$('#field2').val(correctFunction(textvalue));
// show the user which cipher we're using
$("#currentCipher").html("current cipher:" + selected)
}
function encryp1(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+13);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-13);
}
else {
result+=" ";
}
}
return result ;
}
function encryp2(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+3);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-3);
}
else {
result+=" ";
}
}
return result ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="field1" placeholder="Type you text here" type="text">
<label for="field1">Input</label>
</div>
<div>
<input id="field2" disabled placeholder="Result is shown here" type="text" class="validate">
<label for="field2">Output</label>
</div>
<p id="currentCipher"></p>
<button id="caesarButton">
Caesar Cipher
</button>
<button id="mineButton">
My Cipher
</button>