JavaScript function για αφαίρεση hidden fields από φόρμα

[philos]

Καλημέρα παιδιά!

 

Λοιπόν, έχουμε την ακόλουθη javascript function που ψάρεψα στο διαδίκτυο. Σκοπός της είναι να προσθέτει hidden fields σε μια html φόρμα:

	function addHidden(theForm, key, value) 
	{
		// Create a hidden input element, and append it to the form:
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = key;'name-as-seen-at-the-server';
		input.value = value;
		theForm.appendChild(input);
	}

Οπότε την καλώ κάπως έτσι:

var theForm = document.forms['addmoderator_form'];
addHidden(theForm, 'moderator_userids[]', userid);

Το θέμα: χρειάζομαι ακριβώς μια αντίστοιχη function για removeHidden.

Δηλαδή να σβήνει το hidden field με name key και με value value ΑΝ υπάρχει.

 

Δοκίμασα ένα αντίγραφο της addHidden με theForm.removeChild(input); αλλά επιστρέφεται λάθος στη κονσόλα: NotFoundError: Node was not found

 

ΥΓ: Δεν ξέρω αν πρέπει να αναφερθεί, αλλά με ενδιαφέρει να λειτουργεί με name - πίνακα (πως λέγεται), πχ  name="moderator_userids[ ]"

 

Καμιά ιδέα;

[defacer]

Παρόλο που αυτό που λες γίνεται, δε νομιζω οτι σου χρειάζεται όπως το λες. Τι θες να πετύχεις;

[tsofras]

Αφού είναι hidden γιατί θές να το σβήσεις και δεν του κάνεις απλά reset το value?

[rafinos]

Αφού είναι hidden γιατί θές να το σβήσεις και δεν του κάνεις απλά reset το value?

Μπορεί να έχει θέμα στο τι συμβαίνει μετά το submit της φόρμας.

 

Αλλά όπως είπε και ο defacer τι ακριβώς θέλεις να πετύχεις; 

 

Μήπως θα ήταν καλύτερο να περνάς μια class ή ένα μοναδικό id σε κάθε hidden element και να τα σβήνεις με βάση αυτό;

[philos]

Λοιπόν παιδιά θα σας εξηγήσω τι θέλω να κάνω. Έχω φτιάξει ένα ajax πεδίο αναζήτησης με onkeyup να ψάχνει για users (usernames) στη βάση. Το ajax call επιστρέφει json formatted δεδομένα (usernames με userids). Εμφανίζω τα usernames το ένα κάτω από το άλλο (σαν auto-complete) με δίπλα ένα κουμπί ADD με onclick= sc_add_usermoderator() (εννοώντας να προστεθούν στη φόρμα η οποία μετά θα γίνει submit).

Όταν κάνεις ADD ένα αποτέλεσμα, το userid του προστίθεται στο hidden field moderator_userids[]:

    function sc_add_usermoderator(userid, username)
    {
        var theForm = document.forms['addmoderator_form'];
        addHidden(theForm, 'moderator_userids[]', userid); // δείτε τη συνάρτηση αυτή στο αρχικό post       
        selectedmods[userid] = username;
        sc_selectedmods_refresh();
    }

Επιπλέον προστίθεται στον πίνακα selectedmods, ώστε να εμφανίζω μέσα σε ένα div άμεσα και ανανεωμένα, τα ήδη επιλεγμένα usernames (userids), ώστε ο χρήστης να μπορεί να κάνει REMOVE.

	function sc_selectedmods_refresh()
	{
		document.getElementById('sc_selectedmods').innerHTML = '';
		
		for (key in selectedmods)
		{
			document.getElementById('sc_selectedmods').innerHTML += '<div style=\"font-weight:bold; padding:4px;\">' + selectedmods[key] + '  <a class=\"sc_row_userremove\" href=\"javascript:void(0)\" onclick=\"sc_remove_usermoderator(' + key + ');\">[REMOVE]</a></div>';
		}
	}

