色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何用Javascript實(shí)現(xiàn)搜索查詢？

CSS

我用HTML/CSS做前端，寫(xiě)了Javascript函數(shù)實(shí)現(xiàn)搜索功能和標(biāo)簽打開(kāi)功能。我還創(chuàng)建了一個(gè)搜索欄，允許用戶在搜索欄中輸入姓名。然而，我試圖得到搜索字符串查詢，并自動(dòng)打開(kāi)一個(gè)標(biāo)簽與用戶填寫(xiě)的姓名(例如，約翰史密斯)，應(yīng)該打開(kāi)如下鏈接:https://ycor-reey.gov.yk.ca/search?姓名=約翰+史密斯& amp參考=。

以下是我的代碼:

function displayPersonOrCompanySearchFields(){
    let person = document.getElementById("person-subject");
    let company = document.getElementById("company-subject");
    let person_states = document.getElementById("person-search-states");
    let company_states = document.getElementById("company-search-states");
    let person_field = document.getElementById("person-search-field");
    let company_field = document.getElementById("company-search-field");
    
    if(person.checked === true){
      person_states.style.display = "block";
      person_field.style.display = "block";
      company_states.style.display = "none";
      company_field.style.display = "none";
    }else{
      company_states.style.display = "block";
      company_field.style.display = "block";
      person_states.style.display = "none";
      person_field.style.display = "none";
    }
  }

const openCorporateRecordTabs = () => {
  const selectedStateName = document.querySelector('input[name="state-name"]:checked').value;
  const selectedStateUrls = corporaterecordsUrls[selectedStateName];
  selectedStateUrls.forEach(url => window.open(url));
}

