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

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>

How to change the content of a page with javascript based on select input?

Let's say I have a webpage like this:
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select>
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
As you can see, a user can choose from 4 options in the select menu. I want to know ,is there any way to change the content of this div => <div class="pagetitle"> with javascript onsubmit ? For example if a user choosed blogs.php ,the h5 tag will change to <h5>blogs</h5> & if he choosed portfolio.php ,it'll be changed to <h5>portfolio</h5> . I really appreciate if you know how to do this ... thanks in advance!

You'll need to start by adding a javascript function to handle the event.
<script>
function changedSelect(x)
{
document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>";
}
</script>
And then you'll need to trigger the event when the "select" box is changed.
<select onchange="changedSelect(this.value)">
Finally, I would give the div an "ID" so that it is specifically altered.
<div class="pagetitle" id="pageTitleDiv">

You need to bind a jquery .change event to the select element and have it's selected value populated as the text of h5 tag
<script>
$(document).ready(function(){
$('select').change(function()
{
$('h5').text($(this).val());
}).change(); // this is optional - it basically invokes the change event as soon as the function is registered.
});
</script>
Example : https://jsfiddle.net/DinoMyte/6x80vabm/4/

Using vanilla javascript, I added an id to the select element and used javascript to get the value of the select option, then I updated the element on the DOM.
<div style="margin:auto;text-align:center;padding-top:10px;">
<form action="" method="POST">
<p style="text-align:center;">
<select id="myselect">
<option value="blogs">blogs.php</option>
<option value="portfolio">portfolio.php</option>
<option value="contact">contact.php</option>
<option value="home">home.php</option>
</select>
</p>
<p style="text-align:center;">
<input type="submit" name="submit" onclick="myFunction()" value="Submit"/>
</p>
</form>
</div>
<div class="pagetitle">
<h5>Option Value (for example blogs)</h5>
</div>
<script>
function myFunction() {
var x = document.getElementById("myselect").selectedIndex;
var _value = document.getElementsByTagName("option")[x].value;
document.getElementsByTagName('h5')[0].innerText = _value
}
</script>
Note: This can be achieved in several ways using vanilla JS or libraries, but I think this answers your question.

Javascript program, if statement difficulties

this code does not work, at least not complete way it should. I'm trying to run it so an item is selected and then deposit amounts are chosen on the select menu until the proper amount is equaled or exceeded, resulting in change, but I cant seem to get my if statements to work properly. If anyone sees the problem, I would much appreciate the help.
http://jsfiddle.net/YgX4z/
<script type="text/javascript">
var select;
function changedepositedInput(objDropDown) {
//console.log(parseFloat(objDropDown));
var objdeposited = document.getElementById("deposited");
objdeposited.value=parseFloat(objdeposited.value||'0');
var total=parseInt(objdeposited.value||'0');
objdeposited.value = parseFloat(objDropDown.value||'0')+total;
var cost=parseInt('0');
var water = document.getElementById("water");
var soda = document.getElementById("soda");
var coffee = document.getElementById("coffee");
var beer = document.getElementById("beer");
if (water.checked) {cost=parseInt('75');}
if (soda.checked) {cost=parseInt('150');}
if (coffee.checked) {cost=parseInt('100');}
if (beer.checked) {cost=parseInt('200');}
if (total>cost) {
var change=document.getElementById("change");
change.value=total-cost;
}
else {
var change=document.geElementById("change");
change.value="0";
}
if (total>=cost) {
var objdelivered=document.getElementById("delivered");
objdelivered.value="Yes";
}
else {
var objdelivered=document.getElementById("delivered");
objdelivered.value="No";
}
}
</script>
<h1>Vending Machine Project</h1>
<form name="vendingmachine" action=" ">
Choose Bevrage<br>
<input name="item" type="radio" id="water" checked="checked">Water 75 cents<br>
<input name="item" type="radio" id="soda">Soda $1.50<br>
<input name="item" type="radio" id="coffee">Coffee $1.00<br>
<input name="item" type="radio" id="beer">Beer $2.00<br>
<p>
<label>Deposit Money:
<select name="money" id="money" onchange="changedepositedInput(this)">
<option value="0">Choose Amount</option>
<option value="10">10 cents</option>
<option value="25">25 cents</option>
<option value="50">50 cents</option>
<option value="75">75 cents</option>
<option value="100">$1.00</option>
</select>
</label>
</p>
<p>Total Deposited:<input name="deposited" id="deposited" type="text" readonly="TRUE" value=""></p>
<p>Change Returned:<input name="change" id="change" type="text" readonly="TRUE" value=" "></p>
<p>Bevrage Delivered:<input name="delivered" id="delivered" type="text" readonly="TRUE" value=" "></p>
<p><input type="reset" value="Start Over"></p>

