document.getElementById().value empty

Question

I generate the field 'endpoint' by combiningtwo field : 'version' and 'productName' but it's considerate like empty and I don't know why.

 function generateEndpoint() { var yourSelect = document.getElementById("version"); document.getElementById('endpoint').value = '/' + document.getElementById('productName').value + '/' + yourSelect.options[yourSelect.selectedIndex].value; } 

 <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}"> <label for="productName">product name *</label> <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" onkeyup="generateEnpoint()"> <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}"> <label for="version">version *</label> <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" onchange="generateEndpoint()"> <option value=""></option> <option value="beta">beta</option> <option value="v1">v1</option> </select> <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}"> <label for="endpoint">exposure endpoint base path *</label> <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true"> <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span> </div> 

How can I solve my problem?

Thank you so much.

Answer 1

Just replace onkeyup="generateEndpoint()" by onkeypress="generateEndpoint()"

 function generateEndpoint() { var yourSelect = document.getElementById("version"); document.getElementById('endpoint').value = '/' + document.getElementById('productName').value + '/' + yourSelect.options[yourSelect.selectedIndex].value; } 

 <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}"> <label for="productName">product name *</label> <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" onkeypress="generateEndpoint()"> <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}"> <label for="version">version *</label> <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" onchange="generateEndpoint()"> <option value=""></option> <option value="beta">beta</option> <option value="v1">v1</option> </select> <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}"> <label for="endpoint">exposure endpoint base path *</label> <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true"> <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span> </div> 

ANGULARJS way

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.api = {}; $scope.update = function() { $scope.api.endpoint = $scope.api.productName + "/" + $scope.api.version; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div class="form-group" ng-class="{ 'has-error': invalid.productName, 'has-success': valid.productName}"> <label for="productName">product name *</label> <input type="text" id="productName" name="productName" class="form-control" placeholder="example: myapi_fr_product " ng-model="api.productName" ng-required="true" ng-change="update()"> <span id="helpBlock" class="help-block" ng-show="help.productName.required">product name is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}"> <label for="version">version *</label> <select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true" ng-change="update()" ;> <option value=""></option> <option value="beta">beta</option> <option value="v1">v1</option> </select> <span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span> </div> <div class="form-group" ng-class="{ 'has-error': invalid.endpoint, 'has-success': valid.endpoint}"> <label for="endpoint">exposure endpoint base path *</label> <input type="text" id="endpoint" name="endpoint" class="form-control" placeholder="example: /myapi/v1" ng-model="api.endpoint" ng-required="true"> <span id="helpBlock" class="help-block" ng-show="help.endpoint.required">exposure endpoint is required.</span> </div> </div> 

Answer 2

Also, I see you are using AngularJS and already have ng-model defined. If so, you may call the model directly than using document.getElementById().value

function generateEndpoint() {
  $scope.api.endpoint = $scope.api.productName + $scope.api.version;

}