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 >
<label for="tmname1">اسم الفريق الاول</label>
<div >
<div >
<select id="tmname1" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div >
<label for="tmname2">اسم الفريق الثاني</label>
<div >
<div >
<select id="tmname2" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div >
<label for="tmlogo1">شعار الفريق الاول</label>
<div >
<div >
<input dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div >
<label for="tmlogo2">شعار الفريق الثاني</label>
<div >
<div >
<input dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div >
<label for="timestart">توقيت بداية المباراة</label>
<div >
<div >
<input dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="timeend">توقيت نهاية المباراة</label>
<div >
<div >
<input dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="dawri">اسم الدوري</label>
<div >
<div >
<select id="dawri" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div >
<label for="channeln">اسم القناة</label>
<div >
<div >
<select id="channeln" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div >
<label for="commentator">اسم المعلق</label>
<div >
<div >
<select id="commentator" data-live-search="true" style="width: 75%" />
</select>
</div>
</div>
</div>
<div >
<label for="purl">رابط البوست</label>
<div >
<div >
<input dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div >
<label for="result">النتيجة</label>
<div >
<div >
<input dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" id="genCard">انشاء المباراة</button>
</form>
</div>
<div >
<h2>Card Code</h2>
<div >
<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" 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 >
<div ><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div >${tmname1}</div>
</div>
<div >
<div >
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" data-start="2022-03-16T23:00:00 02:00" data-gameends="2023-03-16T00:00:00 02:00"></span>
</div>
</div>
<div >
<div ><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div >${tmname2}</div>
</div>
<div >
<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
CodePudding user response：
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" 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 >
<div ><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div >${tmname1}</div>
</div>
<div >
<div >
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" data-start="2022-03-16T23:00:00 02:00" data-gameends="2023-03-16T00:00:00 02:00"></span>
</div>
</div>
<div >
<div ><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div >${tmname2}</div>
</div>
<div >
<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/[email protected]/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 >
<label for="tmname1">First team name</label>
<div >
<div >
<select 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 >
<label for="tmname2">Second team name</label>
<div >
<div >
<select 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 >
<label for="tmlogo1">first team logo</label>
<div >
<div >
<input dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div >
<label for="tmlogo2">شعار الفريق الثاني</label>
<div >
<div >
<input dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div >
<label for="timestart">توقيت بداية المباراة</label>
<div >
<div >
<input dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="timeend">توقيت نهاية المباراة</label>
<div >
<div >
<input dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="dawri">اسم الدوري</label>
<div >
<div >
<select 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 >
<label for="channeln">اسم القناة</label>
<div >
<div >
<select 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 >
<label for="commentator">اسم المعلق</label>
<div >
<div >
<select 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 >
<label for="purl">رابط البوست</label>
<div >
<div >
<input dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div >
<label for="result">النتيجة</label>
<div >
<div >
<input dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" id="genCard">انشاء المباراة</button>
</form>
</div>
<div >
<h2>Card Code</h2>
<div >
<textarea dir="ltr" onclick="this.focus();this.select()" id="cardCode" style="height: 162px;"></textarea>
<br>CodePudding user response：
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 >
<label for="tmname1">اسم الفريق الاول</label>
<div >
<div >
<select id="tmname1" data-live-search="true" style="width: 75%">
<option value="tmname1 value">Tmname1</option>
</select>
</div>
</div>
</div>
<div >
<label for="tmname2">اسم الفريق الثاني</label>
<div >
<div >
<select id="tmname2" data-live-search="true" style="width: 75%">
<option value="tmname2 value">Tmanme2</option>
</select>
</div>
</div>
</div>
<div >
<label for="tmlogo1">شعار الفريق الاول</label>
<div >
<div >
<input dir="ltr" id="tmlogo1" name="tmlogo1" type="text" />
</div>
</div>
</div>
<div >
<label for="tmlogo2">شعار الفريق الثاني</label>
<div >
<div >
<input dir="ltr" id="tmlogo2" name="tmlogo2" type="text" />
</div>
</div>
</div>
<div >
<label for="timestart">توقيت بداية المباراة</label>
<div >
<div >
<input dir="ltr" id="timestart" name="timestart" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="timeend">توقيت نهاية المباراة</label>
<div >
<div >
<input dir="ltr" id="timeend" name="timeend" placeholder="2021-03-15T21:26" type="datetime-local" />
</div>
</div>
</div>
<div >
<label for="dawri">اسم الدوري</label>
<div >
<div >
<select id="dawri" data-live-search="true" style="width: 75%" >
</select>
</div>
</div>
</div>
<div >
<label for="channeln">اسم القناة</label>
<div >
<div >
<select id="channeln" data-live-search="true" style="width: 75%" >
</select>
</div>
</div>
</div>
<div >
<label for="commentator">اسم المعلق</label>
<div >
<div >
<select id="commentator" data-live-search="true" style="width: 75%">
</select>
</div>
</div>
</div>
<div >
<label for="purl">رابط البوست</label>
<div >
<div >
<input dir="ltr" id="purl" name="purl" type="text" placeholder="#" />
</div>
</div>
</div>
<div >
<label for="result">النتيجة</label>
<div >
<div >
<input dir="ltr" id="result" name="result" type="text" placeholder="2-1" value="2-1" />
</div>
</div>
</div>
<button type="button" id="genCard">انشاء المباراة</button>
</form>
<div >
<h2>Card Code</h2>
<div >
<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" 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 >
<div ><img alt="${tmname1}" height="70" src="#logo1" title="${tmname1}" width="70" /></div>
<div >${tmname1}</div>
</div>
<div >
<div >
<div id="match-hour">11:0 م</div>
<div id="result-now">2-1</div><span id="dem14085y" data-start="2022-03-16T23:00:00 02:00" data-gameends="2023-03-16T00:00:00 02:00"></span>
</div>
</div>
<div >
<div ><img alt="${tmname2}" height="70" src="#logo2" title="${tmname2}" width="70" /></div>
<div >${tmname2}</div>
</div>
<div >
<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);
});
});