angularjs creating dynamic form elements - javascript

I have my html elements like this:
<body ng-controller="addController">
<div class="col-sm-10">
<label class="control-label">tableName:</label>
<fieldset ng-repeat="tableName in tableNames">
<input type="text" class="form-control" ng-model="tableName.tableName" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewTable()">Add tablename</button>
<input type="submit" ng-click="add()" />
</div>
<div>
<pre>{{tableNames|json}}</pre>
</div>
</body>
This code generates a text box every time button is clicked.
js:
function addController($scope, $http) {
$scope.tableNames = [];
$scope.addNewTable = function (tableName) {
$scope.tableNames.push({});
}
}
When i display tableNames it gives me:
[{"tableName":"textboxvalue"},{"tableName":"textboxvalue"}];
But what i intend is getting output of:
[{"tableName1":"textboxvalue","tableName2":"textboxvalue","tableName3":"textboxvalue"}];
What should I have to change in design in order to get desired output.
Thanks in advance.

You're pushing objects to the array each time but what you want is to add key value pair in the object in the array.
try this
$scope.tableNames = [{}];
$scope.addNewTable = function (tableName) {
$scope.tableNames[0].tableName = "textboxvalue" ;
}

Related

Reset (reset to previous value) only the form fields that are changed

I need to reset only the form fields that are changed (reset to previous value).
I tried to use the reset but it completely resets the entire form and I don't need this.
How can I do this?
function clearResult() {
document.getElementById("save").reset();
}
<div class = "container">
<form method="post" id="save" onload="onLoad()">
<div class="field">
<label for="id"> ID:</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="type"> Fragment Type: </label>
<input type="text" id="type" name="type" />
</div>
<div class="button">
<button type="submit" class="full">Save changes</button>
<input type="button" value="Cancel" onclick="clearResult()" />
</div>
</form>
</div>
First of all you should to store the predefined values of form elements to set them back when you want to reset them back.
Then you can use this globally defined initial values to set them back whnever reset event occurs.
var id, type;
const form = document.getElementById('save');
document.onload = (event) => {
id = form.id.value;
type = form.type.value;
};
function clearResult() {
form.id.value = id;
form.type.value = type;
};
It was simple. When page load just get values from that fields.
Make with document.onload:
var firstValue = document.getElementById("yourFieldId").value;
After form submit get values like below:
var currentValue = document.getElementById("yourFieldId").value;
And after submit in reset check if CURRENT VALUES equal with VALUES FROM FIRST TIME
Example
if(firstValue != currentValue){
document.getElementById("yourFieldId").value = firstValue;
}

How to add textbox value to array on click of button in angularjs and add required functionality

Hi now with this code I am able to add the text box value to array and empty the textbox after adding the value to the array. Now my question on adding the required validation for the textbox. If value is present either in textbox or in the array then required validation should be removed. Else it should be added. Kindly help me.
<div class="input-group">
<input ng-disabled="$parent.BuildModel.DisableControl" type="text" class="form-control textBoxStyle " name="Logpath" ng-model="$parent.BuildModel.Logpath" id="Logpath" required />
<span class="input-group-addon ">
<button ng-click="onclickfun();">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
<span ng-disabled="$parent.BuildModel.DisableControl" class="help-block" name="LogPaths" id="LogPaths" ng-model="$parent.BuildModel.LogPaths" >{{LogPaths}}</span>
In controller
$scope.BuildModel.LogPaths = [];
$scope.onclickfun = function () {
if ($scope.BuildModel.LogPath.length < 0) {
Alertify.alert("Please enter log path for adding to list");
}
$scope.BuildModel.LogPaths.push($scope.BuildModel.LogPath);
console.log($scope.BuildModel.LogPaths);
$scope.BuildModel.LogPath = ClientConfig.EMPTY;
$scope.BuildModel.res = $scope.BuildModel.LogPaths.join(' ');
};
You are using $parent but you don't need to use it. I have created a simple example for do that. You can see the example in HERE
html
<div ng-app ng-controller="LogController">
<input ng-model="inputData"></input>
<input type="submit" ng-click="addPath()" value="add"></input>
<div ng-repeat="log in logs">{{ log }}</div>
</div>
controller
function LogController($scope) {
$scope.logs = [];
$scope.addPath = function () {
$scope.logs.push($scope.inputData);
$scope.inputData = null;
};
}

How to on click get 2 different data sets with the same class

