ng-if is not working with select ngmodel value - javascript

Iam working on ionic project.Here Iam trying to display some data on selection of options.I have written code in the way that when user selects all the 3 select options,then a form has to be appeared with some data.I have taken the ngmodel for 3 select options and after choosing 3rd select option,form should be appear,for that I used the 3rd select option ng-model in the ng-if for the div tag.But it's not working.Below is my code:
<div class="row form-group" ng-controller="myProfileCtrl">
<div class="col-md-3 col-sm-4 col-xs-6 margin1">
<select class="form-control" ng-change="loadtypes()" ng-model="selectedIndustry" ng-options="industry for industry in name">
<option value="">Select Industry</option>
</select>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 margin1">
<select class="form-control" ng-change="loadProducts()" ng-model="selectedtype" ng-options="make_year.make_year for make_year in makeYear">
<option value="">Select Type</option>
</select>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 margin1">
<select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="car_model.car_model for car_model in carModel">
<option value="">Select Product</option>
</select>
</div>
</div>
<!--Table or div-->
<div ng-if="selectedProduct">
<form class="form-group">
<div class="row">
<div class="col col-33">
<b>Service Issue</b>
</div>
<div class="col col-33">
<b> Tick</b>
</div>
<div class="col col-33">
<b> Cost</b>
</div>
</div>
<div class="row" ng-repeat="services in serviceData" style="margin-bottom:5px;">
<div class="col col-33">
<label>{{services.services}}</label>
</div>
<div class="col col-33">
<input type="checkbox" value="" ng-model="checks[$index]" />
</div>
<div class="col col-33">
<input class="form-control" type="text" style="width:100px;" ng-model="inputs[$index]" />
</div>
</div>
<div class="row">
<div class="col col-50">
<b>Service Request</b>
</div>
<div class="col col-50">
<b> Tick</b>
</div>
</div>
<div class="row">
<div class="col col-50">
<label>First Response</label>
</div>
<div class="col col-50">
<input type="checkbox" ng-model="ser.firstResponse" />
</div>
</div>
<div class="row">
<div class="col col-50">
<b>Location</b>
</div>
<div class="col col-50">
<input class="form-control" list="places" name="location" ng-model="ser.location" />
<datalist id="places">
<option value="Kochi-Kerala">
<option value="Pune-Maharastra">
<option value="Bangalore-Karnataka">
<option value="Hyderabad-Telangana">
</datalist>
</div>
</div>
<div class="row">
<div class="col col-50">
<b>Resolution Time</b>
</div>
<div class="col col-50">
<input type="number" class="form-control" min="1" ng-model="ser.resolution" />
</div>
</div>
<div class="row">
<div class="col col-50">
<b>Prioritized preferred partners</b>
</div>
<div class="col col-50">
<input type="checkbox" ng-model="ser.partners" />
</div>
</div>
</form>
<button type="button" class="btn btn-primary" ng-click="add()">Save</button>
</div>
How can I display the data in the form after selection of options in angularjs?


would you write the value of carModel , because I test your code with my value and its OK, look at html:
<select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="item.label for item in items">
<option value="">Select Product</option>
</select>
<div ng-if="selectedProduct">
mozhdeh
</div>
and controller :
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];

Related

Getting the values of form inputs into html code

