I am quite new to all web development, and I am struggling to find what I am looking for. I am using springboot.
My expectation: The user will open a page, fill the form details, click on Submit button and get redirected to a new page. The form information will be stored on a hashmap and used on my backend.
Reality: The user opens the page, fill the form details, click on the Submit button but don't get redirected to a new page. Nonetheless, the information is stored on a hashmap.
HTML:
<div class="container" ng-app="app">
<h1>Configurador de Plugin</h1>
<div ng-controller = "plugins">
<form>
<div class="form-group">
<label>Database Details:</label>
<input type="text" class="form-control" id="hostname" placeholder="Informe o Endereço do Servidor" ng-model="hostname">
<input type="text" class="form-control" id="port" placeholder="Informe a porta" ng-model="port">
<input type="text" class="form-control" id="username" placeholder="Informe o usuário" ng-model="userdb">
<input type="text" class="form-control" id="userpass" placeholder="Informe a senha" ng-model="userpass">
<input type="text" class="form-control" id="database" placeholder="Informe qual o banco de dados" ng-model="database">
<button ng-click="validar()" type="submit" class="btn btn-default">Search</button>
<div ng-show="visivel">
<p>{{valor}}</p>
</div>
</form>
<div>Make a choice</h3>
</div>
<div class="radio">
<label><input ng-model="plugin.Name" value="test" type="radio" name="Test">Test</label></div>
<div class="radio">
<label><input ng-model="plugin.Name" value="v2" type="radio" name="V2">V2</label></div>
<div class="radio">
<label><input ng-model="plugin.Name" value="v1" type="radio" name="V1" >V1</label></div>
Texto:
<p>{{plugin.Name}}</p>
<br>
<button ng-click="sendForm()" type="submit" class="btn btn-default">Search</button>
</div>
</div>
The JS:
app.controller('plugins', function($scope, $http, $location) {
$scope.validar = function(){
$scope.visivel = true;
$scope.valor = $scope.hostname,
console.log($scope.hostname)
}
$scope.enviarForm = function(){
var url = $location.url() + "test";
var config =
{
headers :
{
'Content-Type': 'application/json;charset=utf-8;'
}
}
console.log($scope.hostname);
var data =
{
hostname: $scope.hostname,
port: $scope.port,
username: $scope.username,
userpass: $scope.userpass,
database: $scope.database
};
$http.post(url, data, config).then(function (response)
{
$scope.postResultMessage = "Sucess!";
},
function (response) {
$scope.postResultMessage = "Fail!";
});
}
});
The Controller:
@RequestMapping("/test")
public ModelAndView CadastroEnotas(@RequestBody HashMap<String, Object> data) {
ModelAndView modelAndView = new ModelAndView("newPage");
modelAndView.addAllObjects(data);
return modelAndView;
}
So, my expectation, is that the above Controller would send the user to newPage, but it doesn't.
I am googling but I am likely misunderstanding the concept of ModelAndView or maybe how to execute the function on my js...
I think the closest to what I am looking for is described here: angular event success when submit form it opens popup, but I failed to make it work. Could someone point me what I am doing wrong?