const corporaterecordsUrls = {
    "federal-level": ["https://www.ic.gc.ca/app/scr/cc/CorporationsCanada/fdrlCrpSrch.html?locale=en_CA"],
    "alberta": ["https://beta.canadasbusinessregistries.ca/search"],
    "british-columbia": ["https://beta.canadasbusinessregistries.ca/search", "https://www.bccourts.ca/search_judgments.aspx", "https://www.provincialcourt.bc.ca/judgments.php?link=https://www.canlii.org/en/bc/bcpc/"],
    "manitoba": ["https://beta.canadasbusinessregistries.ca/search", "https://companiesonline.gov.mb.ca/"],
    "new-brunswick": ["https://opencorporates.com/", "https://www.pxw2.snb.ca/"],
    "newfoundland-and-labrador": ["https://opencorporates.com/"],
    "nova-scotia": ["https://opencorporates.com/", "https://rjsc.novascotia.ca/?__cf_chl_jschl_tk__=c123b354ac59e279f1af733e938177f6c5426b4a-1618521288-0-AUxWaXpKmCqfw-_YAUdjtk9Q2Cbm53t55RP0T100hw2a-m7_3UjG_TDZ-Om5CGN9UH6sEha24sil5RRjdqN2Pbasm6aYHl-j71DEpm6LtYb3nGs3QeAcHtzo4c01CRDqUPYwGLqDqIoX7C3PQU6OigVbBEOCD9-gOgBNI8bqNTqV7LEQZ1nKpbwhqOdF7RpW5EfMA4r7fCDWekXEjsNRdUxOOmLCI2oUMhF4PlclYnaRp7FmMr4FrdNCOm9Ch5O2YUogg6qxaT0GmrMVTUz8Y1rbdAH4VKcANUaK6x9HXjzveieEkSd65Dcrn7ezVPTP12S3r43_J9O1eDlIYb961XlVfsHPB2I9K1rG_2c8S-H97YS4gKEpI4M4uu_CqfF0L0l_PamEKWc-pG-yuqhsNPxLIfa9YrVkLUBJs-BHQ_Hhyt9YB6F0YrP8NNs6rTvraw"],
    "ontario": ["https://beta.canadasbusinessregistries.ca/search", "https://www.eservicecorp.ca/"],
    "prince-edward-island": ["https://opencorporates.com/", "https://www.princeedwardisland.ca/en/feature/pei-business-corporate-registry#/home/BusinessAPI/BusinessAPI"],
    "quebec": ["https://beta.canadasbusinessregistries.ca/search", "http://www.registreentreprises.gouv.qc.ca/en/"],
    "saskatchewan": ["https://beta.canadasbusinessregistries.ca/search", "https://corporateregistry.isc.ca/"],
    "northwest-territories": ["https://decisia.lexum.com/nwtcourts-courstno/en/nav.do"],
    "nunavut": ["https://nni.gov.nu.ca/business/search/name"],
    "yukon": ["https://ycor-reey.gov.yk.ca/search"],
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/canada.css"> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script defer src="/canada.js"></script>
        <title>MESA Canada</title>
    </head>
    <body>
        <div class="container">
            <p class="title">MESA Canada</p>
        </div>
        <div id="company-search-field">
          <input id="company-name" name="company-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert company name here" />
        </div>
        <div id="person-search-field" style="display: none;">
          <input id="first-name" name="first-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person first name here" />
          <input id="last-name" name="last-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person last name here" />
        </div>
        <br>
        <div class="search-subject" style="margin-left: 1rem;">
          <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="company-subject" name="subject-type" value="company-subject" checked>
          <label for="company-subject">Company</label>
          <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="person-subject" name="subject-type" value="person-subject">
          <label for="person-subject">Person</label>
        </div>
        <br></br>
        <!-- WHEN COMPANY IS SELECTED -->
        <div id="company-search-states">
          <div class="states-dropdown-list">
            <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
                <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Records</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
                <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 26rem; background-color: black;">
                    <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                    </svg>
                </div>
                <ul class="states-dropdown" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                    <li><label><input type="checkbox" name="state-name" class="state" value="federal-level" checked>Federal Level</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="alberta">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="british-columbia">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="manitoba">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="new-brunswick">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="newfoundland-and-labrador">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="nova-scotia">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="ontario">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="prince-edward-island">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="quebec">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="saskatchewan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="northwest-territories">Northwest Territories</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="nunavut">Nunavut</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="yukon">Yukon</label></li>
                </ul>
                <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
                <br>
                <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
                <br></br>
                <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openCorporateRecordTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Corporate Records</button>
                <br></br>
                <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openSelectedStateTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Litigation Cases</button>
            </form>
          </div>
        </div>
        <!-- WHEN PERSON IS SELECTED -->
        <div id="person-search-states" style="display: none;">
          <div class="states-dropdown-list">
            <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;;">
                <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Affiliations</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
                <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 28rem; background-color: black;">
                    <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                    </svg>
                </div>
                <ul class="states-dropdown" id="provinces-list" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
                    <li><label><input type="checkbox" name="state-name" class="state" value="federal-level" checked>Federal Level</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="alberta">Alberta<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="british-columbia">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="manitoba">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="new-brunswick">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="newfoundland-and-labrador">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="nova-scotia">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="ontario">Ontario<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="prince-edward-island">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="quebec">Quebec<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="saskatchewan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="northwest-territories">Northwest Territories</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="nunavut">Nunavut</label></li>
                    <li><label><input type="checkbox" name="state-name" class="state" value="yukon">Yukon</label></li>
                </ul>
                <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
                <br>
                <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
                <br></br>
                <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openCorporateRecordTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Corporate Records</button>
                <br></br>
                <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openSelectedStateTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Litigation Cases</button>
            </form>
          </div>
        </div>

由于代碼在IFrame中運(yùn)行，所以不會(huì)在堆棧溢出代碼段上打開(kāi)選項(xiàng)卡，請(qǐng)通過(guò)調(diào)試窗口檢查您的代碼中是否存在這種情況。

win = window.open(url);
if (win) {
  ...

對(duì)于函數(shù)openCorporateRecordTabs(): 我將document.querySelector更改為document.querySelectorAll，以便考慮所有選擇的元素。然后從結(jié)果數(shù)組中提取URL，如下所示:

const selectedStateUrls = Array.from(selectedStateName, x => corporaterecordsUrls[x.value]);

第二個(gè)按鈕(觸發(fā)openSelectedStateTabs())也需要修復(fù)。

下面是修改后的代碼，希望對(duì)您有所幫助:

function displayPersonOrCompanySearchFields() {
  let person = document.getElementById("person-subject");
  let company = document.getElementById("company-subject");
  let person_states = document.getElementById("person-search-states");
  let company_states = document.getElementById("company-search-states");
  let person_field = document.getElementById("person-search-field");
  let company_field = document.getElementById("company-search-field");

  if (person.checked === true) {
    person_states.style.display = "block";
    person_field.style.display = "block";
    company_states.style.display = "none";
    company_field.style.display = "none";
  } else {
    company_states.style.display = "block";
    company_field.style.display = "block";
    person_states.style.display = "none";
    person_field.style.display = "none";
  }
}

const openCorporateRecordTabs = () => {
  const selectedStateName = document.querySelectorAll('input[name="state-name"]:checked');
  // populate array selectedStateUrls
  const selectedStateUrls = Array.from(selectedStateName, x => corporaterecordsUrls[x.value]);

  selectedStateUrls.forEach(url => {
    win = window.open(url);
    if (win) {
      //Browser has allowed it to be opened
      win.focus();
    } else {
      //Browser has blocked it
      alert(`trying to open ${url} - Please allow popups for this website`);
    }
  });
}

const corporaterecordsUrls = {
  "federal-level": ["https://www.ic.gc.ca/app/scr/cc/CorporationsCanada/fdrlCrpSrch.html?locale=en_CA"],
  "alberta": ["https://beta.canadasbusinessregistries.ca/search"],
  "british-columbia": ["https://beta.canadasbusinessregistries.ca/search", "https://www.bccourts.ca/search_judgments.aspx", "https://www.provincialcourt.bc.ca/judgments.php?link=https://www.canlii.org/en/bc/bcpc/"],
  "manitoba": ["https://beta.canadasbusinessregistries.ca/search", "https://companiesonline.gov.mb.ca/"],
  "new-brunswick": ["https://opencorporates.com/", "https://www.pxw2.snb.ca/"],
  "newfoundland-and-labrador": ["https://opencorporates.com/"],
  "nova-scotia": ["https://opencorporates.com/", "https://rjsc.novascotia.ca/?__cf_chl_jschl_tk__=c123b354ac59e279f1af733e938177f6c5426b4a-1618521288-0-AUxWaXpKmCqfw-_YAUdjtk9Q2Cbm53t55RP0T100hw2a-m7_3UjG_TDZ-Om5CGN9UH6sEha24sil5RRjdqN2Pbasm6aYHl-j71DEpm6LtYb3nGs3QeAcHtzo4c01CRDqUPYwGLqDqIoX7C3PQU6OigVbBEOCD9-gOgBNI8bqNTqV7LEQZ1nKpbwhqOdF7RpW5EfMA4r7fCDWekXEjsNRdUxOOmLCI2oUMhF4PlclYnaRp7FmMr4FrdNCOm9Ch5O2YUogg6qxaT0GmrMVTUz8Y1rbdAH4VKcANUaK6x9HXjzveieEkSd65Dcrn7ezVPTP12S3r43_J9O1eDlIYb961XlVfsHPB2I9K1rG_2c8S-H97YS4gKEpI4M4uu_CqfF0L0l_PamEKWc-pG-yuqhsNPxLIfa9YrVkLUBJs-BHQ_Hhyt9YB6F0YrP8NNs6rTvraw"],
  "ontario": ["https://beta.canadasbusinessregistries.ca/search", "https://www.eservicecorp.ca/"],
  "prince-edward-island": ["https://opencorporates.com/", "https://www.princeedwardisland.ca/en/feature/pei-business-corporate-registry#/home/BusinessAPI/BusinessAPI"],
  "quebec": ["https://beta.canadasbusinessregistries.ca/search", "http://www.registreentreprises.gouv.qc.ca/en/"],
  "saskatchewan": ["https://beta.canadasbusinessregistries.ca/search", "https://corporateregistry.isc.ca/"],
  "northwest-territories": ["https://decisia.lexum.com/nwtcourts-courstno/en/nav.do"],
  "nunavut": ["https://nni.gov.nu.ca/business/search/name"],
  "yukon": ["https://ycor-reey.gov.yk.ca/search"],
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/canada.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script defer src="/canada.js"></script>
  <title>MESA Canada</title>
</head>

<body>
  <div class="container">
    <p class="title">MESA Canada</p>
  </div>
  <div id="company-search-field">
    <input id="company-name" name="company-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert company name here" />
  </div>
  <div id="person-search-field" style="display: none;">
    <input id="first-name" name="first-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person first name here" />
    <input id="last-name" name="last-name" style="background-color: white; margin-left: 1rem; width: 300px; line-height: 5;" placeholder="Insert person last name here" />
  </div>
  <br>
  <div class="search-subject" style="margin-left: 1rem;">
    <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="company-subject" name="subject-type" value="company-subject" checked>
    <label for="company-subject">Company</label>
    <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="person-subject" name="subject-type" value="person-subject">
    <label for="person-subject">Person</label>
  </div>
  <br></br>
  <!-- WHEN COMPANY IS SELECTED -->
  <div id="company-search-states">
    <div class="states-dropdown-list">
      <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;">
        <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Records</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
        <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 26rem; background-color: black;">
          <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                    </svg>
        </div>
        <ul class="states-dropdown" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
          <li><label><input type="checkbox" name="state-name" class="state" value="federal-level">Federal Level</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="alberta">Alberta<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="british-columbia">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="manitoba">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="new-brunswick">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="newfoundland-and-labrador">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="nova-scotia">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="ontario">Ontario<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="prince-edward-island">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="quebec">Quebec<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="saskatchewan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="northwest-territories">Northwest Territories</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="nunavut">Nunavut</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="yukon">Yukon</label></li>
        </ul>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
        <br>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openCorporateRecordTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Corporate Records</button>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openSelectedStateTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Litigation Cases</button>
      </form>
    </div>
  </div>
  <!-- WHEN PERSON IS SELECTED -->
  <div id="person-search-states" style="display: none;">
    <div class="states-dropdown-list">
      <form action="" onsubmit="return false;" style="width: 620px; border-right: solid; line-height: 2rem; border-color: darkgreen;;">
        <b style="margin-left: 1rem;"><span style="color: darkgreen;">Corporate Affiliations</span> and <span style="color: darkgreen;">Litigation</span> Research</b>
        <div style="border-radius: 25px; width: 30px; height: 30px; flex: auto; margin-top: -2rem; margin-left: 28rem; background-color: black;">
          <svg style="color: white; background-color: transparent; margin-left: 0.4rem; margin-top: 0.4rem;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z" fill="white"></path> 
                    </svg>
        </div>
        <ul class="states-dropdown" id="provinces-list" style="list-style: none; margin-left: -1.5rem; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; width: 600px;">
          <li><label><input type="checkbox" name="state-name" class="state" value="federal-level">Federal Level</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="alberta">Alberta<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="british-columbia">British Columbia<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="manitoba">Manitoba<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="new-brunswick">New Brunswick<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="newfoundland-and-labrador">Newfoundland and Labrador<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="nova-scotia">Nova Scotia<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="ontario">Ontario<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="prince-edward-island">Prince Edward Island<sup style="font-size: x-small;">*</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="quebec">Quebec<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="saskatchewan">Saskatchewan<sup style="font-size: x-small;">**</sup></label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="northwest-territories">Northwest Territories</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="nunavut">Nunavut</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="yukon">Yukon</label></li>
        </ul>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">*OpenCorporates will open</span>
        <br>
        <span style="font-size: x-small; position: absolute; padding: 0.5rem;">**Canada's Business Registries will open</span>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 220px; cursor: pointer; margin-left: 1rem;" onclick="openCorporateRecordTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Corporate Records</button>
        <br></br>
        <button style="background-color: darkgreen; color: white; border: none; border-radius: 4px; height: 34px; width: 210px; cursor: pointer; margin-top: -4.15rem; float: right; margin-right: 5rem;" onclick="openSelectedStateTabs();">
                    <svg class="svg-icon" viewBox="0 -3 20 20" style="width: 15px; height: 15px; margin-left: 2px; background-color: transparent; padding-top: 6px;">
                        <path fill="white" d="M18.109,17.776l-3.082-3.081c-0.059-0.059-0.135-0.077-0.211-0.087c1.373-1.38,2.221-3.28,2.221-5.379c0-4.212-3.414-7.626-7.625-7.626c-4.212,0-7.626,3.414-7.626,7.626s3.414,7.627,7.626,7.627c1.918,0,3.665-0.713,5.004-1.882c0.006,0.085,0.033,0.17,0.098,0.234l3.082,3.081c0.143,0.142,0.371,0.142,0.514,0C18.25,18.148,18.25,17.918,18.109,17.776zM9.412,16.13c-3.811,0-6.9-3.089-6.9-6.9c0-3.81,3.089-6.899,6.9-6.899c3.811,0,6.901,3.09,6.901,6.899C16.312,13.041,13.223,16.13,9.412,16.13z"></path>
                    </svg>
                    Search Litigation Cases</button>
      </form>
    </div>
  </div>