How to add additional form fields using angularjs? - javascript

I have researched online on how to create an additional form field. The method I am using comes from this site.
http://mrngoitall.net/blog/2013/10/02/adding-form-fields-dynamically-in-angularjs/
So basically what I am trying to do, is have data inputted in. But I don't know how many data points a certain person would like to put in. So I what to enable it so I can let them put additional points if they wish.
I have this in my tag:
<script>
function AngularCtrl($scope) {
function Controller($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showAddChoice = function(choice) {
return choice.id === $scope.choices[$scope.choices.length-1].id;
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
}
}
</script>
I then have this in my tag:
<div class="form-group" ng-controller="Controller" data-ng-repeat="choice in choices">
<form novalidate class="simple-form">
Title of Chart: <input type="text" ng-model="chart.title" /><br />
Series Name: <input type="text" ng-model="chart.series" /><br />
Series Data: <input type="text" ng-model="series.data" /><br>
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="showAddChoice(choice)" ng-
click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Enter
a new data point">
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
</div>
So as you can see, what I have is 4 form fields. I want choices to add a new form field. I have the button, but when I click the button to add another form field; it does not work. It stays the same.
I was wondering if what I have in my tags was off a bit.
Thank you for the help. Been struggling on this for hours.

To expand on my comment:
Directive html:
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a new data point" />
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
Primary content:
<div class="form-group" ng-controller="Controller">
<form novalidate class="simple-form">
Title of Chart: <input type="text" ng-model="chart.title" /><br />
Series Name: <input type="text" ng-model="chart.series" /><br />
Series Data: <input type="text" ng-model="series.data" /><br>
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<div choice-editor ng-repeat="c in choices" choice="c"></div>
</form>
I'm very fuzzy on the best practices with directives. it seems like I mix too much into a single directive sometimes, i.e., i'm not sure if you want the ng-repeat and choice attributes on the same element... Maybe someone else can improve this answer. But that should give you some ideas of how to proceed, hopefully.

Related

How to Combine 3 ID's when a button was clicked?

I've try this code
<p>Watch Series Online</p>
<input type="search" id="imdbseries" class="Search" name="" value=""
placeholder="IMDB ID">
<input type="search" id="season" class="Search" name="" value=""
placeholder="SEASON">
<input type="search" id="episode" class="Search" name="" value=""
placeholder="EPISODE">
<button id= "search" onclick="search()" >Watch Now</button>
<script>
function search() {
var imdbseries = document.getElementById('imdbseriesID','season#',episode#').value
window.location.href = "https://mysiteurl.com/tv.php?imdb="+ imdbseriesID + "&season=" + season# + "&episode=" + episode#;
}
</script>
but fail for 3 ID's..
I want that when I fill the box with
IMDB ID:tt9140554
SEASON:1
EPISODE:1
it should go to this EXSACT URL when the button was clicked.
https://mysiteurl.com/tv.php?imdb=tt9140554&season=1&episode=1
Your html
<p>Watch Series Online</p>
<input type="search" id="imdbseries" class="Search" name="" value=""
placeholder="IMDB ID">
<input type="search" id="season" class="Search" name="" value=""
placeholder="SEASON">
<input type="search" id="episode" class="Search" name="" value=""
placeholder="EPISODE">
<button id= "search" onclick="search()" >Watch Now</button>
Your script
function search() {
// The document.getElementById() takes one Id
let imdbseries = document.getElementById("imdbseries").value;
let season = document.getElementById("season").value;
let episode = document.getElementById("episode").value;
location.href = `https://mysiteurl.com/tv.php?imdb=${imdbseries}&season=${season}&episode=${episode}`
}
Here's the documentation for getElementById. As you can see it accepts only one argument.
An alternative is to use querySelector. (You can tidy up the markup a little by replacing putting the id values in the name attribute, and removing the ids altogether.) Then you can just target elements by their name attributes, grab the values, and then build a string.
(Note: at some point you may want to add some validation to check the input values are valid. For example, both season and episode should both be numbers.)
function search() {
const imdbseries = document.querySelector('[name="imdbseries"]').value;
const season = document.querySelector('[name="season"]').value;
const episode = document.querySelector('[name="episode"]').value;
console.log(`https://mysiteurl.com/tv.php?imdb=${imdbseries}&season=${season}&episode=${episode}`);
}
<input type="search" name="imdbseries" placeholder="IMDB ID" />
<input type="search" name="season" placeholder="SEASON" />
<input type="search" name="episode" placeholder="EPISODE" />
<button onclick="search()" >Watch Now</button>

Dynamic Form Input Value not updating Javascript Object

new coder here. I've spent a week trying to get this to work and really need help. I have a form with one input field. I can query it and get the new name values.
Problem is when I use the same query in a object literal key/value pair , it doesnt show the updated values when you change the values. It only shows the original values when I console.log. Any help would be greatly appreciated.
HTML
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="button">Next</button>
</form>
JavaScript
let salonOwner = {
name: document.querySelector(#nameInput).value
}
You need for your button an onclick-event, which calls your new function update. So everytime it is pressed your object will be updated.
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="button" onclick="update();">Next</button>
</form>
<script>
function update() {
let salonOwner = {
name: document.querySelector("#nameInput").value
}
console.log(salonOwner);
}
</script>
So basically javascript file run only once so you need to add EventListener to listen when you submit the form and update salonOwner through it
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="submit">Next</button>
</form>
let salonOwner = {
name: ""
}
//Initilize Dom Element
let form = document.querySelector("#nameForm")
//Add EventListener to Update The salonOwner Object
form.addEventListener("submit" , (e)=>{
let name = document.querySelector("#nameInput").value;
salonOwner.name = name;
})

Dynamic ng-model for input AngularJs

I have a problem. When I use static template on render page
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<input type="text" value="first" init-from-form ng-model="article.text[0]" />
<input type="text" value="second" init-from-form ng-model="article.text[1]" />
</form>
And when I do submit form, I get data:
{text : {0: "first", 1: "second"}}
But I have dynamic moment. By clicking I add dynamic input
$(".button").click(function(){
$('.form').append('<input ng-model="article.info" init-from-form type="text" />');
})
Ok. All appended, but by submit I still get data without dynamic input.
Tell me please, how to get all fields form???
Number one, don't mix jQuery like that when you can use angular. Try something like this:
view
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<p ng-repeat="object in data track by $index">
<input type="text" ng-model="object.text" />
</p>
</form>
<button ng-click="addInput()">
add
</button>
{{data}}
</div>
controller
angular.module("app", [])
.controller("testCtrl", function($scope) {
$scope.data = [];
$scope.addInput = function() {
$scope.data.push({});
}
})
https://jsfiddle.net/pntd3kaf/

Angular js: Adding list of nested array properties

Please help: hitting my head all the way,I am a new-bee to angular js, building a Quiz Application using angular js,
I have an issue adding array of nested properties to my controller
jsfiddle link showing the issue:
STEP BY STEP SCENARIO
I want to add a question
each question has 4 options, out of which 1 is selected as right
I am able to get the UI but binding is not working for Options
html is as below:
<div ng-app>
<div class="new-question-container" ng-controller="newQuestionController">
<h3>Add New Question</h3>
<form class="new-question-form" novalidate name="newQuestionForm" data-ng-submit="save()">
<div>
<label for="QuestionDescription">Quesiton Description</label>
<input type="text" name="QuestionDescription" data-ng-model="newQuestion.QuestionDescription" required />
</div>
Options<br/>
<div ng-repeat="i in [1,2,3,4]">
<label for="options[i].OptionDescription">Option {{i}}</label>
<input name="options[i].OptionDescription" type="text" data-ng-model="options[i].OptionDescription" required />
Is right answer:
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="true" />Yes
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="false" />No
</div>
<input type="submit" class="btn btn-primary" value="Add Question" data-ng-disabled="newQuestionForm.$invalid" />
Cancel
</form>
</div>
</div>
angular script as below
function newQuestionController($http, $scope, $window) {
$scope.newQuestion = {};
$scope.options = [{}];
$scope.save = function () {
$scope.newQuestion.Options.push(options);
alert($scope.newQuestion.QuestionDescription);
}
}
You have to initialize you $scope correct like this:
$scope.options = [{},{},{},{}];
and change the ng-repeat array to start from 0:
ng-repeat="i in [0,1,2,3]"
Here you can find a working example

Saving values in to array and displaying it based on the number

I have the following code written in angular JS
<html lang="en" ng-app="person_info">
<head>
<meta charset="utf-8">
<title>Person info</title>
<script src="../angular.min.js"></script>
<script src="controller_class2.js"></script>
<style type="text/css">
.forms{width:200px;height:300px;padding:75px;float:left;background:#CCC;}
.deatils{width:200px;height:auto;padding:100px;float:left;background:#CCC;margin- left:10px;}
.fields {background:#999999;float: left;height:120px;padding: 20px;width:260px;}
</style>
</head>
<body ng-controller="info">
<div class="forms"> Name:</br>
<input type="text" value="name" ng-model="person.name">
</br>
</br>
First Name :</br>
<input type="text" value="fname" ng-model="person.firstname">
</br>
</br>
Phone Number :</br>
<input type="number" value="number" ng-model="person.number">
</br>
</br>
Email :</br>
<input type="email" value="email" ng-model="person.email">
</br>
</br>
Address :</br>
<input type="text" value="address" ng-model="person.address">
</br>
</br>
<input type="submit" value="submit" name="submit" ng-click="test()">
</div>
<div class="deatils">
<p>Name : {{person.name}}</p>
<p>First Name : {{person.firstname}}</p>
<p>Phone Number: {{person.number}}</p>
<p>Email : {{person.email}}</p>
<p>Address :{{person.address}}</p></br></br>
<p>Details in json format : </br>{{ person | json }}
</div>
<div class="fields">
Submit the persons serial number to display his details
</br>
</br>
<input type="number" >
</br>
</br>
<input type="submit" value="submit number">
</div>
</body>
</html>
Controller code
var person_info = angular.module('person_info', []);
person_info.controller('info', function($scope) {
$scope.test = function () {
console.log($scope.person);
}
});
When the user fills the form and click on submit button i want the details to be saved into a array and clear all the field so that the next users details can be filled. each user details will be stored in the array.
i have also created a text field where user can enter the serial number of the user whose detail have to be displayed. for example when i enter the value 3 and submit this. the 3rd person's details in the array have to be displayed.
you can define a function like your test() function in your controller to save current model into an array and clear it, here is example function,
$scope.savePerson = function () {
$scope.personList.push($scope.person);
//clear person model/form
$scope.person = {};
};
and here is html form,
<div class="forms">
Name: <input type="text" value="name" ng-model="person.name">
First Name : <input type="text" value="fname" ng-model="person.firstname">
Phone Number : <input type="number" value="number" ng-model="person.number">
Email : <input type="email" value="email" ng-model="person.email">
Address : <input type="text" value="address" ng-model="person.address">
<input type="submit" ng-click="savePerson()">
</div>
and define another function to retrieve data from your personList[] array like this,
$scope.getPerson = function (index) {
//selected person details
$scope.personDetail = $scope.personList[index];
};
of course you shoudl make few changes in your html as well, here is full PLUNKER of my solution...
you can try extracting the value using .serialize() like this
var count=0;
var formArr={};
$('.forms input[type=submit]').on('click',function () {
formArr[count++]=$( "form" ).serialize(); //this would serialize the form data
// clear the form data for next client details entry
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
$('.fields input[type=submit]').on('click',function () {
var serNo=$(this).find ('input[type=text]').val();
var formData= formArr[serNo];
formData=formData.split("&");
for(i=0;i<formData.length;i++)
{
$('input[name='+ formData[i]+']').val(formData[++i]);
}
});
Note: this is untested code, it may require few code tunings
Happy Coding :)

Categories