[Çözüldü] Dinamik olarak jQuery kodunun seçtiği ID özelliğini artırma

Timur · 08 Haziran 2012 - 14:25:15

jQuery ile yaptığım iki eklentiyi birleştirmek istiyorum. Amaç bir anket hazırlama formu oluşturmak.

sanırım bu şimdiye kadar forumda açtığım en başağrısı yaratan başlık olacak :/

1. eklenti : dinamik olarak bir tabloyu klonlayıp id ve name gibi özellikleri artırıyor.

2. ekleneti: anket formunun farklı türde cevapları olabilir. Bunlardan birincisi radiobuton , ikincisi checkbox ve üçüncüsü de textfield. Hangi alanın görünüp görünmeyeceği eklenen bir html select etiketiyle (combobox) belirleniyor.

Bu iki kodu birleştirmek istiyorum fakat beceremedim. amacım dinamik olarak id artırabilen, sonrasında her sorunun cevap türünü değiştirebilen bir form hazırlamak.

kodlarımı da burada paylaşıyorum:

1. EKLENTİ

Kod Seç


<html>
<head>
<title> clone table - 2.0 </title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript">
	$(document).ready(function() {	}); // jQuery is queried for DOM
	
	function clonetable() {
		var aydi = $('input#gizli').val();
		$table = $('table#table0').clone().attr('id', 'table' + aydi).attr('name', 'table' + aydi).appendTo("#div1");
		
		$("input[type='radio']", $table).prop("name", "ans" + aydi); // radiobutton'ların name özelliğini artırmak için
		aydi++;
		$('input#gizli').val(aydi);     
	}

</script>

</head>

<!--
		BU DOSYADAKİ KOD jQuery İLE KLONLANAN BİR TABLNUN İÇİNDEKİ RADIOBUTTON'UN NAME ÖZELLİĞİNİ DİNAMİK OLARAK ARTIRIYOR!!
-->

<body>

	<input type="button" id="button1" name="clonner" value="clone table" onClick="clonetable()" /> <!-- KLONLAMA BUTONU -->
	
	<input type="hidden" id="gizli" name="gizli" value="1" /> <br/> <br/> <!-- ID ARTIRMAK İÇİN KULLANILAN GİZLİ VARIABLE -->
	
	<div id="div1">
		<table border="1" id="table0" name="table0">
		<tr>
			<td colspan="5">Question text will be here</td>
		</tr>
		<tr>
			<td><input type="radio" id="A" name="ans0" />answer1 <br /></td>
			<td><input type="radio" id="B" name="ans0" />answer2 <br /></td>
			<td><input type="radio" id="C" name="ans0" />answer3 <br /></td>
			<td><input type="radio" id="D" name="ans0" />answer4 <br /></td>
			<td><input type="radio" id="E" name="ans0" />answer5 <br /></td>
		</tr>
		</table>
	</div>

</body>
</html>

2. EKLENTİ

Kod Seç


<!DOCTYPE html>
    <html>
    <head>
      <style>
      div { color:white; }
	  .startHidden { display:none; } <!-- başlangıçta bütün elemanların görünmez olmasını sağlıyor -->
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body bgcolor="gray">
      <select name="options">
		<option value="0"></option>
        <option value="1">radio button</option>
        <option value="2">checkbox</option>
        <option value="3">textfield</option>
      </select>

      <br /><br /><br />   <hr>   <br /><br /><br />

		<div id="question1">
			<p> Question text will be here </p>
			
			<div id="ans11" class="startHidden">
				<table>
				<tr>
					<td> <input type="radio" name="cevap1" value="rome" />rome </td>
					<td> <input type="radio" name="cevap1" value="paris" />paris </td>
					<td> <input type="radio" name="cevap1" value="london" />london </td>
					<td> <input type="radio" name="cevap1" value="istanbul" />istanbul </td>
					<td> <input type="radio" name="cevap1" value="new york" />new york </td>
				</tr>
				</table>
			</div>

			<div id="ans12" class="startHidden">
				<table>
				<tr>
					<td> <input type="checkbox" name="cevap1" value="rome" />rome </td>
					<td> <input type="checkbox" name="cevap1" value="paris" />paris </td>
					<td> <input type="checkbox" name="cevap1" value="london" />london </td>
					<td> <input type="checkbox" name="cevap1" value="istanbul" />istanbul </td>
					<td> <input type="checkbox" name="cevap1" value="new york" />new york </td>
				</tr>
				</table>
			</div>

			<div id="ans13" class="startHidden">
				enter somewhere else: <input type="text" name="cevap1" />
			</div>
		</div>



    <script>
	
    $("select").change(function () {
        var val = $(this).val();
    for(var i=1;i<4;i++)
    {if(i==val)$("#ans1"+i).show();
    else $("#ans1"+i).hide();
    }});

    </script>

    </body>
    </html>

