Set to true state a checkbox in a different page(javascript)

Question

Here's the Script.

javascript

function linkPageContact(clicked_id){
  if(clicked_id === 'website-design-check'){
        $('#website-design').attr('checked',true);
        window.location.href = "/contact";
    }
  }
}

I want to check my checkboxes when I click the button with an id=website-design-check.

Here is my HTML.

first.html

<a href="/contact" target="_blank">
    <button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>

Here's the second HTML file where checkbox is.

second.html

<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">

Now how can I achieve what I want base on the description given above. Can anyone help me out guys please. I'm stuck here for an hour. I can't get any reference about getting a checkbox state from another page.

Answer 1

You can't handle to other sites via JavaScript or jQuery directly. But there's another way. You can use the GET method to achive this.

First you need to add to the link an attribute like this in your first.html:

/contact?checkbox=true

You can change the link as you want with JavaScript.

Now it will refer to the same page but it can be now different. After that you can receive the parameter with this function on the second.html.

function findGetParameter(parameterName) {
    var result = null,
    tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

I got it from this post thanks to Bakudan.

EDIT: So here is an short theory.

When the user clicks the button on the first page, then you change the link from /contact to /contact?checkbox=true. When the user get forwarded to second.html then you change the checkbox depending on the value, which you got from the function findGetParameter('checkbox').

Answer 2

since your checkbox is in another html page, so it's totally normal that you can't get access to it from your first html page!

what I can offer u is using the localstorage to keep the id and then use it in your second page to check if it's the ID that u want or not.

so change your function to this :

function linkPageContact(clicked_id){
    localStorage.setItem("chkId", "clicked_id");
    window.location.href = "/contact";
}

then in your second page in page load event do this :

$(document).ready(function() { 
    var chkid = localStorage.getItem("chkId");
    if(chkid  === 'website-design-check'){
        $('#website-design').attr('checked',true);
 });

Answer 3

To do this, you can modify your button link and add in additional parameters that you can then process on the next page.

The code for the different pages would be like:

Edit: I changed it to jQuery, it should work now.

Script

function linkPageContact(clicked_id){
  if(clicked_id === 'website-design-check'){
        window.location.href = "second.html?chk=1";
    }
  }

second page

<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">

<script type="text/javascript">
       var url = window.location.href.split("?");
        if(url[1].toLowerCase().includes("chk=1")){
            $('#website-design').attr('checked',true);
        } 
</script>

Answer 4

As all have mentioned you need to use session/query string to pass any variable/values to another page.

One click of the first button [first page] add query string parameter - http://example.com?chkboxClicked=true

<a href="secondpage.html?chkboxClicked=true>
<button>test button</button>
</a>

In the second page- check for the query string value, if present make the checkbox property to true.

In second page-

$(document).ready(function(){
if(window.location.href.contains('chkboxClicked=true')
{
  $('#idOfCheckbox').prop('checked','checked');
}
})

Add it and try, it will work.

Answer 5

Communicating from one html file to another html file

You can solve these issue in different approaches

1. using localStorage
2. using the query parameters
3. Database or session to hold the data.

In your case if your application is not supporting IE lower versions localStorage will be the simple and best solution.

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <a href="contact.html" target="_blank">
      <button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
    </a> 
    <script>
      function linkPageContact(clicked_id) {
        localStorage.setItem("chkId", clicked_id);
      }
    </script>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
    <script>
      $(document).ready(function () { 
        var chkid = localStorage.getItem("chkId");
        if (chkid  === 'website-design-check') {
          $('#website-design').attr('checked', true);
        }  
      });
    </script>
  </body>
</html>