In my html page, there is a textbox labeled "Type your text" and TextArea list. The goal is to enter text into the textbox and then click the Add button so that the content of the textbox gets added to the TextArea list below. The required format for input in the textbox should be as follows:
Name=Value
Users will use this textbox to quickly add Name Value pairs to the list right below it. For example, if we type Hello=World in the textbox and click add, the entry in the list below should show as:
Hello=World
If we then type ABC=PQR in the same textbox, the list should display the entries like this, continuing to add new Name Value pairs below the existing ones.
Hello=World
ABC=PQR
An error message will pop up if incorrect syntax without a matching pair such as an equal sign or if non-allowed characters are used. Only alphanumeric characters are permitted in both names and values. So far, all functionalities are working correctly without any issues.
There are two additional buttons available - Sort by name and Sort by value. Clicking on either button will rearrange the entries in the TextArea list based on their names or values, respectively. Is it possible to achieve this using JavaScript? Attempts were made with methods named sortByKey and sortByValue, but some issues have arisen during testing and further refinement is required.
A link to the code can be found here: jsfiddle. Pure HTML and JavaScript are being utilized, with no external libraries involved to maintain simplicity and facilitate learning progress. What mistakes may be present here?
The full source code is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#my-text-box {
font-size: 18px;
height: 1.5em;
width: 585px;
}
textarea{
width:585px;
height:300px;
}
.form-section{
overflow:hidden;
width:700px;
}
.fleft{float:left}
.fright{float:left; padding-left:15px;}
.fright button{display:block; margin-bottom:10px;}
</style>
<script language="javascript" type="text/javascript">
document.getElementById('add').onclick = addtext;
function addtext() {
var nameValue = document.getElementById('my-text-box').value;
if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue))
document.getElementById('output').textContent += nameValue + '\n';
else
alert('Incorrect Name Value pair format.');
}
document.getElementById('sortbykey').onclick = sortByKey;
function sortByKey() {
var textarea = document.getElementById("output");
textarea.value = textarea.key.split("=").sort().join("\n");
}
document.getElementById('sortbyvalue').onclick = sortByValue;
function sortByValue() {
var textarea = document.getElementById("output");
textarea.value = textarea.value.split("=").sort().join("\n");
}
</script>
</head>
<body>
<h3>Test</h3>
<label for="pair">Name/Value Pair</label></br>
<div class="form-section">
<div class="fleft">
<input type='text' id='my-text-box' value="Name=Value" />
</div>
<div class="fright">
<button type="button" id='add' onclick='addtext()'>Add</button>
</div>
</div>
</br>
</br>
</br>
<label for="pairs">Name/Value Pair List</label></br>
<div class="form-section">
<div class="fleft">
<textarea id='output'></textarea>
</div>
<div class="fright">
<button type="button" id='sortbykey' onclick='sortByKey()'>Sort by name</button>
<button type="button" id='sortbyvalue' onclick='sortByValue()'>Sort by value</button>
</div>
</div>
</body>
</html>