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

我正在研究一個Web應用程序，要求用戶輸入並根據其選擇返回信息。我有兩個要求國家和州的複選框。當這兩個條件都滿足時，提交按鈕應該返回基於國家和州的信息。使用HTML中的提交按鈕返回信息

我的問題是，我如何使提交按鈕獲取輸入的信息並將其轉換爲下一頁上的數據（結果）？我有一個search.html和一個search_results.html。我需要一個search.html還是可以根據輸入信息從selectCountry.html轉到search_results.html？

我正在使用HTML，angularJs和Javascript。爲了更好地理解我的問題，我的鏈接是http://travel-buddy.us/selectCountry.html，[提交按鈕不做任何事情]。

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

countries.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); 
     }; 
    }   
}

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

來源

2016-03-05 Dubem

包括足夠的代碼讓別人來重現問題。有關此方面的幫助，請閱讀如何創建最小，完整和可驗證的示例。如果可以創建一個可以鏈接到的問題的實例（例如http://sqlfiddle.com/或http://jsbin.com/），那麼可以這樣做 - 但也包括代碼在你的問題本身。不是每個人都可以訪問外部網站，並且這些鏈接可能會隨着時間而中斷 – Prasad

您正在使用angular.I不理解您爲什麼需要頁面刷新？ –

設置輸入的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; 
}

注：

search_results - 你的下一個頁面的路徑。
country and state - 鍵值對。

在未來頁面訪問這些值，

var country = $location.search()['country']; 
var state = $location.search()['state'];

來源

2016-03-05 11:43:43

非常感謝你的反饋，真正感謝你。我有一個問題，因爲你說search_results將是路徑，這是否意味着我不需要search.html。在selectCountry.html中，我做了 Dubem

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

回答

相關問題