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

Mimi Ashv :

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>     

dkellner :

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.

1. 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.

2. 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>