Return information using a submit button in HTML
<p>I am working on a web application that asks for user input and returns information based on their selection. I have two checkboxes which ask for country and state. When these two conditions are fulfilled, a submit button should return information based on the country and state.</p>

<p>My problem is, how do i make the submit button take the inputted information and translate it into data(results) on the next page? I have a search.html and a search_results.html. Do I need a search.html or can I just go from selectCountry.html to the search_results.html based on the input info?</p>

<p>I am using HTML, angularJs, and Javascript. To better understand my question, my link is <a href="http://travel-buddy.us/selectCountry.html" rel="nofollow">http://travel-buddy.us/selectCountry.html</a>, [the submit button does not do anything yet].</p>

<p>selectcountry.html </p>

<pre><code>    &lt;form id= "myForm" method="get"&gt;
        &lt;div class="col-2"&gt;
            &lt;label&gt;
                Country
                 &lt;select id="country" name="country"&gt;&lt;/select&gt;
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-2"&gt;
            &lt;label&gt;
                 State/City
                 &lt;select name="state" id="state"&gt;&lt;/select&gt;
            &lt;/label&gt;
            &lt;script src = "js/countries.js" language="javascript"&gt;
                populateCountries("country", "state");
                populateCountries("country2");
            &lt;/script&gt;
            &lt;script language="javascript"&gt;
                populateCountries("country", "state");
            &lt;/script&gt;
        &lt;/div&gt;
    &lt;/form&gt;
    &lt;a href="./try.html" class="btn btn-primary btn-xl page-scroll"&gt;SUBMIT&lt;/a&gt;
&lt;/header&gt;
</code></pre>

<p>countries.js</p>

<pre><code>function populateStates( countryElementId, stateElementId ){

    var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;

    var stateElement = document.getElementById( stateElementId );

    stateElement.length=0;
    stateElement.options[0] = new Option('Select State','');
    stateElement.selectedIndex = 0;

    var state_arr = s_a[selectedCountryIndex].split("|");

    for (var i=0; i&lt;state_arr.length; i++) {
        stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
    }
}

function populateCountries(countryElementId, stateElementId){
    // given the id of the &lt;select&gt; tag as function argument, it inserts &lt;option&gt; tags
    var countryElement = document.getElementById(countryElementId);
    countryElement.length=0;
    countryElement.options[0] = new Option('Select Country','-1');
    countryElement.selectedIndex = 0;

    for (var i=0; i&lt;country_arr.length; i++) {
        countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]);
    }

    // Assigned all countries. Now assign event listener for the states.

    if( stateElementId ){
        countryElement.onchange = function(){
            populateStates( countryElementId, stateElementId );
        };
    }        
}
</code></pre>

<p>search.html</p>

<pre><code>&lt;html ng-app="searchApp"&gt;
    &lt;!-- This page uses AngularJS --&gt;
    &lt;head&gt;
        &lt;title&gt;::SEARCH::&lt;/title&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="/js/search-control.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;
    &lt;/head&gt;

    &lt;body ng-controller="UserCtrl"&gt;
        &lt;div&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;input type="text" ng-model="user_input"&gt;&lt;/td&gt;
                &lt;button ng-click="search(user_input)"&gt;Search&lt;/button&gt;
            &lt;/tr&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>search_result.html</p>

<pre><code>&lt;html ng-app="searchApp"&gt;
    &lt;!-- This page uses AngularJS --&gt;
    &lt;head&gt;
        &lt;title&gt;::SEARCH::&lt;/title&gt;
        &lt;script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="/js/search-control.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;
    &lt;/head&gt;

    &lt;body ng-controller="UserCtrl"&gt;
        &lt;div&gt;

         &lt;h1&gt;{{pageContent.pageTitle}}&lt;/h1&gt;
        &lt;p&gt;{{pageContent.description}}&lt;/p&gt;
        &lt;img src={{pageContent.picUrl}}&gt;&lt;/img&gt;

        &lt;p&gt;::Top 3 Things To Do::&lt;/p&gt;
        &lt;div ng-repeat="todo in pageContent.thingsToDo"&gt;
             &lt;a href = {{todo.url}}&gt; {{todo.activity}} &lt;/a&gt; 
          &lt;/div&gt;

          &lt;p&gt;::Top 3 Restaurants::&lt;/p&gt;
        &lt;div ng-repeat="restaurant in pageContent.restaurants"&gt;
            &lt;a href = {{restaurant.url}}&gt; {{restaurant.name}} &lt;/a&gt;
          &lt;/div&gt;

          &lt;p&gt;::Page source::&lt;/p&gt;
          &lt;a href = {{pageContent.sourceUrl}}&gt; source &lt;/a&gt;

        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>