I'm trying to get the value of each input and put its value inside the html code to generate card, but the JavaScript code doesn't work and I don't know why, im using javaScript
This Is My Code:
HTML:
<form>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname1">اسم الفريق الاول</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname1" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname2">اسم الفريق الثاني</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname2" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo1">شعار الفريق الاول</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo2">شعار الفريق الثاني</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timestart">توقيت بداية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timeend">توقيت نهاية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="dawri">اسم الدوري</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="dawri" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="channeln">اسم القناة</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="channeln" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="commentator">اسم المعلق</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="commentator" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="purl">رابط البوست</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="result">النتيجة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" class="btn btn-outline-primary" id="genCard">انشاء المباراة</button>
</form>
</div>
<div class="col-sm-6 col-xs-12 float-left genslid">
<h2>Card Code</h2>
<div class="card text-center p-2 mb-1">
<textarea dir="ltr" onclick="this.focus();this.select()" id="cardCode" style="height: 162px;"></textarea>
<br>
JavaScript:
$(document).ready(function(){
var teamsNames = ["مانشستر سيتي","لايبزيج","كلوب بروج","باريس سان جيرمان","ليفربول","ميلان","بورتو","أتلتيكو مدريد","سبورتينج لشبونة","بوروسيا دورتموند","بشكتاش","أياكس أمستردام","شاختار دونيتسك","إنتر ميلان","ريال مدريد","برشلونة","بايرن ميونخ","دينامو كييف","بنفيكا","مانشستر يونايتد","يونج بويز","أتالانتا","فياريال","ريد بول سالزبورغ","فولفسبورغ","إشبيلية","ليل","تشيلسي","مالمو","يوفنتوس","زينيت","شيريف تيراسبول","الاتحاد","الفتح","الفيحاء","الهلال","الرائد","ضمك","النصر","الإتفاق","الأهلي","الشباب","الفيصلي","الباطن","أبها","التعاون","الحزم","الطائي","أورلاندو بيراتس","إنييمبا","وفاق سطيف","الأهلي بنغازي","شبيبة القبائل","كوتون","نهضة بركان","نابسا ستارز","جاراف","النادي الصفاقسي","النجم الساحلي","ساليتاس","الرجاء الرياضي","بيراميدز","نكانا","نامونجو","سيمبا","فيتا كلوب","المريخ","ماميلودي صن داونز","شباب بلوزداد","مازيمبي","الوداد الرياضي","حوريا","كايزرشيفس","بيترو أتلتيكو","الترجي الرياضي","مولودية الجزائر","الزمالك","تونغيث","مالي","غينيا","ناميبيا","تشاد","بوركينا فاسو","مالاوي","أوغندا","جنوب السودان","غانا","السودان","جنوب أفريقيا","ساوتومي و برينسيب","غامبيا","الغابون","جمهورية الكونغو","أنغولا","المغرب","موريتانيا","بوروندي","أفريقيا الوسطى","الكاميرون","الرأس الأخضر","رواندا","موزمبيق","مصر","جزر القمر","كينيا","توغو","الجزائر","زيمبابوي","زامبيا","بوتسوانا","السنغال","غينيا بيساو","الكونغو","إسواتيني","تونس","غينيا الاستوائية","تنزانيا","ليبيا","ساحل العاج","إثيوبيا","مدغشقر","النيجر","نيجيريا","بنين","سيرا ليون","ليسوتو","جيبوتي","ليبيريا","شباب المحمدية","حسنية أكادير","الدفاع الحسني الجديدي","مولودية وجدة","أولمبيك خريبكة","المغرب الفاسي","الجيش الملكي","الرياضي السالمي","يوسفية برشيد","سريع وادي زم","أولمبيك آسفي","الفتح الرباطي","إتحاد طنجة","الرفاع","الزوراء","هورسيد","شبيبة الساورة","الرياضي البنزرتي","أساس تيليكوم","فومبوني","روما","نابولي","أودينيزي","بولونيا","لاتسيو","فيورنتينا","ساسولو","تورينو","إمبولي","جنوى","فينيزيا","سامبدوريا","كالياري","سبيزيا","هيلاس فيرونا","ساليرنيتانا","فالنسيا","ريال سوسييداد","أتلتيك بيلباو","مايوركا","ريال بيتيس","إلتشي","أوساسونا","رايو فايكانو","ليفانتي","إسبانيول","قادش","غرناطة","سيلتا فيغو","خيتافي","ديبورتيفو ألافيس","إيفرتون","برايتون","توتنهام هوتسبير","وست هام يونايتد","ليستر سيتي","برينتفورد","كريستال بالاس","أستون فيلا","وولفرهامبتون","ساوثهامتون","واتفورد","آرسنال","ليدز يونايتد","بيرنلي","نيوكاسل يونايتد","نورويتش سيتي","أتليتيكو مينيرو","بالميراس","فلامنغو","فورتاليزا","براغانتينو","كورينثيانز","فلومينينسي","كويابا","إنترناسيونال"," 1 - 0"," ","أتليتيكو غو","أتلتيكو باراناينسي","سييارا","سانتوس","يوفينتود","ساو باولو","باهيا","أميريكا مينيرو","غريميو","سبورت ريسيفه"," 0 - 1"," ","شابيكوينسي","شيكاغو فاير","تورونتو","دي سي يونايتد","أورلاندو سيتى","فيلادلفيا يونيون","نيويورك ريد بولز","كولومبوس كرو","نيوإنغلاند","نيويورك سيتي","سينسيناتي","أتلانتا يونايتد","مونتريال إمباكت","ناشفيل","إنتر ميامي","سياتل ساوندرز","كولورادو رابيدز","كانساس سيتي","بورتلاند تيمبرز","مينيسوتا","لوس أنجلوس غلاكسي","لوس أنجلوس","ريال سالت ليك","فانكوفر وايت كابس","سان هوزيه إيرثكويكس","دالاس","هيوستن دينامو","أوستن","سان لورينزو","بانفيلد","روزاريو سنترال","أرجنتينوس جونيورز","راسينغ","كولون","إستوديانتس","إلدوسيفي","ريفر بليت","غودوي كروز","أرسنال ساراندي","سينترال كوردوبا","بلاتنسي","فيليز سارسفيلد","بوكا جونيورز","إنديبندينتي","تاليريس كوردوبا","لانوس","اتلتيكو توكومان","يونيون سانتا في","جيمناسيا لابلاتا","هوراكان","ديفينسا جوستيسيا","نيولز أولد بويز","سارمينتو","باتروناتو","كلوب أميريكا","ليون","تولوكا","تايجرز أونال","أطلس","سانتوس لاغونا","مونتيري","كروز آزول","أتلتيكو سان لويس","غوادالاخارا","نيكاكسا","مازاتلان","باتشوكا","بويبلا","كويريتارو","تيخوانا","بوماس أونام","خواريز","كاواساكي فرونتال","يوكوهاما مارينوس","ساغان توسو","ناغويا غرامبوس","فيسيل كوبي","اوراوا ريدز","كاشيما انتلرز","أفيسبا فوكوكا","طوكيو","كونسادول سابورو","سانفريس هيروشيما","سيريزو أوساكا","كاشيوا ريسول","غامبا أوساكا","شونان بيلمير","شيميزو إس بالس","توكوشيما فورتيس","فيغالتا سينداي","أويتا ترينيتا","يوكوهاما","أولسان هيونداي","جيونبك موتورز","سوون","دايجو","بوهانغ ستيلرز","سوون بلووينغز","انشيون يونايتد","جيجيو يونايتد","غوانغجو","سونغنام","جانجوون","سيئول","العدالة","أحد","النهضة","هجر","الوحدة","الدرعية","العروبة","الشعلة","الخليج","الجيل","الساحل","نجران","القادسية","العين","بيشة","الكوكب","الأخدود","الجبلين","جدة","الخلود","عرعر","ديبورتيفو هوتشيباتو","12 أكتوبر","توركيه","جوابيرا","بوليفار","ويلسترمان","ميلغار","ديبورتيفو أوكاس","ميتروبليتانوس","بنيارول","ريفر بليت أسونتشون","سبورت وانكايو","ليبرتاد","بالستينو","إيميلك","ديبورتيس توليما","لا اكيداد","أراغوا","انديبندينتي ديل فالي","يونيفرسيتاريو","إنترناسيونال","أوليمبيا","ديبورتيفو تاشيرا","اولويس ريدي","برشلونة جواياكويل","ذي سترونغيست","أتلتيكو جونيور","سانتا فاي","سبورتينج كريستال","رينتيستاس","أونيفرسيداد كاتوليكا","ناسيونال","أتلتيكو ناسيونال","إل دي يو كيتو","يونيون لا كاليرا","سيرو بورتينيو","أمريكا دي كالي","ديبورتيفو لارا","شاندونغ ليونينغ","جوانجزو إيفرجراند","شنغهاي","تشانغتشون ياتاي","شينزين","بكين غوان","هيبي شينا فورتون","شنغهاي شنهوا","قوانغتشو آر اند اف","هينان جيانيي","وهان زال","شونجكينج ليفان","شيازوانغ يونغتشانغ","تيانجين تيدا","داليان أربين","تشينغداو هوانغاي","جلاسكو رينجرز","هيبرنيان","هارتس","ماذرويل","سيلتك","أبردين","دندي يونايتد","سانت جونستون","دندي","سانت ميرين","روس كاونتى","ليفينغستون","سوشي","لوكوموتيف موسكو","روبين كازان","دينامو موسكو","نيجني نوفغورود","كراسنودار","سسكا موسكو","سبارتاك موسكو","أخمات جروزني","كريليا سوفيتوف","روستوف","خيمكي","أوفا","أرسنال تولا","أورال","طرابزون سبور","فنربخشة","قونيا سبور","غلطة سراي","هاتاي سبور","فاتح كاراجومروك","كايسري سبور","آلتاي إزمير","ييني مالاتياسبور","ألانيا سبور","جوزتيبي","قاسم باشا","غازي عنتاب","أنطاليا سبور","سيفاسبور","أضنة دمير سبور","ريزه سبور","إسطنبول باشاكشهر","غيرسون سبور","العهد","الحد","السلط","المحرق","الأنصار","مركز بلاطة","الكويت","تشرين","شباب الأمعري","موهون باغان","باشوندهارا كينغز","بنجالورو","مازيا","أهال","دوردوي بيشكك","روشن","ناساف كارشي","ألتين أسير","خوجند","آلاي","ووريورز","ايسترن","Tainan City","Athletic 220","حي الوادي","حي العرب","الخرطوم الوطني","هلال الأبيض","الأمل عطبرة","هلال الفاشر","اهلي مروي","هلال الساحل","الشرطة","توتي","الأهلي شندي","أهلي الخرطوم","مريخ الفاشر","هلال كادوقلي","الحكمة","البرج","الإخاء الأهلي عاليه","شباب الساحل","التضامن صور","النجمة","شباب البرج","الصفاء","طرابلس الرياضي","سبورتينغ الرياضي بيروت","شباب الخليل","هلال القدس","جبل المكبر","شباب البيرة","شباب الظاهرية","طوباس الرياضي","ثقافي طولكرم","شباب السموع","أهلي الخليل","ترجي واد النيص","الأخضر","خليج سرت","التحدي","دارنس","الصداقة","شباب الجبل","نجوم أجدابيا","الأنوار","الأهلي طرابلس","الأولمبي","الإتحاد المصراتي","أبوسليم","السويحلي","المحلة","المدينة","الخمس","الشط","رفيق","السيب","ظفار","المصنعة","السويق","بهلاء","الرستاق","الإتحاد","عمان","صحار","نزوى","مسقط","صحم","المنامة","الخالدية","الرفاع الشرقي","الحالة","البديع","الكرامة","الجيش","الوثبة","جبلة","حطين","الحرجلة","الفتوة","النواعير","الطليعة","عفرين","القوة الجوية","النجف","نفط الوسط","النفط","بغداد","الميناء","زاخو","الكرخ","اربيل","نفط الجنوب","نفط ميسان","الكهرباء","القاسم","الديوانية","الطلبة","الصناعات الكهربائية","الحدود","السماوة","الوحدات","معان","سحاب","الرمثا","البقعة","الجزيرة","الحسين إربد","شباب الأردن","الجليل","العقبة","الشارقة","شباب الأهلي","عجمان","الوصل","إتحاد كلباء","خورفكان","بني ياس","الإمارات","الظفرة","البطائح","مسافي","دبي سيتي","دبا الفجيرة","الحمرية","أبطال الخليج","الجزيرة الحمراء","دبا الحصن","حتا","مصفوت","الرمس","الذيد","العربي","الفجيرة","الدحيل","السد","الغرافة","أم صلال","الريان","قطر","الوكرة","السيلية","الشمال","الخور","سانت خيلويزي","رويال شارلروا","ستاندر دو لياج","جينك","يوبين","أندرلخت","كورتريك","سينت ترويدن","سيراينج","أوستنده الرياضي","أنتويرب","سيركل بروج","زولته فاريجيم","جينت","أود هيفرلي لوفن","ميشيلن","بيرشكوت","وست بروميتش ألبيون","فولهام","ستوك سيتي","كوينز بارك رينجرز","بورنموث","كوفنتري سيتي","برمنغهام سيتي","كارديف سيتي","هيديرسفيلد تاون","بلاكبيرن روفرز","بريستول سيتي","لوتون تاون","بريستون نورث إيند","ميلوول","ميدلزبره","ديربي كاونتي","بارنسلي","شيفيلد يونايتد","بلاكبول","هال سيتي","سوانزي سيتي","ريدنغ","بيتربورو يونايتد","نوتينغهام فورست","إشتوريل","بوافيشتا","سبورتينغ براغا","بورتيمونينسي","جل فيسنتي","باسوش دي فيريرا","فيتوريا غيمارايش","ماريتيمو","فيزيلا","أروكا","سانتا كلارا","موريرنسي","تونديلا","فاماليساو","بيلينينسش","آيندهوفن","أوترخت","هيرنفين","فيلم تو تيلبورغ","إن إي سي","فاينورد","كامبور","فيتيسه","غرونينغن","آر كي سي فالفيك","فورتونا سيتارد","تونتي","سبارتا روتردام","إي زد","غو أهد إيغلز","هيراكليس","بي إي سي زفوله","أستراليا","تايلاند","العراق","البحرين","السعودية","سوريا","اليابان","كوريا الجنوبية","أوزبكستان","إيران","الصين","الأردن","كوريا الشمالية","فيتنام","هولندا","ألمانيا","رومانيا","المجر","إسبانيا","إيطاليا","التشيك","سلوفينيا","الدنمارك","فرنسا","روسيا","آيسلندا","البرتغال","كرواتيا","إنجلترا","سويسرا","البرازيل","الأرجنتين","أوروجواي","الإكوادور","كولومبيا","باراغواي","بيرو","تشيلي","بوليفيا","فنزويلا","لبنان","الفلبين","المالديف","غوام","نيبال","تايوان","هونغ كونغ","كمبوديا","فلسطين","سنغافورة","اليمن","الهند","أفغانستان","بنجلاديش","طاجيكستان","قيرغيزستان","منغوليا","ميانمار","ماليزيا","إندونيسيا","تركمانستان","سريلانكا","صربيا","لوكسمبورغ","أيرلندا","أذربيجان","اسبانيا","السويد","اليونان","كوسوفو","جورجيا","أيرلندا الشمالية","بلغاريا","ليتوانيا","أوكرانيا","فنلندا","البوسنة والهرسك","كازاخستان","بلجيكا","ويلز","بيلاروسيا","إستونيا","اسكتلندا","إسرائيل","النمسا","جزر فارو","مولدوفا","النرويج","تركيا","الجبل الأسود","لاتفيا","جبل طارق","سلوفاكيا","مالطا","قبرص","ألبانيا","بولندا","أندورا","سان مارينو","أرمينيا","شمال مقدونيا","أيسلندا","ليختنشتاين","بين ڨردان","مستقبل سليمان","مستقبل الرجيش","النادي الإفريقي","اتحاد تطاوين","نجم المتلوي","منستير","الأولمبي الباجي","الملعب التونسي","شبيبة القيروان","إتحاد الجزائر","مولودية وهران","شباب قسنطينة","نجم مقرة","أولمبى المدية","بارادو","نصر حسين داي","سريع غليزان","إتحاد بسكرة","وداد تلمسان","أولمبي الشلف","جمعية عين مليلة","إتحاد بلعباس","أهلي برج بوعريريج","شبيبة سكيكدة","سموحة","المصري البورسعيدي","إنبي","الاتحاد السكندري","طلائع الجيش","المقاولون العرب","سيراميكا كليوباترا","مصر المقاصة","الجونة","الإسماعيلي","غزل المحلة","البنك الأهلي","وادي دجلة","الانتاج الحربي","أسوان","المكسيك","نيوزيلندا","هندوراس","سبارتا براغ","بروندبي","شتورم غراتس","موناكو","ليغيا وارسو","آينتراخت فرانكفورت","أوليمبياكوس","مارسيليا","لودوجوريتس","النجم الأحمر","متيولاند","فرينكفاروزي","باير ليفركوزن","دينامو زغرب","رابيد فيينا","ماينز 05","فرايبورغ","كولن","يونيون برلين","هوفنهايم","شتوتجارت","بوروسيا مونشنغلادباخ","بوخوم","أرمينيا بيليفيلد","هيرتا برلين","أوجسبورج","غورثر فورث","أنجيه","نيس","لانس","كليرمونت","لوريان","مونبلييه","ستاد ريمس","رين","تروا","نانت","ستراسبورج","بريست","ميتز","سانت إيتيان","بوردو","استقلول دوشنبه","أجمك","تركتور سازي تبريز","باختاكور","استقلال طهران","فولاد","برسيبوليس","غوا","بانكوك جلاس","فيتيل","كايا","جوهور دارول تاكزيم","راتشابوري","تشيانغراي يونايتد","تامبينس روفرز","كيريس نيغروس","كيتشي","بورت","لايبزيج","مانشستر سيتي",""];
var dawriNames= ["الدوري المغربي","دوري أبطال أوروبا","الدوري الإنجليزي","الدوري الإسباني","الدوري الإيطالي","البطولة العربية للأندية","تصفيات كأس العالم أفريقيا","تصفيات أمم أفريقيا","دوري أبطال أفريقيا","كأس الكونفدرالية","الدوري السعودي","كأس خادم الحرمين","دوري أبطال آسيا","الدوري الفرنسي","الدوري الألماني","كأس الاتحاد الإنجليزي","كأس الرابطة الإنجليزية","كأس ملك إسبانيا","كأس السوبر الأوروبي","الدوري الأوروبي","دوري المؤتمر الأوروبي","دوري الأمم الأوروبية","كأس أمم أوروبا","كوبا أمريكا","أولمبياد كرة القدم","كأس العرب","الدوري المصري","كأس مصر","كأس السوبر المصري","كأس العرش المغربي","الدوري الجزائري","كأس الجزائر","الدوري التونسي","كأس تونس","تصفيات أمم أوروبا","تصفيات كأس العالم أوروبا","تصفيات كأس العالم آسيا","تصفيات كأس العالم أمريكا الجنوبية","بطولة أوروبا تحت 21 سنة","كأس آسيا تحت 23 سنة","كأس السوبر الأفريقي","الدوري الهولندي","كأس هولندا","الدوري البرتغالي","تشامبيونشيب","الدوري البلجيكي","كأس فرنسا","كأس إيطاليا","كأس ألمانيا","دوري الخليج العربي","كأس الخليج العربي الإماراتي","كأس رئيس الدولة الإماراتي","الدوري القطري","كأس QSL القطرية","كأس الأمير قطر","الدوري الأردني","درع الاتحاد الأردني","الدوري العراقي","الدوري الكويتي","كأس ولي العهد الكويتي","الدوري العماني","كأس السلطان العماني","الدوري البحريني","كأس ملك البحرين","الدوري السوري","الدوري الليبي","الدوري الفلسطيني","الدوري اللبناني","الدوري السوداني","كأس الاتحاد الآسيوي","الدوري التركي","الدوري الروسي","الدوري الإسكتلندي","الدوري الصيني","كوبا ليبرتادوريس","كوبا سود أمريكانا","ريكوبا سودأمريكانا","الدوري البرازيلي","الدوري الأمريكي","الدوري الأرجنتيني","الدوري المكسيكي","الدوري الياباني","الدوري الكوري الجنوبي","دوري الدرجة الأولى السعودي","الدوري السعودي للشباب",""];
var channelNames = ["beIN SPORTS 1","beIN SPORTS 2","beIN SPORTS 3","beIN SPORTS 4","beIN SPORTS 5","beIN SPORTS 6","beIN SPORTS 7","beIN SPORTS 1 PREMIUM","beIN SPORTS 2 PREMIUM","beIN SPORTS 3 PREMIUM","beIN SPORTS XTRA 1","beIN SPORTS XTRA 2","SSC 1 HD","SSC 2 HD","SSC 3 HD","SSC 4 HD","SSC 5 HD","SSC 6 HD","SSC 7 HD",""];
var commentatorsNames = ["رؤوف خليف","يوسف سيف","أحمد الطيب","علي محمد علي","حفيظ دراجي","مدحت شلبي","عادل خلو","سوار الذهب","أحمد فوأد","أحمد البلوشي","محمد بركات","خليل البلوشي","عامر الخوذيري","جواد بدة","آسيا عبد الله","أريج سليم","مضر اليوسف","فيصل شعبان ","عبد القادر شنيوني","الحبيب بن علي","عثمان القريني","لحدان الفيحاني","عبد الناصر السهلي","محمد الكوليني","خالد الغول","أحمد عبده","حسن العيدروس","باسم الزير","نوفل الباشي","خالد الحدي","عصام الشوالي","حسام الدمسيسي","عادل خلو",""];
$.each(teamsNames, function(index, value){
$("#tmname1").append(`<option value='${value}'>${value}</option>`);
$("#tmname2").append(`<option value='${value}'>${value}</option>`);
});
$.each(dawriNames, function(index, value){
$("#dawri").append(`<option value='${value}'>${value}</option>`);
});
$.each(channelNames, function(index, value){
$("#channeln").append(`<option value='${value}'>${value}</option>`);
});
$.each(commentatorsNames, function(index, value){
$("#commentator").append(`<option value='${value}'>${value}</option>`);
});
});
var tmname1 = $("#tmname1 option:selected").val();
var tmname2 = $('#tmname2 option:selected').val();
var tmlogo1 = $("#tmlogo1").val();
var tmlogo2 = $("#tmlogo2").val();
var timestart = $("#timestart").val();
var timeend = $("#timeend").val();
var dawri = $("#dawri").val();
var channeln = $("#channeln").val();
var commentator = $("#commentator").val();
var purl = $("#purl").val();
var result = $("#result").val();
var genCard = $("#genCard").val();
var myCard = `
<div id="em31391y" class="match-event " data-result='2-1'><a title="${tmname1} vs ${tmname2}" id="match-live" href="#">
<div id="overlay-match">
<div id="watch-match"></div>
</div>
</a>
<div class="first-team">
<div class="team-logo"><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div class="team-name">${tmname1}</div>
</div>
<div class="match-time">
<div class="match-timing">
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" class="match-date " data-start="2022-03-16T23:00:00+02:00" data-gameends="2023-03-16T00:00:00+02:00"></span>
</div>
</div>
<div class="left-team">
<div class="team-logo"><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div class="team-name">${tmname2}</div>
</div>
<div class="match-info">
<ul>
<li><span>beIN SPORTS 2</span></li>
<li><span>علي محمد علي</span></li>
<li><span>دوري أبطال أوروبا</span></li>
</ul>
</div>
</div>`;
$("#genCard").click(function(){
$("#cardCode").val(myCard);
alert(tmname1);
//console.log(tmlogo1);
});
});
Every variable is supposed to be placed inside that variable myCard , but it doesn't work

You can try to use the $(document).on(); which works better with dynamically loaded content.
So change this in your code:
$("#genCard").click(function(){
$("#cardCode").val(myCard);
alert(tmname1);
//console.log(tmlogo1);
});
});
To this in your code:
$(document).on('click', '#genCard', function() {
$("#cardCode").val(myCard);
alert(tmname1);
});
$(document).ready(function() {
$(document).on('click', '#genCard', function() {
var tmname1 = $("#tmname1 option:selected").val();
var tmname2 = $('#tmname2 option:selected').val();
var tmlogo1 = $("#tmlogo1").val();
var tmlogo2 = $("#tmlogo2").val();
var timestart = $("#timestart").val();
var timeend = $("#timeend").val();
var dawri = $("#dawri").val();
var channeln = $("#channeln").val();
var commentator = $("#commentator").val();
var purl = $("#purl").val();
var result = $("#result").val();
var genCard = $("#genCard").val();
var myCard = `
<div id="em31391y" class="match-event " data-result='2-1'><a title="${tmname1} vs ${tmname2}" id="match-live" href="#">
<div id="overlay-match">
<div id="watch-match"></div>
</div>
</a>
<div class="first-team">
<div class="team-logo"><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div class="team-name">${tmname1}</div>
</div>
<div class="match-time">
<div class="match-timing">
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" class="match-date " data-start="2022-03-16T23:00:00+02:00" data-gameends="2023-03-16T00:00:00+02:00"></span>
</div>
</div>
<div class="left-team">
<div class="team-logo"><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div class="team-name">${tmname2}</div>
</div>
<div class="match-info">
<ul>
<li><span>beIN SPORTS 2</span></li>
<li><span>علي محمد علي</span></li>
<li><span>دوري أبطال أوروبا</span></li>
</ul>
</div>
</div>
`;
$("#cardCode").val(myCard);
alert($("#tmname1 option:selected").val());
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname1">First team name</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname1" data-live-search="true" style="width: 75%">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname2">Second team name</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname2" data-live-search="true" style="width: 75%">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo1">first team logo</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo2">شعار الفريق الثاني</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timestart">توقيت بداية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timeend">توقيت نهاية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="dawri">اسم الدوري</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="dawri" data-live-search="true" style="width: 75%" />
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="channeln">اسم القناة</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="channeln" data-live-search="true" style="width: 75%" />
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="commentator">اسم المعلق</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="commentator" data-live-search="true" style="width: 75%" />
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="purl">رابط البوست</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="result">النتيجة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" class="btn btn-outline-primary" id="genCard">انشاء المباراة</button>
</form>
</div>
<div class="col-sm-6 col-xs-12 float-left genslid">
<h2>Card Code</h2>
<div class="card text-center p-2 mb-1">
<textarea dir="ltr" onclick="this.focus();this.select()" id="cardCode" style="height: 162px;"></textarea>
<br>

It looks like <select> tag has no pre-selected options, i.e there is not <option> tag in <select>. Also the <select> tag has been self-closed and also closed with </select>. So from this code <select /> ... </select>, should be <select> ... </select>
Here is the working code:
HTML
<form>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname1">اسم الفريق الاول</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname1" data-live-search="true" style="width: 75%">
<option value="tmname1 value">Tmname1</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmname2">اسم الفريق الثاني</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="tmname2" data-live-search="true" style="width: 75%">
<option value="tmname2 value">Tmanme2</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo1">شعار الفريق الاول</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="tmlogo2">شعار الفريق الثاني</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timestart">توقيت بداية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="timeend">توقيت نهاية المباراة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="dawri">اسم الدوري</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="dawri" data-live-search="true" style="width: 75%" >
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="channeln">اسم القناة</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="channeln" data-live-search="true" style="width: 75%" >
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="commentator">اسم المعلق</label>
<div class="col-8">
<div class="input-group">
<select class="selectpicker" id="commentator" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="purl">رابط البوست</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label" for="result">النتيجة</label>
<div class="col-8">
<div class="input-group">
<input class="form-control" dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" class="btn btn-outline-primary" id="genCard">انشاء المباراة</button>
</form>
<div class="col-sm-6 col-xs-12 float-left genslid">
<h2>Card Code</h2>
<div class="card text-center p-2 mb-1">
<textarea dir="ltr" onclick="this.focus();this.select()" id="cardCode" style="height: 162px;"></textarea>
<br>
</div></div>
JS
$(document).ready(function() {
// var tmname1 = $('#tmname1').find(":selected").text();
// var tmname2 = $('#tmname2').find(":selected").text();
var tmname1 = $("#tmname1 option:selected").val();
var tmname2 = $('#tmname2 option:selected').val();
var tmlogo1 = $("#tmlogo1").val();
var tmlogo2 = $("#tmlogo2").val();
var timestart = $("#timestart").val();
var timeend = $("#timeend").val();
var dawri = $("#dawri").val();
var channeln = $("#channeln").val();
var commentator = $("#commentator").val();
var purl = $("#purl").val();
var result = $("#result").val();
var genCard = $("#genCard").val();
var myCard = `
<div id="em31391y" class="match-event " data-result='2-1'><a title="${tmname1} vs ${tmname2}" id="match-live" href="#">
<div id="overlay-match">
<div id="watch-match"></div>
</div>
</a>
<div class="first-team">
<div class="team-logo"><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div class="team-name">${tmname1}</div>
</div>
<div class="match-time">
<div class="match-timing">
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" class="match-date " data-start="2022-03-16T23:00:00+02:00" data-gameends="2023-03-16T00:00:00+02:00"></span>
</div>
</div>
<div class="left-team">
<div class="team-logo"><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div class="team-name">${tmname2}</div>
</div>
<div class="match-info">
<ul>
<li><span>beIN SPORTS 2</span></li>
<li><span>علي محمد علي</span></li>
<li><span>دوري أبطال أوروبا</span></li>
</ul>
</div>
</div>
`;
$("#genCard").click(function(){
$("#cardCode").val(myCard);
alert(tmname1);
//console.log(tmlogo1);
});
});

How to add rows based on multiple selection options in html vue js?

<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType==='1'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType==='2'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
My vue js code is
new Vue({
el: "#addForm",
data: {
selectedType: '',
address:'',
fullname:'',
released:''
},
methods: {
}
});
I need to select multiple options and and based on the the same i need to add the rows dynamically.
Now if I select one option I am able to achieve the result as shown in my code (ABOVE CODE)
BUT,
I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.
Please help me to have a solution..

You can do it like this
Template:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option v-for="type in types" :value="type.option">{{type.option}}</option>
</select>
</div>
</div>
<div>
<div class="row" v-for="type in types" v-if="selectedType.indexOf(type.option) !== -1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">{{type.label}}</label>
<input type="date" class="form-control" v-model="type.value" required>
</div>
</div>
</div>
</div>
Script
new Vue({
el: "#addForm",
data: {
selectedType: [],
types: [
{option: 1, label: 'Date Realeased', value: ''},
{option: 2, label: 'Full Name', value: ''},
{option: 3, label: 'Address', value: ''}
]
},
methods: {
}
});
summary:
set up an array types which contains objects holding the properties that will be bound to the inputs.
loop through this types[] and render the div using v-if onlý if the currently iterated item's option is present in selectedType[].
Here is the working fiddle

Try this one, Hope its help you.
Template Code
<div id="app">
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div v-for="item in selectedType">
<div class="row" v-if="item == 1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="item == 2">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="text" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
<div class="row" v-if="item == 3">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Address</label>
<input type="textarea" class="form-control" v-model="address" required="">
</div>
</div>
</div>
</div>
</div>
</div>
Script:
var Main = {
data () {
return {
selectedType: [],
address:'',
fullname:'',
released:''
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')

How to get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

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.

Bootstrap Grid Form

I'm trying to modify a Form which has field and value into another with two columns, something like this.
Now I have:
HEADER 1
FIELD 1: VALUE
FIELD 2: VALUE
FIELD 3: VALUE
HEADER 2
FIELD 4: VALUE
FIELD 5: VALUE
FIELD 6: VALUE
And I tried to do this:
HEADER 1 HEADER 2
FIELD 1: VALUE FIELD 4: VALUE
FIELD 2: VALUE FIELD 5: VALUE
FIELD 3: VALUE FIELD 6: VALUE
Here is my code:
<div class="row">
<div class="col-lg-6 col-md-6">
<div> <h3> Datos Personales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">DNI</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Apellido y Nombre</label>
<div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Legajo</label>
<div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div>
</div>
<div> <h3> Datos Laborales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">Fecha Ingreso PJCABA</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Fuero</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['fuero'] as $key=>$fuero)
<?php if( $fuero->fuero_id == $beca->fuero_id ){?>
<option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option>
<?php }else{?>
<option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Dependencia</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['cargos'] as $key=>$cargo)
<?php if( $cargo->car_id == $beca->cargo_id ){?>
<option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option>
<?php }else{?>
<option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Aceptar</button>
Cancel
</div>
</div>
</form>
</div>
Hope someone can help me.
Thanks!

If you're trying to set your form to have two sides you can nest your columns/rows to split it into parts. Docs
See working example (full page).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="theForm">
<div class="container">
<div class="row">
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Personales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">DNI</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Apellido y Nombre</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="apynom">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Legajo</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="legajo">
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Laborales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fecha Ingreso PJCABA</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fuero</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Dependencia</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-default">Aceptar</button> Cancel
</div>
</div>
</div>
</div>
</form>
<hr>

Categories

Resources