input for help me (js+html : dynamic input creation)

35 Views Asked by At

HTML codes: First HTML code

<form method="post" name="form_teog" id="form_teog">
<div class="bg-black text-white" style="margin:8px;padding:15px;">
<div class="form-group font-15">
<label for="formGroupExampleInput">Ders Sayısı Seç</label>
<div>
<select name="ybp_derssayi" class="form-control mb-3" id="ybp_derssayi">
<option value="6">6 ders</option>
<option value="7">7 ders</option>
<option value="8">8 ders</option>
<option value="9">9 ders</option>
<option value="10">10 ders</option>
<option value="11">11 ders</option>
<option value="12">12 ders</option>
<option value="13">13 ders</option>
<option value="14">14 ders</option>
<option value="15">15 ders</option>
<option value="16">16 ders</option>
<option value="17">17 ders</option>
<option value="18">18 ders</option>
<option value="19">19 ders</option>
<option value="20">20 ders</option>
<option value="21">21 ders</option>
<option value="22">22 ders</option>
<option value="23">23 ders</option>
<option value="24">24 ders</option>
<option value="25">25 ders</option>
<option value="26">26 ders</option>
<option value="27">27 ders</option>
<option value="28">28 ders</option>
<option value="29">29 ders</option>
</select>
<label for="formGroupExampleInput">Özürsüz Devamsızlık Sayınız (Örnek:5</label>
<input aria-label="devamsızlık" name="bh_devamsizlik" class="form-control" value="" type="number" step="0.1" min="0" max="70" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" placeholder="Özürsüz Devamsızlık Gün Sayısı">
</div></div></div>
<div class="container blog-comments-content bg-deep text-center mt-10 mb-10">
<div class="row">
<input name="ybp_devam_s1" type="submit" class="btn btn-md" id="ybp_devam_s1" value="HESAPLAMAYA BAŞLA" style="color:#FFFFFF;background-color:#1E623F">
</div></div>
</form>

HTML codes: Second HTML code

<div class="ybp_s2_frame">
<div class="ybp_puansection">
<div class="ybp_puan50 ybp_puantitle">DERS KREDİSİ</div>
<div class="ybp_puan50 ybp_puantitle">DERS NOTU</div>
</div>
<div class="ybp_dersselect ybp_puantitle"><h3 style="margin:0px 10px"> DERSLER</h3></div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_0" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_0" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_0" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_0" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_0" name="ybp_ders_0" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_1" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_1" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_1" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_1" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_1" name="ybp_ders_1" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_2" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_2" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_2" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_2" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_2" name="ybp_ders_2" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_3" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_3" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_3" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_3" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_3" name="ybp_ders_3" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_4" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_4" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_4" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_4" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_4" name="ybp_ders_4" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<div class="ybp_puansection">
<div class="ybp_puan ybp_puan50"><input name="ybp_kredi_5" type="number" step="1" min="1" max="20" class="step2field " id="ybp_kredi_5" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyIntNumbers();" size="10" maxlength="2"></div>
<div class="ybp_puan ybp_puan50"><input name="ybp_not_5" type="number" step="0.01" min="0" max="100" class="step2field " id="ybp_not_5" value="" onkeypress="if (!window.__cfRLUnblockHandlers) return false; return onlyNumbers();" size="10" maxlength="6"></div>
</div>
<div class="ybp_dersselect">
<select aria-label="Seç" id="ybp_ders_5" name="ybp_ders_5" class="step2field " onchange="if (!window.__cfRLUnblockHandlers) return false; ">
<option value="0"> - Ders Seç</option>
<option value="120">1. Yabancı Dil</option>
<option value="121">2. Yabancı Dil</option>
<option value="146">Akaid</option>
<option value="137">Arapça</option>
<option value="122">Beden Eğitimi</option>
<option value="129">Bilgisayar Bilimi</option>
<option value="118">Biyoloji</option>
<option value="114">Coğrafya</option>
<option value="133">Çağdaş Türk ve Dünya Tarihi</option>
<option value="153">Diğer-1</option>
<option value="154">Diğer-2</option>
<option value="155">Diğer-3</option>
<option value="111">Din Kültürü</option>
<option value="144">Dinler Tarihi</option>
<option value="119">Felsefe</option>
<option value="142">Fıkıh</option>
<option value="116">Fizik</option>
<option value="123">Görsel Sanatlar</option>
<option value="145">Hadis</option>
<option value="148">Hitabet</option>
<option value="113">İnkılap Tarihi</option>
<option value="149">İslam Kültür Medeniyeti</option>
<option value="147">Kelam</option>
<option value="117">Kimya</option>
<option value="138">Kuran-ı Kerim</option>
<option value="128">Mantık</option>
<option value="115">Matematik</option>
<option value="139">Mesleki Arapça</option>
<option value="124">Müzik</option>
<option value="131">Osmanlı Türkçesi</option>
<option value="126">Psikoloji</option>
<option value="125">Sağlık Bilgisi</option>
<option value="130">Sanat Tarihi</option>
<option value="134">Seçmeli Ders-1</option>
<option value="135">Seçmeli Ders-2</option>
<option value="136">Seçmeli Ders-3</option>
<option value="150">Seçmeli Ders-4</option>
<option value="151">Seçmeli Ders-5</option>
<option value="152">Seçmeli Ders-6</option>
<option value="141">Siyer</option>
<option value="132">Sosyal Bilim Çalışmaları</option>
<option value="127">Sosyoloji</option>
<option value="112">Tarih</option>
<option value="143">Tefsir</option>
<option value="140">Temel Dini Bilgiler</option>
<option value="52">Türk Dili ve Edebiyatı</option>
</select>
</div>
<div class="hsp_teog_clear"></div>
<input name="step" type="hidden" id="step" value="2">
<input name="ybp_derssayi" type="hidden" id="ybp_derssayi" value="6">
</div>

There is an input adding section in the first html code. Here, inputs from 6 to 29 can be created. After passing that part, I move towards the second html section. In other words, I go to that page. While creating this, what kind of js code should I use to move from the first html section to the second html section? I can create inputs between 6 and 29. I leave you an example site.

How can I move from the first page to the second page?

sample site: https://www.sorubak.com/lise-takdir-tesekkur-hesaplama.php JS code is required to move from the first page to the second page. The inputs to be created appear in the codes I shared. Thank you in advance for your solutions.

0

There are 0 best solutions below