Not getting addition of all 4th column in total rate - javascript
I have created a Rate Calculator for wall hanging
where we have to enter dimensions of 3 entities (Picture,Mount ,Frame) that are
width
height
rate
and 4 column is calculation of 3 dimention
Then I have created total rate where the addition of all 4th column is calculated
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
var MountHeight = document.getElementById('MountHeight').value;
var MountWidth = document.getElementById('MountWidth').value;
var MountRate = document.getElementById('MountRate').value;
var MFinalRate = document.getElementById('MFinalRate');
MFinalRate.value = parseInt(2 * MountHeight) + parseInt(2 * MountWidth) * parseInt(MountRate);
var FrameHeight = document.getElementById('FrameHeight').value;
var FrameWidth = document.getElementById('FrameWidth').value;
var FrameRate = document.getElementById('FrameRate').value;
var FrFinalRate = document.getElementById('FrFinalRate');
FrFinalRate.value = parseInt(2 * FrameHeight) + parseInt(2 * FrameWidth) * parseInt(FrameRate);
var TFinalRate = document.getElementById('TFinalRate');
TFinalRate.value = parseInt(FinalRate) + parseInt(MFinalRate) + parseInt(FrFinalRate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
Enter the Mount dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="MountWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="MountHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="MountRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="MFinalRate">
</div>
</div>
</div>
</div>
Enter the Frame dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="FrameWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="FrameHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="FrameRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FrFinalRate">
</div>
</div>
</div>
</div>
Total Rate is<br/>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="TFinalRate">
<div class="col">
</div>
<br>
<div class="col">
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</div>
</div>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
but when u click on submit it shows NAN in total Rate
there is only one error is that you haven't take the value of TFinalRate.value = parseInt(FinalRate.value) + parseInt(MFinalRate.value) + parseInt(FrFinalRate.value);
You should use FinalRate.value, FinalRate.value and MFinalRate.value
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
var MountHeight = document.getElementById('MountHeight').value;
var MountWidth = document.getElementById('MountWidth').value;
var MountRate = document.getElementById('MountRate').value;
var MFinalRate = document.getElementById('MFinalRate');
MFinalRate.value = parseInt(2 * MountHeight) + parseInt(2 * MountWidth) * parseInt(MountRate);
var FrameHeight = document.getElementById('FrameHeight').value;
var FrameWidth = document.getElementById('FrameWidth').value;
var FrameRate = document.getElementById('FrameRate').value;
var FrFinalRate = document.getElementById('FrFinalRate');
FrFinalRate.value = parseInt(2 * FrameHeight) + parseInt(2 * FrameWidth) * parseInt(FrameRate);
var TFinalRate = document.getElementById('TFinalRate');
TFinalRate.value = parseInt(FinalRate.value) + parseInt(MFinalRate.value) + parseInt(FrFinalRate.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
Enter the Mount dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="MountWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="MountHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="MountRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="MFinalRate">
</div>
</div>
</div>
</div>
Enter the Frame dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="FrameWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="FrameHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="FrameRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FrFinalRate">
</div>
</div>
</div>
</div>
Total Rate is<br/>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="TFinalRate">
<div class="col">
</div>
<br>
<div class="col">
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</div>
</div>
</center>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
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);
});
});
not getting the multiplication in 4th text box
I want to multiply the three numbers entered in three seprate textbox id is(PaperHeight & PaperWidth & Rate) and then get the product in fourth textbox id is (FinalRate)
I want to get the output when the submit button is clicked
following is my code
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate').value;
FinalRate = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
get the element and then set the value.
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
Access variable outside jquery each loop
I've made a each loop that loops through all divs calles opening_class then searches all inputs and saves the value in global openings array.
But.. the openings variable stays empty..
Javascript
var openings = [];
$('.opening_class').each(function () {
var id = $(this).attr('id');
var inputs = [];
$('.opening_class input').each(function (i) {
inputs.push($(this).val());
});
openings[id] = inputs;
});
alert(JSON.stringify(openings));
The inputs has input, but it is not setting it into the global openings array..
If anyone could help that would be awesome
Html
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
You have a couple of issues in the code.
needs to be an object, not an array
var openings = {};
With the following code you are selecting all of the opening class elements and grabbing all the inputs. You are NOT grabbing the inputs inside of the class you read the id for
$('.opening_class input').each(function (i) { // here you are
You should be using this and find
$(this).find('input').each(function (i) { // here you are
You can also improve your code to use jQuery's map()
var openings = {};
$('.opening_class').each(function() {
var elem = $(this)
var id = elem.attr('id');
var inputs = elem.find('input').map(function(i) {
return this.value
}).get();
openings[id] = inputs;
});
console.log(JSON.stringify(openings));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
JS Array cannot contain keys like arrays in php.
You need use
var openings = {};
Insteadof
var openings = [];
How to fill field in a modal with a existing contact when opening?
Hello I´m building a contact book where you can add and edit contacts. Now I want the "edit" button to open a modal where you can make changes in the contact and save. Why is it not working with document.getElementById("name").value = kontakt.name; to get the data of an existing contact in a modal when opening?
It worked before when using a html site. So there is no problem with the syntax
I have this modal
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()" >Speichern</button>
</div>
</div>
</div>
</div>
</div>
This is the edit button which is created in the table with every new contact
// edit button
var button = document.createElement('button');
button.onclick = function() {
Initialize(kontakt.id);
$('#dialog').modal('show');
This is the initialize function which should put the contact data in the empty fields. Here comes the error from. It says TypeError: document.getElementById(...) is null
function kontaktBearbeitenInit(id) {
let kontakt = kontakteSpeicher.findContacttoId(id);
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("Ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}
Try replace
document.getElementById("Ort").value = kontakt.ort;
to
document.getElementById("ort").value = kontakt.ort;
const container = document.getElementsByClassName('container')[0];
var button = document.createElement('button');
container.appendChild(button);
button.innerHTML = 'Create';
button.classList.add('btn', 'btn-primary');
button.onclick = function() {
$('#dialog').show();
Initialize();
}
function closeModal() {
$('#dialog').hide();
}
function Initialize() {
let kontakt = {
name: 'John',
email: 'test#example.com',
ort: 'ort',
plz: 'plz',
strasse: 'strasse'
}
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
</div>
</div>
</div>
</div>
</div>
Angular JS : visibility visible on click on radio button
I have two radio buttons , two textboxes and a button. When i click on 1st button then only one text box should appear , when i click on second button , two textboxes should appear. but i want to do it with visibility:hidden|visible property as I want button position to be fixed below two text boxes. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="form-group"> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <div class="basic_info_radio_toggle"> <label class="one"> <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'"> <span>One</span></label> <label class="two"> <input type="radio" name="registration_options" ng-click="option='two'"> <span>Two</span></label> </div> </div> </div> <div class="form-group" ng-show="option ==='two'"> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <form role="form"> <div class="form-group set_margin_0 set_padding_0"> <label>Button</label> <input class="form-control" placeholder="Enter Button Name" type="text"> </div> </form> </div> </div> <div class="form-group" ng-show="option ==='two' || option === 'one'"> <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <span>Link</span> <input class="form-control" placeholder="http://" type="text"> </div> </div> <div class="form-group"> <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> Thank you.
Try ng-style directive:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function () {
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-style="{visibility: option == 'two' ? 'visible' : 'hidden'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
Please try by using a function rather than using the inline definition. Also I will prefer to use ng-if rather than ng-show because ng-if will block rendering the HTML template if the condition is wrong. Please try the below code snippet.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function ($scope) {
$scope.setVisibility = function(val){
var resultVal = (val == 'one')? 'one' : 'other';
$scope.option = resultVal;
}
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="setVisibility('two')">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" ng-if="option ==='other'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-if="option ==='other' || option === 'one'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
I don't see you have initialized your angular app.
Try this one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
angular.module("MyApp", []); //angular app
</script>
<div ng-app="MyApp">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-class="{'invisible':option =='one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
You can try this with ng-class
CSS
<style>
.visibleOff{visibility: hidden;}
</style>
HTML
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" >
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-class="{'visibleOff': option == 'one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>