CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Arter
Arter

Reputation: 2324

Get data from dynamically added input

I have an input field where the user enters article ID and compare. On first application load, the user has by default three input field, but he can dynamically add more inputs.My problem is, how to get the entered value of dynamically added inputs and send them to URL for example like this (I know how to put id's to URL, this is only for showing what I need) 'https://someurl.com/' + ID + '/someurl'

I try to make function where I pass entered value to controller but I get UNDEFINED

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

	$scope.choices = [{id: ''}, {id: ''}, {id: ''}];

	$scope.addNewChoice = function() {
		var newItemNo = $scope.choices.length+1;
		$scope.choices.push({'id':newItemNo});
	};

	$scope.showChoiceLabel = function (choice) {
		return choice.id === $scope.choices[0].id;
	}

	$scope.submitChoice = function (name) {
		alert('url ' + name + ' url');
	}
});
body {
	font-family:Arial;
	color:#333;
}
label {
	font-weight:bold;
}
#choicesDisplay {
	margin-top:1em;
}
.form-group {
	width:70%;clear:both;
}
.form-group input {
	float:right;
	width:60%;
	padding:.3em;
}
button {
	background-color:#3f7ebc;
	color:white;
	padding: .5em .7em .5em .7em;
	font-weight:bold;
	border:none;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
	<head lang="en">
		<meta charset="utf-8" />
		<title>Custom Plunker</title>
		<script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
		<link rel="stylesheet" href="style.css" />
		<script>
			document.write('<base href="' + document.location + '" />');
		</script>
		<script src="app.js"></script>
	</head>
	<body ng-controller="MainCtrl">
		<div class="form-group" data-ng-repeat="choice in choices">
			<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
			<button ng-show="$last" ng-click="addNewChoice()">Add another choice</button>
			<input type="text" ng-model="choice.name" name="" placeholder="enter id">
		<button ng-click="submitChoice(choice.name)">Submit</button>
		</div>
		<div id="choicesDisplay">
			{{ choices }}
		</div>
	</body>
</html>

Upvotes: 1

Views: 321

Answers (2)

Sravan
Sravan

Reputation: 18647

It is not working because, your submit button is outside of the scope.

1) You either move the button inside loop to submit individually

or

2) Submit multiple instances by loooping all.

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

	$scope.choices = [{id: ''}, {id: ''}, {id: ''}];

	$scope.addNewChoice = function() {
		var newItemNo = $scope.choices.length+1;
		$scope.choices.push({'id':newItemNo});
	};

	$scope.showChoiceLabel = function (choice) {
		return choice.id === $scope.choices[0].id;
	}

	$scope.submitChoice = function (name) {
  $scope.choices.forEach(function(choice, index){
  alert('url ' + choice.name + ' url');
  if(choice.name)
  {
  switch (index) {
    case 0:
        $scope.first = choice.name;
        break;
    case 1:
        $scope.second = choice.name;
        break;
    case 2:
        $scope.third = choice.name;
        break;
    case 3:
        $scope.fourth = choice.name;
        break;
}
console.log($scope.first,$scope.second,$scope.third,$scope.fourth)
  }
  
  })
		
	}
});
body {
	font-family:Arial;
	color:#333;
}
label {
	font-weight:bold;
}
#choicesDisplay {
	margin-top:1em;
}
.form-group {
	width:70%;clear:both;
}
.form-group input {
	float:right;
	width:60%;
	padding:.3em;
}
button {
	background-color:#3f7ebc;
	color:white;
	padding: .5em .7em .5em .7em;
	font-weight:bold;
	border:none;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
	<head lang="en">
		<meta charset="utf-8" />
		<title>Custom Plunker</title>
		<script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
		<link rel="stylesheet" href="style.css" />
		<script>
			document.write('<base href="' + document.location + '" />');
		</script>
		<script src="app.js"></script>
	</head>
	<body ng-controller="MainCtrl">
		<div class="form-group" data-ng-repeat="choice in choices">
			<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
			<button ng-show="$last" ng-click="addNewChoice()">Add another choice</button>
			<input type="text" ng-model="choice.name" name="" placeholder="enter id">
      
		</div>
    <button ng-click="submitChoice()">Submit</button>
		
		<div id="choicesDisplay">
			{{ choices }}
		</div>
	</body>
</html>

Please run the above snippet for second example

PS: As per your request, based on the index of the choice in loop, assigned the choice names to respective scope variables using switch case.

Upvotes: 2

NTP
NTP

Reputation: 4448

choice.name in submit choice is undefined because your submit button is outside the scope of ng-repeat 

<div class="form-group" data-ng-repeat="choice in choices">
          <label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
          <button ng-show="$last" ng-click="addNewChoice()">Add another choice</button>
          <input type="text" ng-model="choice.name" name="" placeholder="enter id">
</div>

<button ng-click="submitChoice(choice.name)">Submit</button>

If you want to submit 1 choice you can place your button inside ng-repeat. If you want to submit all choices you can iterate through choices in your controller.

Update

you can use below code to iterate through choices and submit if name is not undefined

angular.forEach($scope.choices, function(value, key) {
    if(value.name != undefined)
        $scope.submitChoice(value.name)
});

Upvotes: 1

Related Questions