We Keep Coding

How to select a checkbox based on an datalist option selected (different pages)

I will try to be clear: I have two html, one where I have the form and the other the checkboxes, I would like that it depends on the values ​​that are put in the html of the form (I don't know if it's right to call it that way), some checkboxes appear check or others.
For example,
if i select 'Desserts' and I click on the 'go' button I will go to the
other page, where the checkboxes are, so 'Desserts' checkbox will
appear checked.
I tried to do many thing but nope.
Thank you so much!
HTML 1:
<table id="CategoriesTable">
<tr>
<td>
<form id="categoriesForm" method="POST">
<input type="text" id = "categoriesList" list="categorieslist" name="categories-scroll" placeholder="Type a category.." style="border-radius: 0.5rem;border-width: 0.5px;">
<datalist id="categoriesDatalist">
<option data-value="Desserts"></option>
<option data-value="Starters"></option>
<option data-value="Main"></option>
<option data-value="Soups"></option>
<option data-value="Salad"></option>
<option data-value="Burgers"></option>
</datalist>
</form>
</td>
<td>
<button id ="go-button" class="btn btn-primary" data-dismiss="modal">
<h6 class="text">Go!</h6>
<img class="img-fluid rounded" src="../images/icons/pizza-go.png" alt="" width="50%" style="height: 50px; width: 50px;">
</button>
</td>
</tr>
</table>
HTML 2:
<h5 class="card-header">Categories</h5>
<div class="containersearch">
<ul class="ks-cboxtags">
<li><input type="checkbox" id="checkbox9" value="Desserts"><label for="checkbox9">Desserts</label></li>
<li><input type="checkbox" id="checkbox10" value="Starters" ><label for="checkbox10">Starters</label></li>
<li><input type="checkbox" id="checkbox11" value="Main" ><label for="checkbox11">Main</label></li>
<li><input type="checkbox" id="checkbox12" value="Soups"><label for="checkbox12">Soups</label></li>
<li><input type="checkbox" id="checkbox13" value="Salad"><label for="checkbox13">Salad</label></li>
<li><input type="checkbox" id="checkbox14" value="Burgers"><label for="checkbox14">Burgers</label></li>
</div>