BENİM DÜZENLEMEYE ÇALIŞMAM SONUCUNDA OLUŞAN BAŞARISIZLIK NETİCESİ

Kod Seç


<html>
<head>
<title> clone_AND_change </title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

     <style>
		.startHidden { display:none; } <!-- başlangıçta bütün elemanların görünmez olmasını sağlıyor -->
     </style>

<script type="text/javascript">
	$(document).ready(function() {	}); // jQuery is queried for DOM
	
	function clonetable() {
		var aydi = $('input#gizli').val();
		$table = $('table#table1').clone().attr('id', 'table' + aydi).attr('name', 'table' + aydi).appendTo("#div1");
		
		// radiobutton'ların name özelliğini artırmak için
		$("input[type='radio']", $table).prop("name", "ans" + aydi);
		
		// sorunun bulunacağı paragrafın id özelliğini artırmak için
		$("p", $table).prop("id", "questionTXT_" + aydi);
		
		aydi++;
		$('input#gizli').val(aydi);     
	}
	
	
	/* BURAYA CHANGE_ELEMENT_TYPE EKLENTİSİNİN FONKSİYONU GETİRİLECEK */

</script>

</head>

<!--
		BU DOSYADAKİ KOD jQuery İLE KLONLANAN BİR TABLNUN İÇİNDEKİ RADIOBUTTON'UN NAME ÖZELLİĞİNİ DİNAMİK OLARAK ARTIRIYOR!!
-->

<body bgcolor="gray">

	<!-- BURADAYDI -->
	
	<input type="hidden" id="gizli" name="gizli" value="2" /> <br/> <br/> <!-- ID ARTIRMAK İÇİN KULLANILAN GİZLİ VARIABLE -->
	
	<div id="div1">
		<table border="1" id="table1" name="table1">
		<tr>
			<td colspan="4">
				<p id="questionTXT_1"> Question text will be here </p>
			</td>
			<td colspan="1" >
				<select name="options">
					<option value="0"></option>
					<option value="1">radio button</option>
					<option value="2">checkbox</option>
					<option value="3">textfield</option>
				</select>
			</td>
		</tr>
		<tr>
			<td id="ans11" class="startHidden"><input type="radio" id="A" name="ans1" />answer1 <br /></td>
			<td id="ans11" class="startHidden"><input type="radio" id="B" name="ans1" />answer2 <br /></td>
			<td id="ans11" class="startHidden"><input type="radio" id="C" name="ans1" />answer3 <br /></td>
			<td id="ans11" class="startHidden"><input type="radio" id="D" name="ans1" />answer4 <br /></td>
			<td id="ans11" class="startHidden"><input type="radio" id="E" name="ans1" />answer5 <br /></td>
			
			<td id="ans12" class="startHidden"> <input type="checkbox" name="ans1" value="rome" />rome </td>
			<td id="ans12" class="startHidden"> <input type="checkbox" name="ans1" value="rome" />paris </td>
			<td id="ans12" class="startHidden"> <input type="checkbox" name="ans1" value="rome" />london</td>
			<td id="ans12" class="startHidden"> <input type="checkbox" name="ans1" value="rome" />madrid</td>
			<td id="ans12" class="startHidden"> <input type="checkbox" name="ans1" value="rome" />n.york</td>
			
			<td id="and13" class="startHidden"> Enter your opinion: <input type="text" name="ans1" /> </td>
			
		</tr>
		</table>
	</div>
	<div style="bgcolor=silver ">
		<input type="button" id="button1" name="clonner" value="clone table" onClick="clonetable()" /> <!-- KLONLAMA BUTONU -->
	</div>

</body>
</html>

Timur · 10 Haziran 2012 - 18:05:47

sorun klonlama algoritmasının kullandığı div'i saklayıp, 3 farklı klonlama buton ekleyerek her birinde aynı algoritmayı farklı input türlerini kullanarak çözüldü.

Ubuntu Türkiye

Haberler:

[Çözüldü] Dinamik olarak jQuery kodunun seçtiği ID özelliğini artırma

Timur

Timur