[SOLVED] Πρόβλημα με Add / Remove Elements

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

[SOLVED] Πρόβλημα με Add / Remove Elements

Δημοσίευση από charavge » 13 Δεκ 2011 08:16

Καλημέρα,

Έχω τον παρακάτω κώδικα με τον οποίο θέλω να επιλέγω μέσα από μία <select> και να προσθέτω σε μία φόρμα τα values. Για να αποφύγω τα διπλότυπα γίνεται ένας έλεγχος.
Για να λειτουργήσει σωστά η αναφορά στα πεδία, όταν θα έχουμε σβήσει κάποιο πεδίο φτιάχνω έναν πίνακα από όπου θα γίνεται η αναφορά.
Παρόλα αυτά κάτι δε φαίνεται να λειτουργεί σωστά, με αποτέλεσμα από ένα σημείο και ύστερα να σταματάει να προσθέτει εγγραφές.

Κώδικας: Επιλογή όλων

<html>
<body>
<style type="text/css">
.myInputs &#123;
	width&#58;40px;
	height&#58;40px;
	border&#58;solid 2px #aaaaaa;
	font-size&#58;10px;
	font-family&#58;verdana;
	margin-left&#58;5px;
	padding&#58;5px;
	text-align&#58;left;
	overflow&#58;hidden;
	float&#58;left;
&#125;
</style>

<script type="text/javascript">
var counter = 0;
var limit = 5;
var listitems=0;
var theelements=&#91;&#93;;

function addInput&#40;divName&#41;&#123;
var q=0;
var flag=0;

	if &#40;listitems == limit&#41;  &#123;
		alert&#40;"You have reached the limit of adding " + listitems + " inputs"&#41;;
	&#125;else&#123;
		var select_list_field = document.getElementById&#40;'recs'&#41;;
		var select_list_selected_index = select_list_field.selectedIndex;
		var thetext = select_list_field.options&#91;select_list_selected_index&#93;.text;
		var thevalue = select_list_field.value;

		if &#40;listitems>0&#41;&#123;
			while&#40;flag==0 && q<theelements.length&#41;&#123;
				var name='myInputs'+theelements&#91;q&#93;;
				var frm = document.getElementById&#40;name&#41;.value;
				if &#40;frm == thetext&#41;&#123;
					flag=1;
				&#125;else&#123;
					flag=0;
				&#125;
			q++;
			&#125;
		&#125;else&#123;
			counter=0;
			flag=0;
		&#125;
				
		if &#40;flag==0&#41;&#123;
			var newdiv = document.createElement&#40;'div'&#41;;
			var newdiv = document.createElement&#40;'div'&#41;;
			var divIdName = 'my'+counter+'Div';
			newdiv.setAttribute&#40;'id',divIdName&#41;;
			newdiv.innerHTML = '<input name="myInputs&#91;&#93;" id="myInputs'+counter+'" value="'+thetext+'" onclick="removeInput&#40;'+counter+'&#41;;" /> Number ' + thevalue + '</div>';
			document.getElementById&#40;divName&#41;.appendChild&#40;newdiv&#41;;
			theelements.push&#40;counter&#41;;
			counter++;
			listitems++;
		&#125;
	&#125;
&#125;

function removeInput&#40;divNum&#41; &#123;
  var child = document.getElementById&#40;'my'+divNum+'Div'&#41;;
  var parent = document.getElementById&#40;'dynamicInput'&#41;;
  parent.removeChild&#40;child&#41;;
  theelements.splice&#40;divNum,1&#41;;
  listitems--;
&#125;
</script>

<form method="POST">

<select name="recs" id="recs">
<option value="01">A </option>
<option value="02">B </option>
<option value="03">C </option>
<option value="04">D </option>
<option value="05">E </option>
<option value="06">F </option>
<option value="07">G </option>
<option value="08">H </option>
</select>

     <div id="dynamicInput">
          <!-- in here we create dynamically elements -->
     </div>
     <input type="button" value="Add another text input" onClick="addInput&#40;'dynamicInput'&#41;;">
</form>


</body>
</html>
Το κύριο πρόβλημα το εντοπίζω στο σημείο που γίνεται ο έλεγχος αναφορικά με τον πίνακα, οπότε και μπλοκάρει η Javascript.
Αν μπορεί κάποιος να βοηθήσει γιατί έχω κολλήσει 12 ώρες...
Τελευταία επεξεργασία από το μέλος charavge την 13 Δεκ 2011 18:42, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

[SOLVED] Πρόβλημα με Add / Remove Elements

Δημοσίευση από charavge » 13 Δεκ 2011 18:10

Ίσως αυτό να βοηθούσε να καταλάβετε περισσότερο:

