Develop Reference

Return <ul> list to flask backend

I have a webpage with a list where the user can choose to discard lines clicking on the cross (the data is imported from a DB). I want the list of the remaining lines to be returned when the user clicks on the button at the bottom.
The page looks like this:
This is the code of the page:
<script type="text/javascript">
function removeParent(e) {
var toDel = e.parentNode;
toDel.parentNode.removeChild(toDel);
}
function printresult() {
var test = document.getElementById("tableID");
console.log(test);
}
</script>
{% endblock %} {% block body %}
<form class="adminSongsListForm" action="/admintools" method="POST">
<table id="tableID">
<tr class="adminToolsLine">
<th class="adminToolsBox1" type="text" name="Artist" id="Artist">
Artist
</th>
<th class="adminToolsBox1" type="text" name="Album" id="Album">Album</th>
<th class="adminToolsBox2" type="text" name="Track" id="Track">Track</th>
<th class="adminToolsBox3" type="text" name="Genre" id="Genre">Genre</th>
<th class="adminToolsBox3" type="text" name="Length" id="Length">
Length
</th>
<th class="adminToolsBox1" type="text" name="Infos" id="Infos">
Infos
</th>
<th class="adminToolsBox0Header">Decline</th>
</tr>
<ul>
{% for line in tracks %}
<li class="adminToolsGrid">
<tr class="adminToolsLine">
<td class="adminToolsBox1" type="text" name="Artist" id="Artist">
{{line[1]}}
</td>
<td class="adminToolsBox1" type="text" name="Album" id="Album">
{{line[2]}}
</td>
<td class="adminToolsBox2" type="text" name="Track" id="Track">
{{line[3]}}
</td>
<td class="adminToolsBox3" type="text" name="Genre" id="Genre">
{{line[4]}}
</td>
<td class="adminToolsBox3" type="text" name="Length" id="Length">
{{line[5]}}:{{line[6]}}
</td>
<td class="adminToolsBox1" type="text" name="Infos" id="Infos">
{{line[7]}}
</td>
<td class="adminToolsBox0Line" onclick="removeParent(this)">X</td>
</tr>
</li>
{% endfor %}
</ul>
</table>
<div class="buttonHolder">
<button class="UploadButton" type="button" onclick="printresult()">
Submit list
</button>
</div>
</form>
{% endblock %}
When I click on submit list the print result function works perfectly and prints in the web console exactly what I want but I have no idea on how to send this to the Flask backend:
nothing shows up in the python terminal when I click Submit the list
#app.route('/admintools', methods=["POST", "GET"])
##login_required
def admintools():
tracks = observed_tracks(get_tracks())
if request.method == "POST":
print("request.method == POST")
print(str(request.form))
return render_template("tools/admintools.html", tracks=tracks) ```

Short answer:
I turned the data into a JSON and sent it using a XMLHTTP request
Long answer:
JavaScript:
<script type="text/javascript">
function removeParent(e) {
var toDel = e.parentNode;
toDel.parentNode.removeChild(toDel);
}
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) {
// element
// do attributes
if (xml.attributes.length > 0) {
obj["#attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["#attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) {
// text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof obj[nodeName] == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof obj[nodeName].push == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
}
function sendData() {
let data = document.getElementById("tableID");
console.log(data);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/validate", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(xmlToJson(data)));
console.log(xhr);
}
</script>
Only the button changed in the HTML
<button
type="button"
class="UploadButton"
value="Send form"
onclick="sendData();"
>
Submit list
</button>
Flask:
def validate():
tracks = observed_tracks(get_tracks())
if request.method == "POST":
data = (request.data.decode('UTF-8'))
list_validated = validation(validated[1:])
return render_template("tools/validate.html", tracks=tracks)
The 'data' variable will be the JSON from the web page

Loop through dynamically generated HTML elements with the same Class and build objects with their data

I am trying to collect data from a table that is dynamically generated on a button click. As you will see below, the button creates a new text box and a multiselect drop down. Currently, my code will only grab the first value from both the textbox and the dropdown.
My end goal is to create an object of key/values that will look like this:
{"group 1":[multiselect value, multiselect value], "group 2": [multiselect value, multiselect value, multiselect value], "group 3": [multiselect value, multiselect value]}
Below is my current code. Any guidance is appreciated!
function servicePackageAdd()
{
var serviceName = document.getElementById('servicePackageText').value;
var serviceList = document.querySelectorAll('.service');
var serviceGroupName = [];
for (var i = 0; i < serviceList.length; i++)
{
serviceGroupName.push(serviceList[i].querySelector('input.packageGroupName').value);
var sourceType = document.querySelector('select#multiple-checkboxes');
var serviceArray = [];
for (i = 0; i < sourceType.selectedOptions.length; i++)
{
serviceArray.push(parseInt(sourceType.selectedOptions[i].value));
}
var groupName = {};
groupName[serviceGroupName] = serviceArray;
ungroupedServiceArray = [];
}
}
document.getElementById('addGroup').onclick = duplicate;
function duplicate()
{
var original = document.getElementById('addService');
var rows = original.parentNode.rows;
var i = rows.length - 1;
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplic" + (i); // there can only be one element with an ID
original.parentNode.insertBefore(clone, rows[i]);
}
var divs = ["addService"];
var visibleDivId = null;
function toggleCheckbox(divId)
{
if(visibleDivId === divId)
{
visibleDivId = null;
} else
{
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs()
{
var i, divId, div;
for(i = 0; i < divs.length; i++)
{
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId)
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
}
function servicePackageName()
{
var servicePackageName = document.getElementById('servicePackageText').value;
var servicePackageNameBold = servicePackageName.bold().fontcolor('#337ab7');
document.getElementById('servicePackageInputName').innerHTML = servicePackageNameBold;
}
<div>
<div class="servicePackageCreation">
<h2><b>Service Package Administration</b></h2>
<br>
<span><p><b>Create Service Package: </b></p><p id="servicePackageInputName"></p></span>
<div class="form-group">
<input type="text" class="form-inline" id="servicePackageText" minlength= 1 placeholder=" Service Package Name" required>
<button type="button" class="btn btn-primary" onclick="toggleCheckbox('addService'); servicePackageName();" id="addGroupsAndServices">Next</button>
</div>
<table>
<tr id="addService" class="service" style="display:none">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName"/>
</td>
<td>
<span><b>Add Services</b></span>
<select id="multiple-checkboxes" multiple="multiple">
<?php echo $servicehtml ?>
</select>
</td>
</tr>
<tr>
<td>
<button id="addGroup" class="btn btn-primary" onclick="duplicate()">Add More</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-success test1234" onclick="confirmAddButton()" id="adminBulkConfirm">Create</button>
<br>
<br>
</div>

Using Object.values Array#map and Array#reduce.
const services = document.querySelectorAll(".service");
const res = Object.values(services)
.map((service, i) => {
const inputText = service.querySelector('.packageGroupName').value;
return {
[inputText]: [...service.querySelectorAll('option:checked')].map(o => Number(o.value))
}
})
.reduce((a, c) => ({ ...a,...c}), {});
console.log(res);
table {
display: none;
}
<table>
<tr class="service">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName" value="Banana" />
</td>
<td>
<span><b>Add Services</b></span>
<select class="multiple-checkboxes" multiple="multiple">
<option value="1" selected>12</option>
</select>
</td>
</tr>
<tr class="service">
<td>
<span><b>Service Group Name</b></span>
<input type="text" name="servicetype" id="packageGroupName" class="packageGroupName" value="Orange" />
</td>
<td>
<span><b>Add Services</b></span>
<select class="multiple-checkboxes" multiple>
<option value="2" selected>2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" onclick="duplicate()">Add More</button>
</td>
</tr>
</table>

Adding quantity of shopping cart table rows items

I have the following markup in foreach :
#foreach($addedToCart as $item)
<tr class="cart-row">
<td>{{ $item->product->name }}</td>
<td>{{ $item->product->price }}</td>
<td>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="text" id="number" class="totalQuantity" value="1" />
<div class="value-button" id="increase" class="increase" data-unit-price="{{ $item->product->price }}" onclick="increaseValue()" value="Increase Value" data-value="1">+</div>
</td>
</tr>
#endforeach
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Total Amount : $ <span id="totalAmount"> 0</span></h3>
</div>
Jquery :
$('#increase').on("click", function () {
var st = 0;
$('.cart-row').each(function () {
var i = $('#increase', this);
var up = $(i).data('unit-price');
var q = $('.totalQuantity').val();
st = st + (up * q);
});
$('#totalAmount').text(st);
});
The issue is that, It only works for only first row.
The <tr></tr> is in foreach and every tr have class cart-row.
What am i missing ?

Its working on 1st element only because there must be only one ID in a DOM. If you put more than one then it will consider the 1st one from top in the DOM.
From the code you have posted, I can see that you have also binded class with the same name. So if you use it as a selector in your jquery code it will work fine.
$('.increase').on("click", function () {
var st = 0;
$('.cart-row').each(function (i, obj) {
var up = $('.cart-row:eq('+i+')').find('.increase').data('unit-price');
var q = $('.cart-row:eq('+i+')').find('.totalQuantity').val();
st = st + (up * q);
});
$('#totalAmount').text(st);
});

JavaScript remove element from multiple select boxes

I have a form where I have a select box and a drop down menu with two buttons and a text field. Enter an item into the text field and it gets added to BOTH the select box above AND the drop down menu. I can figure out how to remove the selected item from the select box but how do I ALSO remove it from the drop down menu??
Working JS FIDDLE EXAMPLE
NOTE: On the actual form these will be on different tabs so you won't be able to see them at the same time, the list just needs to populate from one area to the other.
CSS
#sbox {
overflow: hidden;
width: 200px;
}
HTML
<select id="sbox" name="selectbox" size="5"></select>
<BR>
<button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click "Add to List". To remove a problem, click it in the list, then click, "Delete Selected Problem"<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
</p>
Problem being detailed:<BR>
<select name="select" id="dbox">
</select>
JAVASCRIPT
function ListProbs() {
var x = document.getElementById("sbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
ListProbs2();
}
function ListProbs2() {
var y = document.getElementById("dbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
y.add(option);
ProbAreaFrom.value="";
}
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
x.options[i].remove();
}
}
}

function DeleteProbs() {
var x = document.getElementById("sbox");
var y = document.getElementById("dbox");
var val;
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
val = x.options[i].value;
x.options[i].remove();
}
}
for (var i = 0; i < y.options.length; i++) {
if (y.options[i].value == val) {
y.options[i].remove();
}
}
}

working fiddle. Added a button to remove selected item from select element. The function's name is
DeleteProbs2
http://jsfiddle.net/4uBYf/2/
function ListProbs() {
var x = document.getElementById("sbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
ListProbs2();
}
function ListProbs2() {
var y = document.getElementById("dbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
y.add(option);
ProbAreaFrom.value="";
}
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
x.options[i].remove();
}
}
}
function DeleteProbs2() {
var index = $('#dbox').get(0).selectedIndex;
$('#dbox option:eq(' + index + ')').remove();
}
html
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<select id="sbox" name="selectbox" size="5"></select>
<BR>
<button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click "Add to List". To remove a problem, click it in the list, then click, "Delete Selected Problem"<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
</p>
Problem being detailed:<BR>
<select name="select" id="dbox">
</select>
<button type="button" class="btn btn-default" id="test" onclick="DeleteProbs2();">remove from select</button>
</td>
</tr>
</tbody>
</table>
</div>
update for your request (first button removes from both elements)
http://jsfiddle.net/4uBYf/5/
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
var text=$( "#dbox option:selected" ).text();
$('#dbox option').filter(function () { return $(this).html() == text; }).remove();
x.options[i].remove();
}
}
}

not able to resolve form.all_skill is undefined in javascript

My javascript code is
function addTaskSkill(form) {
var at = form.all_skill.length -1;
var td = form.task_skill.length -1;
var tasks = "x";
if(td>=0 && form.task_skill.options[0].value==skll_id){
form.task_skill.options[0] = null;
td = form.task_skill.length -1;
}
for (td; td > -1; td--) {
tasks = tasks + "," + form.task_skill.options[td].value + ","
}
for (at; at > -1; at--) {
if (form.all_skill.options[at].selected && tasks.indexOf("," + form.all_skill.options[at].value + ",") == -1) {
t = form.task_skill.length
opt = new Option(form.all_skill.options[at].text, form.all_skill.options[at].value);
form.task_skill.options[t] = opt
}
}
//checkForTaskSkill(form.task_skill);
}
function removeTaskSkill(form) {
td = form.task_skill.length -1;
for (td; td > -1; td--) {
if (form.task_skill.options[td].selected) {
form.task_skill.options[td] = null;
}
}
}
And My calling function is
<form action="#" method="post" name="detailFrm">
<table>
<tr>
<td>
<select name="all_skill" size="10" class="span5" multiple="multiple" >
<option value="30">Apache</option>
<option value="31">Microsoft IIS</option>
<option value="32">Tomcat</option>
<option value="34">JBoss</option>
<option value="35">BEA WebLogic</option>
</select>
</td>
<td><input type="button" class="btn" value=">" onclick="javascript:addTaskSkill(document.detailFrm)" />
<br><br><input type="button" class="btn" value="<"
onclick="javascript:removeTaskSkill(document.detailFrm)" /></td>
<td>
<select name="task_skill" class="span5" size="10" multiple="multiple"> </select>
</td>
</tr>
</table>
</form>
Here i am selecting some option from one selectbox & on clicking >> it should push to next selectbox. the error i am getting is
TypeError: form.all_skill is undefined
[Break On This Error]
var at = form.all_skill.length -1;
I am not getting the solution for this. Please help here to get the solution. i am trying to make a listbox swapper.
Thanks in advance.

To reference the elements of a form you can either use the form elements selection like this:
form.elements['all_skill'] // where form is: document.detailFrm
Or you use an ID:
//HTML
<select name="all_skill" id="all_skill" size="10" class="span5" multiple="multiple" >
// in JS
document.getElementById('all_skill');