Το κόλλημα: αυτή είναι η remove function:

    function sc_remove_usermoderator(userid)
    {
        var theForm = document.forms['addmoderator_form'];
        removeHidden(theForm, 'moderator_userids[]', userid);            
        selectedmods.splice(userid, 1);
        sc_selectedmods_refresh();
    }

Θα λειτουργούσε άψογα, αν μπορούσα να κάνω την removeHidden να δουλέψει όπως αντιστοίχως η addHidden.

Δηλαδή να αφαιρεθεί το userid από το hidden field moderator_userids[].

Με ενδιαφέρει όταν ο χρήστης κάνει submit τη φόρμα (σε php script), να έχω μόνο τα userids που επέλεξε τελικώς ο χρήστης, κάνοντας όσα ADD ή REMOVE ήθελε.

 

Αυτά

[Predatorkill]

το λαθος που σου βγαζει η κονσολα ειναι οτι δεν μπορει να βρει το element για να το βγαλει (node not found).

 

Πιστευω οτι ψαχνεις να βρεις key στο array αλλα δε το βρισκει γιατι δεν υπαρχει. 

 

Ο κωδικας αυτος ειναι ολοκληρος ή επιλεκτικα κομματια;

 

Επισης, console.log() is your friend...

[philos]

Δηλαδή αυτό που έχω δοκιμάσει: το theForm.removeChild(input); στη remove function σε αντιστοιχία με το theForm.appendChild(input); της addHidden είναι σωστό και απλά κάτι άλλο παίζει;

 

Θα το ξεσκονίσω σε λίγο με console logs!

[Predatorkill]

Στην function removeΗidden δε βρισκει τι να αφαιρεσει. Βαλε ολο το κωδικα και το html αρχειο.

[Chemical]

function removeHidden (theForm, key, value) {

  var child = theForm.querySelector('input[value="'+value+'"][name="'+key+'"]')

  if (!child) return false 

  theForm.removeChild(child)

}

[defacer]

Ο λόγος που δε σου το βρίσκει είναι πως όταν λες removeChild, του λες "αφαίρεσε αυτό εδώ το ίδιο object που σου λέω από τα children". Προφανώς αυτό δε δουλεύει γιατί στα children δεν υπάρχει το ίδιο object που λες (μόλις το δημιούργησες με document.createElement) αλλά ένα όμοιο μεν, διαφορετικό δε object.

 

Η λύση του Chemical παραπάνω θα δουλέψει επειδή όπως βλέπεις εκεί ψάχνει το DOM να βρει το hidden που ήδη υπάρχει και αυτό κάνει remove.

 

Παρόλα αυτά αν πρόκειται να έχεις κρατημένες πληροφορίες σε data structure όπως το selectedmods στο παράδειγμά σου (πράγμα που δεν είναι 100% απαραίτητο, θα μπορούσες ίσως να έχεις κρατημένες όλες τις πληροφορίες που σου χρειάζονται στο DOM με διάφορες μεθόδους) τότε θα μπορούσες να αποθηκεύσεις εκεί και τα hidden elements:

function sc_add_usermoderator(userid, username)
{
  var theForm = document.forms['addmoderator_form'];
  var hidden = addHidden(theForm, 'moderator_userids[]', userid); // κάντην να το επιστρέφει
  selectedmods[userid] = {username: username, element: hidden};
  sc_selectedmods_refresh();
}


function sc_remove_usermoderator(userid)
{
  var theForm = document.forms['addmoderator_form'];
  theForm.removeChild(selectedmods[userid].element); // απλά, δε χρειάζεται πια removeHidden()
  selectedmods.splice(userid, 1);
  sc_selectedmods_refresh();
}

Θα πρέπει βέβαια να κάνεις και κάποιες αντίστοιχες αλλαγές στη sc_selectedmods_refresh μιας και έχεις αλλάξει τη δομή του selectedmods.