I basically on click need to insert the data- into a form. The issue is that both forms use the same element classes and when I perform one function it inserts the data but as soon as I click to run the other function it clears the original data. Here is my code:
HTML
<div class="inbox-widget nicescroll mx-box">
<a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
<div class="inbox-item" data-tag="Followers" data-social_type="twitter">
<p class="inbox-item-date">Click to add</p>
</div>
<div class="inbox-item" data-tag="Friends" data-social_type="twitter">
<p class="inbox-item-date">Click to add</p>
</div>
</a>
<a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
<div class="inbox-item2" id="chosen_account" data-social_id="12345">
<p class="inbox-item2-date">Click to add social ID</p>
</div>
</a>
<a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
<div class="inbox-item" id="chosen_account" data-social_id="6789">
<p class="inbox-item-date">Click to add social ID</p>
</div>
</a>
</div>
<form>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="input" id="social_id" type="text" name="social_id" />
<input type="input" id="social_type" type="text" name="social_type" />
<input type="input" id="chart_type" type="text" name="chart_type" value="line"/>
<input type="input" id="chart_tag" type="text" name="chart_tag"/>
</form>
My Jquery:
$('.inbox-item').click(function() {
var social_type_value = $(this).data('social_type');
var social_type_input = $('#social_type');
social_type_input.val(social_type_value);
var chart_tag_value = $(this).data('tag');
var chart_tag_input = $('#chart_tag');
chart_tag_input.val(chart_tag_value);
var social_id_value = $(this).data('social_id');
var social_id_input = $('#social_id');
social_id_input.val(social_id_value);
});
I also created a fiddle to show whats happening: https://jsfiddle.net/p18f3dow/1/
if i got your problem right, you'd want to use one function - but depending on the clicked element add different data... but don't overwrite the already entered data, when clicked element don't contains relevant data...
why not checking, if the data tag exists, in the first place:
$('.inbox-item').click(function() {
if ($(this).data('social_type')) {
var social_type_value = $(this).data('social_type');
var social_type_input = $('#social_type');
social_type_input.val(social_type_value);
}
if ($(this).data('tag')) {
var chart_tag_value = $(this).data('tag');
var chart_tag_input = $('#chart_tag');
chart_tag_input.val(chart_tag_value);
}
if ($(this).data('social_id')) {
var social_id_value = $(this).data('social_id');
var social_id_input = $('#social_id');
social_id_input.val(social_id_value);
}
});
this would be the quick and dirty solution, though.
better one would be like storing the complete clicked data objects and iterating through them, filling the correct fields. see https://jsfiddle.net/p18f3dow/4/
therefore you have to ensure that the part behing the data- in your html always matches your id in the form. (had to change it from data-tag to data-chart_tag)
then all you need is a simple function like that:
$('.inbox-item').click(function() { //when clicked
var stored_data = $(this).data(); //save everything in an object
for (var key in stored_data) { //iterate through the object
if (stored_data.hasOwnProperty(key)) {
$('#' + key).val(stored_data[key]) //create an id with #+key and insert the value
}
}
});

jQuery Mobile how to set text to multiple input value

jQM code
for(var key in sessionStorage)
{
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR").val(titleR);
}
html code
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="one and last value" />
</div>
</div>
The problem is that I can set only one and last value.
What I want is the list of all keys like this:
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="first" />
<input class="showTitleR" type="text" value="..." />
<input class="showTitleR" type="text" value="last" />
</div>
</div>
How can I solve it? Any help will be appreciated.
From what I see and if I understand correctly what are you trying to do - you are changing value for the same HTML element. You either create new HTML element or clone current and then change its value.
var item = $(".showTitleR");
item.clone().append(item.parent());
Try this:
for(var key in sessionStorage){
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR:eq(0)").clone().val(titleR).insertAfter($(".showTitleR:last");
}

Angularjs: How to bind different result set with different controls using common method?

I am new to Angularjs and facing one problem.
The requirement is little bit unique in itself, Here is the description:
I have two inputs, two dropdown and two Get buttons and once i enter one url in first input field and click on Get button, it will bind all the "key" not values to dropdown using "getApiResults" method in the controller but when i add other url in the second input field and click on Get button it will fetch all the keys from second api and bind the dropdown BUT the problem is it also bind the first dropdown again with second api results because of the fact that we are updating the "fieldnames". I don't know how to handle this problem.
Please help.. Here is the complete code:
<html lang="en">
<div ng-controller="HelloController">
<div>
<input ng-model="url1" style="width:400px" />
<button class="btn btn-danger" data-ng-click="getApiResults(url1)">
Get
</button>
<select class="form-control" ng-init="getApiResults(url1)"
data-ng-options="key as key for (key,value) in fieldnames[0]"
ng-model="selected"></select>
</div>
<br />
<br/>
<div>
<input ng-model="url" style="width:400px" />
<button class="btn btn-danger" data-ng-click="getApiResults(url)">
Get
</button>
<select class="form-control" ng-init="getApiResults(url)"
data-ng-options="key as key for (key,value) in fieldnames[0]"
ng-model="selected1"></select>
</div>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function ($scope, $http) {
$scope.getApiResults = function (apiURL) {
$scope.fieldnames = [];
var serviceurl = apiURL;
$http.get(serviceurl).success(function (data) {
$scope.fieldnames = data;
});
};
});
</script>
They are both pointing to the same scope variable. You can make a small change to you getApiResults function:
$scope.getApiResults = function (dropdown, apiURL) {
$scope.fieldnames = [];
var serviceurl = apiURL;
$http.get(serviceurl).success(function (data) {
$scope.fieldnames[dropdown] = data;
});
And then on the html:
<button class="btn btn-danger" data-ng-click="getApiResults('dropdown1',url1)">
Get
</button>
<select class="form-control" ng-init="getApiResults('dropdown1',url1)"
data-ng-options="key as key for (key,value) in fieldnames['dropdown1']"
ng-model="selected"></select>

Categories

Resources