2 possible solutions
If you insist to use only HTML and JavaScript (and no server side script for some reason - it would be super easy using PHP) I see two reasonable ways here, and the first one is what I'd prefer.
GET method One way is using a get request instead of the post. That way, you can get the chosen variable from the location.search string and then use it to target your checkbox. (You'll have to parse the string from that usual ?a=1&b=2-like format but it's easy, esp when you know what you're passing.) So this is one way.
LocalStorage Another way is storing the choice in localStorage and then read it on the next page. I would not recommend this but if you really need that POST to be POST, this might be your only chance to pass values between documents.
Example
For the first solution:
https://deneskellner.com/stackoverflow-examples/60238730/page1.html
page1.html
<form name="myform" action="page2.html">
<select name="chosen">
<option value="yoda"> Master Yoda </option>
<option value="anie"> Anakin Skywalker </option>
<option value="obwn"> Obi-Wan Kenobi </option>
</select><br>
<button type="submit"> Check me on the other side </button>
</form>
page2.html
<input type="checkbox" id="yoda" /> Master Yoda <br>
<input type="checkbox" id="anie" /> Anakin Skywalker <br>
<input type="checkbox" id="obwn" /> Obi-Wan Kenobi <br>
<script>
var pieces = location.search.replace(/^\?/,"").split("&");
var values = [];for(var i in pieces) {let a=pieces[i].split("=");values[a[0]]=a[1];}
var chosen = values["chosen"];
document.getElementById(chosen).checked = true;
</script>
<button type="button" onclick="history.back()"> Let's do it again </button>

When you land on second html-page, run a small javascript code,
for example you selected Desert from the dropdown and passed this to second page.
On second page:
first you read all the checkbox available,
Loop through all the checkbox and compare the value of the checkbox is equals to the value received from page1. i.e (Desert)
If you find the match, then just set the property checked as true for that checkbox.
script will look like:
const allCheckBox = document.querySelectorAll(".ks-cboxtags input");
allCheckBox.forEach((c) => {
if (c.value === "Desserts") {
c.checked = true;
}
})

Multiple Lines for "Change Dropdown values based on input in textfield"

First of all, thank you very much for supporting me in: Change Dropdown values based on input in textfield
Now I need to extend this feature.
Here is the code for changing the drop down menue based on a text field value (Thank you very much, Rion Williams):
https://jsfiddle.net/q5s24th2/
Now I would like to add more persons for which I can also enter the textfield value so that the drop down menu changes its content. Here I have created something to add more people:
https://jsfiddle.net/xsnLc48o/
<p id="maintable">1:
<input name="Year1" type="text" value="" />
<select name="Results1">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<input name="Additional1" type="checkbox" title="Option" value="1" />Option
</p>
<p>
<input type="button" value="+ Add Person" id="addRows" />
</p>
Unfortunately for the added persons the drop down feature does not work (I have tried several things).
If anybody has an idea how to do it, I would be very happy.
Maybe there is a much better possibility than using the addRows/append feature.
Thank you in advance.
Best regards,
Andy

You could accomplish this by creating a function that would clone one of your existing rows and append it to content. It may be best to consider using a table to more easily organize your content :
<table id="maintable">
<tr class='person-row'>
<td class='person-number'>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
And then adjusting your "add rows" function to clone the first row and then store a counter of the number of current users so that you can append that to the name attribute as expected :
// When you add a new user
$("#addRows").click(function(){
// Determine the next users number
var nextUser = $('.person-row').length + 1;
// Clone the first row
var nextUserRow = $('#maintable tr:first').clone();
// Update your attributes
$(nextUserRow).find('.person-number').text(nextUser + ':');
$(nextUserRow).find('.person-year').attr('name','Year' + nextUser).val('');
$(nextUserRow).find('.person-value').attr('name','Results' + nextUser);
$(nextUserRow).find('.person-additional').attr('name','Additional' + nextUser);
// Set the defaults for the row
$(nextUserRow).find('select option:not(:first)').each(function() {
var valueToUse = $(this).attr('data-over-18');
$(this).val(valueToUse).text(valueToUse + '.-');
});
// Append the row
$("#maintable").append(nextUserRow);
});
You can see a working example of this in action here and demonstrated below :

How to save information based on what the user has clicked on (category)

example img of a category selection by user
Hey, I'm trying to set up a selection where the user has to pick a category and a second category and I have no idea how to get the information he clicked on.
After the user has clicked on the category it will add the .active and the next button appears.
After clicking the next button a formular (based on the category he picked) will fadeIn and I need the category Information, because after submitting the formular I want the category to be saved, too.
So, how can I save the information he clicked on? I don't want to use a dropdown or radiobuttons but I'm open to anything else (js / jquery, php) if it looks like the example on the image.
I tried it with buttons like:
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="1st cat"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="1st cat"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="1st cat">
</form>
I also thought about looking for the class-combo (which one has the .active when clicking the next button)
like:
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
})
so the clicked category has both:
/*$('.cat1.active')*/
But I don't know how to read this out,
This isn't the complete code for what I'm trying to do, but I only need to know the data save part. Please help me :(

just change the value
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="apple"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="banana"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="orange">
</form>
you can get the value from this method
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
var v = $(this).val();//the v is apple or banana or orange
})
or just like that
var v = $('.cat1.active').val();//the v is apple or banana or orange

You can cache off their selection like this:
var food = 'apple'
function getFood(element) {
food = document.getElementById('foods').value;
console.log(food);
}
<select id="foods" onChange="getFood(this);">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>

Dynamic Form Builder