Επειδή δημιουργούνται divs με συνεχόμενα ονόματα Div1, Div2, Div3 κλπ, όταν αφαιρούμε το Div2 σπάει η αλληλουχία και μένουν τα Div1, Div3.

Θα ήθελα να κάνω έλεγχο ότι η εγγραφή την οποία έχω επιλέξει δεν υπάρχει ήδη στα υπάρχοντα divs, ελέγχοντας το value των input.
Αυτός ο έλεγχος γίνεται με επανάληψη.

Το πρόβλημα είναι ότι μόλις η Javascript δε βρει π.χ. Div2 σταματάει.

Προσπάθησα να το κάνω καταχωρώντας τις τιμές σε πίνακα, ώστε να παρακολουθώ τις εγγραφές, αλλά δε φαίνεται να δουλεύει.
Ίσως κάτι να μου έχει ξεφύγει, γιατί σίγουρα κάτι δεν έχω κάνει σωστά.

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

[SOLVED] Πρόβλημα με Add / Remove Elements

Δημοσίευση από charavge » 13 Δεκ 2011 18:41

Δόξα τω Θεώ, το έλυσα...
Για να μη σταματάει η εκτέλεση χρειαζόταν έναν έλεγχο αν υπάρχει το div.

Κώδικας: Επιλογή όλων

if&#40;document.getElementById&#40;name&#41;&#41;
Όλος ο κώδικας αν τον χρειαστεί κάποιος:

Κώδικας: Επιλογή όλων

<html>
<body>
<style type="text/css">
.myInputs &#123;
	width&#58;20px;
	height&#58;20px;
	margin-top&#58;
	border&#58;solid 1px #c0c0c0;
	background-color&#58;#e1e1e1;
	font-size&#58;11px;
	font-family&#58;verdana;
	color&#58;#000;
	padding&#58;5px;
	float&#58;left;
&#125;
</style>

<script type="text/javascript">
var counter = 0;
var limit = 2;
var listitems=0;
var flager=0;

function addInput&#40;divName&#41;&#123;

//get value and text from select element
var select_list_field = document.getElementById&#40;'recs'&#41;;
var select_list_selected_index = select_list_field.selectedIndex;
var thetext = select_list_field.options&#91;select_list_selected_index&#93;.text;
var thevalue = select_list_field.value;


	for&#40;q=0; q < counter; q++&#41;&#123;
		var name='myInputs'+q;
		
		if&#40;document.getElementById&#40;name&#41;&#41;&#123;
			var frm = document.getElementById&#40;name&#41;.value;
			alert&#40;'Element <input> found! Value of element= '+frm&#41;;
					if &#40;frm == thetext&#41;&#123;
						alert &#40;'Element "'+frm+'" already exists'&#41;;
						flager=1;
					&#125;
		&#125;
	&#125;
	
	if &#40;flager==0&#41;&#123;
		 if &#40;listitems == limit&#41;  &#123;
			  alert&#40;"You have reached the limit of adding " + listitems + " inputs"&#41;;
			  alert&#40;'You can change the limit from the value named "limit" or you can delete the check with "if" statement.'&#41;;
		 &#125;
		 else &#123;
			  var newdiv = document.createElement&#40;'div'&#41;;
			  var divIdName = 'my'+counter+'Div';
			  newdiv.setAttribute&#40;'id',divIdName&#41;;
			  newdiv.innerHTML = '<input name="myInputs'+counter+'" id="myInputs'+counter+'" value="'+thetext+'" this.style.cursor="pointer" onclick="removeInput&#40;'+counter+'&#41;;" />';
			  document.getElementById&#40;divName&#41;.appendChild&#40;newdiv&#41;;
			  counter++;
			  listitems++;
			  alert&#40;'A new element was created. You can delete this ellement by clicking on it.'&#41;;
		 &#125;
	&#125;
	flager=0;
&#125;

function removeInput&#40;divNum&#41; &#123;
  var olddiv = document.getElementById&#40;'my'+divNum+'Div'&#41;;
  var d = document.getElementById&#40;'dynamicInput'&#41;;
//  alert&#40;divNum&#41;;
//  alert&#40;olddiv&#41;;
//  alert&#40;d&#41;;
  listitems--;
  d.removeChild&#40;olddiv&#41;;
&#125;
</script>

<form method="POST">

<select name="recs" id="recs">
<option value="01">A </option>
<option value="02">B </option>
<option value="03">C </option>
<option value="04">D </option>
<option value="05">E </option>
<option value="06">F </option>
<option value="07">G </option>
<option value="08">H </option>
</select> 

     <div id="dynamicInput">
          <!-- in here we create dynamically elements -->
     </div>
     <input type="button" value="Add another text input" onClick="addInput&#40;'dynamicInput'&#41;;">
</form>


</body>
</html>

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες