Bootstrap Grid Form - javascript

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>

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 validation in javascript on form so that it should not append form when last row is empty (should not create another row untill all fields)

function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div class="col-md-2">
<label>Product Variants</label>
<a class="btn btn-primary" id="add_variant" onclick="add_variant()"><i class="fa fa-plus"></i> add Variant</a>
</div>
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</div>
<div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</template>
</div>
i am new to java script i am trying to add some validations on my add product form in which i am trying to perform some append function in whixh i want to append a div but if the previous row is empty then it should not add/append new row but while doing so it just check validation for the 1st row when i add 2 nd add try to add 3rd it shows error
will please anybody help me to solve this,here is my code
JS:
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<button class="btn btn-danger"><i class="fa fa-
trash"></i></button>
</div>
<!--further fields-->
</div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i>
</button>
<!--further fields->
</div>
</div>
</template>
`

Here is the code:
const addVariant = document.getElementById("add_variant");
const productDescription = document.getElementById("product_description");
const errorAlert = document.querySelector(".alert");
const template = `<div class="row my-4 p-3 rounded productTemp">
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger btnDelete">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
`;
function addAlert(message) {
errorAlert.classList.add("show");
errorAlert.innerHTML = message;
setTimeout(() => {
errorAlert.classList.remove("show");
}, 3000);
}
addVariant.addEventListener("click", function() {
const productTemp = document.querySelectorAll(".productTemp");
const lastElement = productTemp[productTemp.length - 1];
const thickness = lastElement.querySelector('[name="thickness"]');
const thicknessUnit = lastElement.querySelector('[name="thickness_unit"]');
const productQty = lastElement.querySelector('[name="product_qty"]');
const productPrice = lastElement.querySelector('[name="product_cost_price"]');
const productUnit = lastElement.querySelector('[name="product_unit"]');
const productColor = lastElement.querySelector('[name="product_color"]');
if (
thickness.value !== "" &&
thicknessUnit.value !== "" &&
productQty.value !== "" &&
productPrice.value !== "" &&
productUnit.value !== "" &&
productColor.value !== ""
) {
productDescription.insertAdjacentHTML("beforeend", template);
} else {
addAlert("Fields can not be empty! 😑");
}
});
.productTemp {
background-color: #2c3035;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<body class="bg-dark text-white">
<div class="container mt-5 bg-dark text-white">
<div class="alert alert-danger alert-dismissible fade mb-5" role="alert"></div>
<div class="col-md-2 mb-4">
<label class="mb-2">Product Variants</label>
<a class="btn btn-primary" id="add_variant">
<i class="fa fa-plus"></i> add Variant
</a>
</div>
<div id="product_description">
<div class="row my-4 p-3 rounded productTemp">
<div class="col-sm-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

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

Javascript onClick() doesn't work for my button to calculate form inputs?

I want to take input values from HTML input and then I want to show the value by clicking result button.
Here is my code:
HTML:
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript:
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("#purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
Actually what I want:
I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.
Here is the jsfiddle

Corrected your code
HTML
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">Down Payment</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="down-payment">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="moartgage-term">Mortgage Term</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="mortgage-term">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="interest-rate">Interest Rate</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="interest-rate">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Property Tax</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="property-tax">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">P.Insurance</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="p-insurance">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
JSFIDDLE Here
Changes : 1] Removed # from getElementById function. 2] Changed
button element to input tag with type button. This prevents form
submission when clicked on it.

Form.Serialize with checkbox array

I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?

This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}

jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"

Categories

Resources