Main goal: I would like to create a dynamic form-building tool that allows the user to select certain options that, when chosen, enable subsequent inputs to occur.
An example of what I am describing:
Text Entry: Put in a Chapter Name.
Choose to add question
Choose Question type (mult. choice, check box, etc.)
Type in question.
Choose to add new question. If so, repeat ques. steps.
Choose to add new Chapter. If so, repeat add ques. options.
Submit whole content from above, and export (with the ultimate goal of being parsed/prepared into format for use, as per these guidelines (but that's for much later).
Example of what I have done so far: JS Fiddle
Note: Example is incomplete. Stopped because I realize I am building a mess and assume there is an easier/better way to do this.
Thanks in advance for any assistance that can be offered - I hope I was clear!
Kuan
Caveat: I am relatively new to programming/etc. That said, I feel I have searched quite a bit and there appears to be not much in regards to this specifically (the difficulty being primarily the nested nature of the questions, within the chapters).
JS Fiddle code:
<title>Dynamically build FT survey</title>
<script language="javascript">
function addChap(name) {
var element = document.createElement("li");
element.innerHTML = name;
var foo = document.getElementById("currentChapList");
//Append the element in page (in span).
foo.appendChild(element);
// Update drop down select lists
updateSelect();
}
function delChap() {
var foo = document.getElementById("currentChapList");
var allChildNodes = foo.childNodes;
var lastElem = allChildNodes.length - 1;
foo.removeChild(allChildNodes[lastElem]);
// Update drop down select lists
updateSelect();
}
function updateSelect() {
// First delete everything in the Chapter selection list
var currentChaps = document.getElementById("chapOptions");
var newFoo = document.getElementById("currentChapList");
for (i = 0; i < currentChaps.children.length; i++) {
currentChaps.remove(currentChaps.children[i]);
}
// Then re-add the remaining components from Chapter list
for (i = 0; i < newFoo.children.length; i++) {
nfCont = newFoo.children[i].innerHTML;
nfElem = document.createElement("option");
nfElem.innerHTML = nfCont;
currentChaps.appendChild(nfElem);
}
}
function addAns() {
//Create an input type dynamically.
var element = document.createElement("input");
var foo = document.getElementById("lastAns");
foo.appendChild(element);
}
function addQues() {
var allQues = document.getElementById("questionSubSect");
var newQues = document.createElement("div");
newQues.innerHTML = allQues.innerHTML;
//Append the element in page (in span).
allQues.appendChild(newQues);
}
</script>
</head>
<body>
<b>Current Chapter Index</b>
<br>
<ol id="currentChapList">
</ol>
<input type="text" style="width:400px" value="Enter Chapter Name" id="newChapName"/><br>
<input type="button" value="Add Chapter" onclick="addChap(newChapName.value)"/>
<input type="button" value="Delete Last Chapter" onclick="delChap()"/>
<br>
<br>
<b>Dynamically add element in form.</b>
<br>
Select the element and hit Add to add it in form.
<br>
<br>
<b>Chapter Builder</b>
<br>
<form>
Chapter Select:
<select id="chapOptions"></select>
<br>
<div id="questionSubSect">
<br>
Question ID:
<input type="text" style="width:400px" value="Enter Question"/>
<br>
Question:
<input type="text" style="width:400px" value="Enter Question"/>
<br>
Question Type:
<select name="element">
<option value="text">Checkbox</option>
<option value="text">Multiple Choice</option>
<option value="text">Open Text</option>
<option value="number">Open Number</option>
<option value="text">Ordered List</option>
<option value="image">Picture</option>
<option value="text">True or False</option>
</select>
<br>
Other open answer option:
<select name="element">
<option value="text">False</option>
<option value="text">True</option>
</select>
<br>
<br>
<span id="lastAns"></span>
<br>
<input type="button" value="Add Answer Option" onclick="addAns()"/>
<br>
<br>
</div>
<span id="lastQues"></span>
<input type="button" value="Add New Question" onclick="addQues()"/>
</form>
</body>

I have done some investigation about dynamic form. Here are some excellent open-source solutions. They usually do it in this way:
describe form structure as JSON in the backend.
then use one of the following libraries to render JSON to form in the frontend.
jsonform/jsonform
React JSONSchema Form (React) (demo)

g:javascript working in firefox but not in chrome

this works perfectly as I want it to in Firefox, but it does not work in Chrome. Can anyone point me in the right direction please?
<g:javascript>
function selectedStatus()
{
var index = j("#statusId");
if(${statusValue} = ${Status.getAllEnums()})
{
index.selectedIndex = ${statusValue};
}
}
</g:javascript>
I am passing a value for a users status from a controller to a gsp page. I check to see if the value is equal to one of the values in the grails select, and if it is then I set this "current" value as the value appearing in the select box.
Here is my gsp...
<g:formRemote name="custom_status" url="[controller: 'traffic', action: 'status']">
<h4>
<g:select id="statusId" name="MyStatus" from="${Status.getAllEnums()}" value="${statusValue}" noSelection="['':'Please Select...']" onload="selectedStatus()" onchange="document.getElementById('sub_status').value = ''"/>
</h4>
<g:textField name="sub_status" value="${subStatusValue}" />
<g:submitButton name="submit_status" value="Apply Status" />
</g:formRemote>
The select box changes as desired in Firefox but no change occurs in Chrome.
Here is the resulting HTML...
<form onsubmit="jQuery.ajax({type:'POST',data:jQuery(this).serialize(), url:'/portal/traffic/status',success:function(data,textStatus){},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false" method="post" action="/portal/traffic/status" id="custom_status">
<h4>
<select name="status" id="statusId" onload="selectedStatus()" onchange="document.getElementById('sub_status').value = ''" >
<option value="">Please Select...</option>
<option value="available" >available</option>
<option value="away" >away</option>
<option value="dnd" >dnd</option>
<option value="unavailable" >unavailable</option>
</select>
</h4>
<input type="text" name="sub_status" value="In a meeting" id="sub_status" />
<input type="submit" name="submit_status" value="Apply Status" id="submit_status" />
</form>
<br/>
Thanks

It's really strange why value="${statusValue}" doesn't work here. Btw, your Javascript code maybe invalid (i'm not sure what you have as a result JS, but it's very likely), so try following:
<g:javascript>
j(document).ready(function ()
{
j("#statusId").val('${statusValue}'); //I guess `j` is your prefix for jQuery, right?
});
</g:javascript>
and remove onload="selectedStatus()"