使用 HTML 中的提交按钮返回信息

Return information using a submit button in HTML

本文关键字：按钮 返回 信息 提交 HTML 使用      更新时间：2023-09-26

我正在开发一个 Web 应用程序，该应用程序要求用户输入并根据他们的选择返回信息。我有两个复选框，要求国家和州。满足这两个条件时，提交按钮应根据国家/地区和州返回信息。

我的问题是，如何使提交按钮获取输入的信息并将其转换为下一页的数据（结果）？我有一个搜索.html和一个search_results.html。我是否需要搜索.html或者我可以根据输入信息从选择国家/地区.html转到search_results.html？

我正在使用HTML，angularJs和Javascript。为了更好地理解我的问题，我的链接 http://travel-buddy.us/selectCountry.html，[提交按钮尚未执行任何操作]。

选择国家.html 

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

国家.js

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<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 <select> tag as function argument, it inserts <option> 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<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 );
        };
    }        
}

搜索.html

<html ng-app="searchApp">
    <!-- This page uses AngularJS -->
    <head>
        <title>::SEARCH::</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
        <script src="/js/search-control.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/style.css">
    </head>
    <body ng-controller="UserCtrl">
        <div>
            <tr>
                <td><input type="text" ng-model="user_input"></td>
                <button ng-click="search(user_input)">Search</button>
            </tr>
        </div>
    </body>
</html>

search_result.html

<html ng-app="searchApp">
    <!-- This page uses AngularJS -->
    <head>
        <title>::SEARCH::</title>
        <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
        <script src="/js/search-control.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/style.css">
    </head>
    <body ng-controller="UserCtrl">
        <div>
         <h1>{{pageContent.pageTitle}}</h1>
        <p>{{pageContent.description}}</p>
        <img src={{pageContent.picUrl}}></img>
        <p>::Top 3 Things To Do::</p>
        <div ng-repeat="todo in pageContent.thingsToDo">
             <a href = {{todo.url}}> {{todo.activity}} </a> 
          </div>
          <p>::Top 3 Restaurants::</p>
        <div ng-repeat="restaurant in pageContent.restaurants">
            <a href = {{restaurant.url}}> {{restaurant.name}} </a>
          </div>
          <p>::Page source::</p>
          <a href = {{pageContent.sourceUrl}}> source </a>
        </div>
    </body>
</html>

设置输入的 ng 模型值以便于访问。

您可以使用 window.location 将这些数据带到下一页。

在 HTML 中 

<select id="country" name="country" ng-model="country">
</select>
<select name="state" id="state" ng-model="state">
</select>
<button ng-click="goToNextPg()">SUBMIT</button>

在控制器中

$scope.goToNextPg = function () {
    window.location="#/search_results/country="+$scope.country+"&&state="+$scope.state;
}

注意：

  1. search_results - 下一页的路径。

  2. 国家/地区和州 - 键值对。

要在下一页中访问这些值，

var country = $location.search()['country'];
var state = $location.search()['state'];
相关文章：