From içine formda ki içeriği dinamik eklenen bir alandan forma yeni input nasıl eklenir.

kartal 264 gün önce

163 defa görüntülendi

Karışık değil göründüğü gibi aslında soru :)

<form id="addProduct">
    
    //product add input infos
    
    <div id="addOption">
        <buton>Yeni Opsiyon Ekle</buton>
        //bu kısım sayfa açıldığında boş burası tab panel aslında
        // yeni opsiyon ekle dersem aşaıya göründüğü gibi ekleniyor
        <div class="variantAddContent gridAutoFlow" id="optionId-0"><div class="flexColumnLeftGap10">
												<label>Name</label>
												<input class="input_style" type="text" name="variantAddName[0][optionName]">
											</div>
											<div class="flexColumnLeftGap10">
												<label>Seçenek görünümü</label>
												<select name="variantAddName[0][variantType]">
													<option>Radyo düğmesi</option>
													<option>Açılır menü</option>
													<option>Renk</option>
													<option>Kutu</option>
												</select>
											</div>
											<div class="flexRow">
												<div class="varyantOptionAddListParent">
													<div id="varyantOptionAddList" class="flexRow">
															<label>Değerler</label>
															<div class="flexCenter10 variantAddRow optionListContent" id="optionValId-0">
																	<input class="input_style" type="text" name="variantAddName[0][optionValue][0]">
																	<input type="radio" id="defaultOpt0" name="variantAddName[0][optionType]" value="0" class="radioStyle">
																	<label for="defaultOpt0">Default</label>
																	<div class="varinatOptionRemove"><i class="fa-solid fa-circle-minus"></i></div>
															</div>
													<div class="flexCenter10 variantAddRow optionListContent" id="optionValId-1"><input class="input_style" type="text" name="variantAddName[0][optionValue][1]">
														<input type="radio" id="defaultOpt1" name="variantAddName[0][optionType]" value="1" class="radioStyle">
														<label for="defaultOpt1">Default</label>
														<div class="varinatOptionRemove"><i class="fa-solid fa-circle-minus"></i></div></div></div>
													<div class="addVaryantOPtion" data-optionid="0">+ Yeni değer ekle</div>
												</div>
											</div></div>
				<buton>Opsiyonu ekle</buton> // tıklayınca forma kombinasyokları eklebecek							
											
    </div> //addOPtion END
    
</form>

Yeni opsiyon ekle butonuna tıkladığımda
addOption div elementi içine ajax verisi olarak
yeni opsiyon doldurulacak input alanı var opsiyon adı yanında da yine dinamik olarak append edilen
opsiyon vaue alanları var

Problemim form içine aynı formdan veri naıl göndereceğim

ebykdrms

263 gün önce

Soruyu pek anlamadım. Anladığım kadarıyla aşağıdaki örnek üzerinde sorunu daha açık yazar mısın?

Başlangıçta form şu şekilde:

<form id="addProduct">
    <div id="addOption">
        <buton>Yeni Opsiyon Ekle</buton>
    </div>
</form>

Sonra "Yeni Opsiyon Ekle" yazan butona basıldığında:
1) Javascript ile bir ajax isteği atılıyor. (form submit edilmiyor. Sayfa yenilenmiyor.)
2) Ajax yanıtı olarak gelen verilerle içerikleri doldurulmuş şekilde, div.variantAddContent elementi javascript ile oluşturuluyor.
3) Oluşturulan div.variantAddContent elementi, "Yeni Opsiyon Ekle" yazan butonun hemen sonrasına gelecek şekilde DOM'a basılıyor.
Sonuç olarak:

<form id="addProduct">
    <div id="addOption">
        <buton>Yeni Opsiyon Ekle</buton>
        <div class="variantAddContent gridAutoFlow" id="optionId-0">
            <div class="flexColumnLeftGap10">
                <label>Name</label>
                <input class="input_style" type="text" name="variantAddName[0][optionName]">
            </div>
            <div class="flexColumnLeftGap10">
                <label>Seçenek görünümü</label>
                <select name="variantAddName[0][variantType]">
                    <option>Radyo düğmesi</option>
                    <option>Açılır menü</option>
                    <option>Renk</option>
                    <option>Kutu</option>
                </select>
            </div>
            <div class="flexRow">
                <div class="varyantOptionAddListParent">
                    <div id="varyantOptionAddList" class="flexRow">
                        <label>Değerler</label>
                        <div class="flexCenter10 variantAddRow optionListContent" id="optionValId-0">
                            <input class="input_style" type="text" name="variantAddName[0][optionValue][0]">
                            <input type="radio" id="defaultOpt0" name="variantAddName[0][optionType]" value="0" class="radioStyle">
                            <label for="defaultOpt0">Default</label>
                            <div class="varinatOptionRemove"><i class="fa-solid fa-circle-minus"></i></div>
                        </div>
                        <div class="flexCenter10 variantAddRow optionListContent" id="optionValId-1">
                            <input class="input_style" type="text" name="variantAddName[0][optionValue][1]">
                            <input type="radio" id="defaultOpt1" name="variantAddName[0][optionType]" value="1" class="radioStyle">
                            <label for="defaultOpt1">Default</label>
                            <div class="varinatOptionRemove"><i class="fa-solid fa-circle-minus"></i></div>
                        </div>
                    </div>
                    <div class="addVaryantOPtion" data-optionid="0">+ Yeni değer ekle</div>
                </div>
            </div>
        </div>
        <buton>Opsiyonu ekle</buton>
    </div>
</form>

Burada "Opsiyonu ekle" butonuna basıldığında form'un submit edilmesini isteniyorsa butona (button yerine buton yazım hatası var) type=submit attribute'si eklenmeli:

<buton>Opsiyonu ekle</buton>

yerine

<button type=submit>Opsiyonu ekle</button>

Böylece buradaki değerler PHP'ye
1) form'da method attribute'si olmadığı için varsayılan "POST" metoduyla
2) action attribute'si olmadığı için aynı sayfayı yenileyerek
iletilir ve sayfanın üstünde bu veriler şöyle yakalanabilir:

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        
        $variantAddName = $_POST['variantAddName'];
        $optionName = $variantAddName[0]['optionName'];
        $variantType = $variantAddName[0]['variantType'];
        $optionValue0 = $variantAddName[0]['optionValue'][0];
        $optionType = $variantAddName[0]['optionType'];
        
        // bu verilerle yapılacak işlemler...
    }
?>

#013263

Soru detay sayfasını görüntüle