Angular Options not Displaying in Dropdown List

Angular Options not Displaying in Dropdown List - javascript

I am trying to populate a dropdown list, but I cannot get the options to display and I cannot figure out why. I populate the options in my controller with this:
var qOptions = [];
if (value.vchChoice1 != '') {
qOptions.push(value.vchChoice1);
};
if (value.vchChoice2 != '') {
qOptions.push(value.vchChoice2);
};
if (value.vchChoice3 != '') {
qOptions.push(value.vchChoice3);
};
if (value.vchChoice4 != '') {
qOptions.push(value.vchChoice4);
};
$scope.followingquestions[key].qOptions = qOptions;
qOptions = [];
Then in my HTML like this:
<select ng-model="f.vchShortAnswer">
<option value="">--Please Select--</option>
<option ng-repeat="z in f.qOptions" value="{{z}}">{{z}}</option>
</select>
Here is the entire HTML code, just in case there is something there that is causing the options to appear then disappear:
<div ng-repeat="f in followingquestions">
<div ng-switch="f.ClusterTypeID">
<div ng-switch-when="1048576">
<div class="row row-relative">
<div class="col-md-12">
<div ng-bind-html="f.vchQuestionText | trustedhtml"></div><br />
<div>
<table>
<thead style="background-color:#b1d6f1">
<tr>
<th>{{headers.vchTextElementOneHeader}}</th>
<th>{{headers.vchTextElementTwoHeader}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="answ in headers.Answers">
<td>{{answ.vchTextElementOne}}</td>
<td>{{answ.vchTextElementTwo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><br />
</div>
<div ng-switch-when="1">
<div class="row row-relative">
<div class="col-md-9">
<span ng-bind-html="f.vchQuestionText | trustedhtml"></span> <span ng-if="f.vchToolTip != null" style="cursor:pointer"><i class="glyphicon glyphicon-info-sign" tooltip="{{f.vchToolTip}}"></i></span>
</div>
<div class="col-md-3 col-border" ng-switch="f.vchAnswerTableName">
<div class="col-border-padding">
<div ng-switch="f.AnswerTypeID">
<div ng-switch-when="1">
<input type="radio" ng-model="f.vchShortAnswer" value="Yes" style="width:20px" /> Yes <input type="radio" data-ng-model="f.vchShortAnswer" value="No" style="width:20px" /> No
</div>
<div ng-switch-when="5">
#*<select data-ng-model="f.vchShortAnswer" ng-options="qO as qO for qO in f.qOptions" class="form-control">*#
<select ng-options="z as z for z in f.qOptions" ng-model="f.vchShortAnswer" class="form-control">
<option value="">--Please Select--</option>
</select>
</div>
<div ng-switch-when="8">
<textarea ng-model="f.vchLongAnswer" style="width:100%"></textarea>
</div>
<div ng-switch-when="10">
<input type="text" ng-model="f.dteDateAnswer" />
</div>
<div ng-switch-when="9">
<input type="text" ng-model="f.decNumericAnswer" />
</div>
</div>
</div>
</div>
</div>
<div ng-repeat="child in f.Dependents">
<div class="row row-relative">
<div class="col-md-9">
<span ng-bind-html="child.vchQuestionText | trustedhtml"></span> <span ng-if="child.vchToolTip != null style=" cursor:pointer""><i class="glyphicon glyphicon-info-sign" tooltip="{{child.vchToolTip}}"></i></span>
</div>
<div class="col-md-3 col-border" ng-switch="child.vchAnswerTableName">
<div class="col-border-padding">
<div ng-switch="child.AnswerTypeID">
<div ng-switch-when="8">
<div ng-switch="child.bitDependentOnParent">
<div ng-switch-when="true">
<div ng-if="p.vchShortAnswer == child.vchParentAnswerMakesEnabled">
<textarea ng-model="child.vchLongAnswer" style="width:100%"></textarea>
</div>
<div ng-else>
<textarea ng-model="child.vchLongAnswer" style="width:100%" disabled></textarea>
</div>
</div>
<div ng-switch-when="false">
<textarea ng-model="child.vchLongAnswer" style="width:100%"></textarea>
</div>
</div>
</div>
<div ng-switch-when="1">
<input type="radio" data-ng-model="form.child.vchShortAnswer" value="Yes" style="width:20px" /> Yes <input type="radio" data-ng-model="form.child.vchShortAnswer" value="No" style="width:20px" /> No
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I know that there are values in f.qOptions, and I can display them using a repeat with just div tags, but I cannot get them to display in the dropdown list.
I also tried the following but they still don't show:
ng-options="z as z for z in f.qOptions"
Even more strange... the values displayed briefly, then disappeared!
I figure that I am missing something simple here as I have displayed other lists in select option lists pretty much the same way as I was attempting to do above. Any assistance is greatly appreciated!

$scope.qOptions = [];
if (value.vchChoice1 != '') {
$scope.qOptions.push(value.vchChoice1);
};
if (value.vchChoice2 != '') {
$scope.qOptions.push(value.vchChoice2);
};
if (value.vchChoice3 != '') {
$scope.qOptions.push(value.vchChoice3);
};
if (value.vchChoice4 != '') {
$scope.qOptions.push(value.vchChoice4);
};
$scope.followingquestions[key].qOptions = $scope.qOptions;
<select ng-options="z as z for z in f.qOptions" ng-model="f.vchShortAnswer">
<option value="">--Please Select--</option>
</select>

Related

Changing content of an single input field after cloning form fields

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!

While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>

Uncaught Error when append data by Google Apps Script

I have just learnt Google Apps Script a week to build a small online survey for my work.
Everything work fine, until I added 1 more question about taking Photo in the Index. Before that, it worked OK with 1 element taking Photo, but when I added 1 more element than an "Uncaught" error appear. I have tried to find this issue but it seems my English is not good enough to "google" right search key and didn't find any same error.
Please see my Index HTML code below: The error occurs when I added element with id "ds_q_Q06"
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="Expires" content="0" />
<meta name="msapplication-TileColor" content="#0072C6" />
<title>GAS Question Templates</title>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<?!= include('CSS'); ?>
<?!= include('JS'); ?>
<?!= include('Json_data'); ?>
<?!= include('Routing'); ?>
</head>
<body>
<form class="form-survey test" id="mainForm">
<div class="survey-info" style="display:none;">
<input type="text" name="respID" id="respId" class="respId" ></input>
<input type="text" name="currentPage" id="currentPage" class="currentPage" ></input>
<input type="text" name="routing" id="routing" class="routing" ></input>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q01_1" id="ds_q_Q01_1">
<div class="q-question">
1. Điểm bán:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Điểm bán mở cửa - Khảo sát TC">Điểm bán mở cửa - Khảo sát TC</option>
<option value="Điểm bán không tìm thấy">Điểm bán không tìm thấy</option>
<option value="Điểm bán thay đổi KD">Điểm bán thay đổi KD</option>
<option value="Điểm bán đóng cửa">Điểm bán đóng cửa</option>
<option value="Điểm bán mở cửa - Từ chối hợp tác">Điểm bán mở cửa - Từ chối hợp tác</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsImage ds-question" name="ds_q_Q01_2" id="ds_q_Q01_2">
<div class="q-question">
Chụp hình
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" name="file" id="Q02_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question" name="ds_q_Q02" id="ds_q_Q02">
<div class="q-question">
2. Ghi chú
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<textarea type="text" name="answer" class="answer" ></textarea>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q03_1" id="ds_q_Q03_1">
<div class="q-question">
3. Tên điểm bán / Biển hiệu:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai - Cập nhật tên điểm bán mới</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q03_2" id="ds_q_Q03_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập tên điểm bán..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q04_1" id="ds_q_Q04_1">
<div class="q-question">
4. Địa chỉ:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q04_2" id="ds_q_Q04_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập địa chỉ..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSingle ds-question" name="ds_q_Q05" id="ds_q_Q05">
<div class="q-question">
5. Single Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<ul>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C1" class="dsSingleChoice"></input>
<label for="Q01_C1" class="answerLabel">Câu 2</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C2" class="dsSingleChoice"></input>
<label for="Q01_C2" class="answerLabel">Câu 3</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C3" class="dsSingleChoice"></input>
<label for="Q01_C3" class="answerLabel">Câu 4</label>
</li>
</ul>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
**<div class="main-content">
<div class="dsImage ds-question" name="ds_q_Q06" id="ds_q_Q06">
<div class="q-question">
6. Take Photo
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" id="Q06_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>**
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q07" id="ds_q_Q07">
<div class="q-question">
7. Drop Down Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>------</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsText ds-question" name="ds_q_Q08" id="ds_q_Q08">
<div class="q-question">
8. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSearch ds-question" name="ds_q_Q09" id="ds_q_Q09">
<div class="q-question">
9. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="ds-navigator">
<table>
<tbody>
<tr>
<td class="left"><div class="button dsPrev">Previous Page</div></td>
<td class="right"><div class="button dsNext">Next Page</div></td>
</tr>
</tbody>
</table>
</div>
<div class="survey-done hidden"><div class="dsEndMessage">Thank you for submitting!</div></div>
<div class="survey-loading hidden">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
</form>
</body>
</html>
Here is my app script that input data when click on submit button
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(imageFile) {
//var folderId = getFolderID("App_Img");
var blob = Utilities.newBlob(imageFile.bytes, imageFile.mimeType, imageFile.filename);
var file = DriveApp.getFolderById("ID_FOLDER");
try {
var child = file.getFoldersByName(imageFile.folderName).next();
}
catch(e){
var child = file.createFolder(imageFile.folderName);
}
child.createFile(blob);
return {fileURL:file.getUrl(),fileDir:imageFile.fileDir};
}
function getFolderID(folderName)
{
var folders = DriveApp.getFolders();
while (folders.hasNext()) {
var folder = folders.next();
if(folder.getName() == folderName)
{
return folder.getId();
}
}
}
**
function inputData(formSurvey){
var url = "URL_GOOGLE_SHEETS";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Sheet1");
Logger.log(ws.getName());
console.log(ws.getName());
var data = [];
for (var i = 0; i<formSurvey.answer.length; i++){
data.push(formSurvey.answer[i]);
}
Logger.log(data.join(";"));
console.log(data.join(";"));
//ws.appendRow(data);
}
**
Here is my JS when click Submit button (last page)
function endSurvey(){
$(".survey-loading").show(0).delay(5000).hide(0);
google.script.run.withSuccessHandler(submitSuccess).inputData($("#mainForm")[0]);
}
function submitSuccess(){
$(".survey-done").toggleClass("hidden",false);
}
The error is quite weird , without any more information.
Please help me on this.

I've faced a similar situation with an "uncaught" console error after running some specific server side function. After a day of searching where the problem is, in my case It was caused by running the google app script from one account while logged in chrome to another one.
Once I changed and opened the app from the same account as logged in to Chrome, the problem disappeared.

Getting a HTML select value and and input value from submit angular 6

Getting a HTML select value and and input value from form submit ,
in here i get only undefined for the select value, and gives error on
Cannot read property 'target' of undefined
at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit
rightcomponent.component.html
<!--Form start-->
<form >
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (ngModelChange)="onSelected($event)" id="sel1">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
formSubmit(e){
var stock = this.onSelected(e);
console.log(stock);
var quantity = e.target.elements[0].value;
console.log(quantity);
}
onSelected(e){
var stock_company_name = e;
return stock_company_name;
}

I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D
<!--Form start-->
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
// create an Object model with form fields as key
Model = {
stockname: '',
companyname: ''
}
formSubmit(){
console.log(this.Model);
}

Posting data in form html to server using AngularJS Http Post

I would like to ask about posting problem, actually I have a form below, in that form, I have using ng-submit and ng-click for the function but it didn't work, can anyone help me?
<form method="post" class="sky-form" name="form">
<div class="row">
<div class="col col-12"><img src="public/images/icon_namapasien.png" alt=""/> Nama Pasien</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" ng-model="profile.name">
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_tgl.png" alt=""/> Tanggal Lahir</div>
</div>
<div class="row">
<div class="col col-3">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_date">
<option ng-repeat="n in range(01,31)" value="{{n}}">{{n}}</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-4">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_month">
<option value="01">Januari</option>
<option value="02">Februari</option>
<option value="03">Maret</option>
<option value="04">April</option>
<option value="05">Mei</option>
<option value="06">Juni</option>
<option value="07">Juli</option>
<option value="08">Agustus</option>
<option value="09">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-3">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_year">
<option ng-repeat="n in range(1910,2016)" value="{{n}}">{{n}}</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_gender.png" alt=""/> Jenis Kelamin</div>
</div>
<div class="row">
<div class="col col-10">
<div class="select">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.gender">
<option value="1">Pria</option>
<option value="0">Wanita</option>
</select>
<i></i>
</div>
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_alamat.png" alt=""/> Alamat</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" ng-model="profile.address"/>
<input type="hidden" name="name" value="0" ng-model="kodekota">
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_telp.png" alt=""/> Nomor Telepon / Hp</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" value="" ng-model="profile.phone"/>
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<p> </p>
<button class="btn-yellow" type="submit" name="submit" ng-click="postProfil()">Simpan Perubahan</button>
</form>
Here is the angularjs code
$scope.getProfil = function(){
$http.get('/getUrl').success(function(data){
$scope.profil = data;
})
}
$scope.getProfil();
$scope.profile = {};
$scope.postProfil = function(){
$http.post('/postUrl').success(function(data){
$scope.getProfil();
}).error(function(data){
console.log(data);
})
}
$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
one thing for sure, I know that http.post using only link is a bad idea, but before I do that, I have debug it using alert javascript function, for example I want to get the data from profile.name so I alert it (profile.name) inside the postProfil function but it returns undefined.
here is the key that should be inputed in the http.post
address
phone
birth
gender
name
I would like to use the http array structure such as
$http.post({
method: 'POST',
url: '/postUrl',
data: {
//data is here
}
})
what do you guys think? Thanks
EDIT:
Maybe I will change my questions, do you know the code for updating data from previous data in an apiUrl using AngularJS? So my problem is that getProfil and postProfil is in the same key and value (but I think some of the keys are different).

Just use the ng-model $scope.profile:
$scope.postProfil = function(){
$http.post('/postUrl', $scope.profile).success(function(data){
$scope.getProfil();
}).error(function(data){
console.log(data);
})
}

$http.post('api/create/something', yourData)
should do the trick for your problem.
$http.post accepts (url, data?, options?)
$http on the other hand accepts (options) directly. You can use it like
$http({
url: 'api/create/something',
data: yourData,
method: 'POST'
}).then(....)
This code works the same with the code above.
Regarding the inaccurate data binding. It might be case sensitivity issues, or serialization issues coming from your rest api configuration. Sometimes PascalCased variable does not bind to camelCased variables as it is. Some configurations are needed to be done.

Get selected text from drop down list using name attribute jQuery

I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>

Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.

Develop Reference

JavaScript is the programming language of the Web.

Angular Options not Displaying in Dropdown List - javascript

Related

Changing content of an single input field after cloning form fields

Uncaught Error when append data by Google Apps Script

Getting a HTML select value and and input value from submit angular 6

Posting data in form html to server using AngularJS Http Post

Get selected text from drop down list using name attribute jQuery

Categories

Resources