You have a typo here:
var change=document.geElementById("change");
Should be
var change=document.getElementById("change");
If you test in your fiddle, please don't use function changedepositedInput() as it won't evaluate properly. Instead define your function like this:
changedepositedInput=function(){
};
(Note the semicolon in the end)
Hint
You can use a modern browser's error/javascript console (or developer tools, as its oftentimes called) for debugging.
If you open that console and run your original fiddle, you'd get this error:
[Error] ReferenceError: Can't find variable: changedepositedInput
onchange (_display, line 75)
Once the function definition is changed (as mentioned before in my question), the actual problem shows up:
[Error] TypeError: 'undefined' is not a function (evaluating 'document.geElementById("change")')
changedepositedInput (_display, line 46)
onchange (_display, line 74)
Which points you straight at the typo.
See a working fiddle here

show form value in alert after click on button

I am very new on HTML. I just trying to accept form value and want to show this value
in Alert. I try following code but it didn't help me...
I know this is very easy question but i am newbie on HTML,JavaScript. I search but didn't find relative to my requirement....
Javascript function....
function updateTxt(field1,field2)
{
var field1 = document.getElementById(field1);
var field2 = document.getElementById(field2);
alert(field1,field2);
}
HTML form
<input name="textfield" type="text" id="textfield" value="Search by keyword" class="search_input" >
<select name="select" id="select" class="input_list" >
<option>Search jobs by category</option>
<option>Business Sales Leadership Development Program</option>
<option>Business Sales Solutions</option>
<option>CTO</option>
<option>Call Center</option></select>
<input name="button" type="button" class="btn" value="Go" onClick="updateTxt(select,textfield)">
Please give me hint or direct me where i wrong...
Thanks in Advance

change this code
<input name="button" type="button" class="btn" value="Go" onclick="updateTxt()">
and also this
function updateTxt()
{
var field1 = document.getElementById('textfield').value;
var field2 = document.getElementById('select').options[document.getElementById('select').selectedIndex].value;
alert(field1+'&'+field2);
}

You need to pass strings into the updateTxt function. And alert can only take one parameter, so you'll have to concatenate the values of the fields, not the fields themselves. Your code would look like this:
JS:
function updateTxt(field1,field2)
{
var field1 = document.getElementById(field1).value;
var field2 = document.getElementById(field2).value;
alert(field1 + '\n' + field2);
} ​
HTML:
<input name="textfield" type="text" id="textfield" value="Search by keyword" class="search_input" >
<select name="select" id="select" class="input_list" onkeyup="updateTxt('select','txt2');">
<option>Search jobs by category</option>
<option>Business Sales Leadership Development Program</option>
<option>Business Sales Solutions</option>
<option>CTO</option>
<option>Call Center</option></select>
<input name="button" type="button" class="btn" value="Go" onClick="updateTxt('select', 'textfield')">​
Demo

You will need to change the onClick to:
onclick="updateTxt('select','textfield');
because when you are using reserved words in JS it is not good - to say the least ;)
For full list of reseved words: http://www.javascripter.net/faq/reserved.htm
You can see there 'select'.
Btw, you might want to change the names to something better and avoid 'onClick' and JS inside your html.
Good luck.

Your code does not have an element with the id 'txt2'. Also try to use more explicit IDs, like 'myTextField' instead of 'select', it will make it easier to read and maintain your code.
Other than that, Amaan's answer should work.