απόκρυψη input field on cancel

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

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

Απάντηση
Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 14:35

φτιάχνω μια φόρμα...στην οποία ο χρήστης μπορεί προαιρετικά να βάλει το url.

Για να το βάλει πρέπει να κάνει πρώτα κλικ ένα κουμπί edit, οπότε και ανοίγει η το πεδίο.
Εκείνη την στιγμή εμφανίζονται και τα κουμπιά save και cancel τα οποιία νομίζω οτι είναι ευνόητο τι κάνουν.

Το πρόβλημα έχει να κάνει με το cancel. Υπάρχουν 2 σενάρια εδώ, με το ένα είμαι ΟΚ με το άλλο όμως είναι το πρόβλημα-και είναι και ο λόγος για τον οποίο κάνω αυτό το topic.

Ας πουμε ότι ο χρήστης αρχίζει να συμπληρώνει το πεδίο και αλλάζει γνώμη και πατάει cancel, εδώ δεν υπάρχει πρόβλημα, αποκρύπτω την φόρμα και τελειώνει εδώ το πράγμα.

Το πρόβλημα ξεκινάει ότον ο χρήστης έχει υποβάλλει τα στοιχεία του και όταν κάνει κλικ για να κάνει edit την φόρμα τα υποβληθέντα στοχεία εμφανίζονται(καθώς αυτά "τραβιούνται ") από τον server. Aν πατήσω cancel τα στοιχεία θα κρυφτούν...κάτι που δεν θα έπρεπε αφού αυτά είναι τα υποβληθέντα στοιχεία και ΌΧΙ κάποια που ο χρήστης ξεκίνησε να πληκτρολογεί και άλλαξε γνώμη στην πορεία, όπως περιγράφω παραπάνω.

Το πρόβλημα λοιπόν είναι πως θα διαχωρίσω την μια από την άλλη περίπτωση ώστε η συμπεριφορά του cancel να είναι ανάλογη.

Δίοτι όταν πάει να κάνει cancel στα ήδη υποβληθέντα αρχείο-τώρα-το input element κρύβεται, κάτι που δεν πρέπει να γίνεται...απλώς πρέπει να επιστρέφει στην προ edit μορφή του.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

απόκρυψη input field on cancel

Δημοσίευση από fafos » 15 Σεπ 2013 15:53

hidden input
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 15:54

fafos έγραψε:hidden input
μπορείς να το επεξηγήσεις λίγο σε παρακαλώ?

Πάει το μυαλό μου βέβαια...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

απόκρυψη input field on cancel

Δημοσίευση από alou » 15 Σεπ 2013 15:56

Θα κρατάς την αρχική τιμή του input και στο cancel θα κάνεις ότι ενέργεια είναι σωστή.

πχ

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

<input name="url" type="text" data-originalValue="somewhere.com/something" value="somewhere.com/something">
Αν αλλάξει το input value και δεν πατηθεί save αλλά πατηθεί cancel, επαναφέρεις το αρχικό value

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

$&#40;'#cancel'&#41;.on&#40;'click', function&#40;e&#41;&#123;
e.preventDefault; //αν είναι type submit ή link το χρειάζεσαι αυτό
$&#40;'input&#91;name="url"&#93;'&#41;.val&#40;data&#40;'originalValue'&#41;&#41;;
...
&#125;&#125;
Το πότε θα δημιουργηθεί το data attribute εξαρτάται από το πως λειτουργεί η φόρμα, πχ αν την υποβάλεις με ajax, στο success μπορείς να αναθέσεις να δημιουργηθεί αυτό. Αν την φτάχνεις server side ακόμα πιο εύκολα.

edit, τώρα είδα τη λύση του fafos :D
ναι και το hidden input την ίδια δουλειά θα μπορούσε να κάνει αλλά νομίζω καλύτερα να κρατάς ότι αφορά το κάθε input μέσα στο ίδιο στοιχείο, εφόσον μπορείς γιατί μπορεί να υπάρξουν και τέτοιες ανάγκες για άλλα πεδία.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 16:08

alou έγραψε:Θα κρατάς την αρχική τιμή του input και στο cancel θα κάνεις ότι ενέργεια είναι σωστή.

πχ

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

<input name="url" type="text" data-originalValue="somewhere.com/something" value="somewhere.com/something">
Αν αλλάξει το input value και δεν πατηθεί save αλλά πατηθεί cancel, επαναφέρεις το αρχικό value

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

$&#40;'#cancel'&#41;.on&#40;'click', function&#40;e&#41;&#123;
e.preventDefault; //αν είναι type submit ή link το χρειάζεσαι αυτό
$&#40;'input&#91;name="url"&#93;'&#41;.val&#40;data&#40;'originalValue'&#41;&#41;;
...
&#125;&#125;
Το πότε θα δημιουργηθεί το data attribute εξαρτάται από το πως λειτουργεί η φόρμα, πχ αν την υποβάλεις με ajax, στο success μπορείς να αναθέσεις να δημιουργηθεί αυτό. Αν την φτάχνεις server side ακόμα πιο εύκολα.

edit, τώρα είδα τη λύση του fafos :D
ναι και το hidden input την ίδια δουλειά θα μπορούσε να κάνει αλλά νομίζω καλύτερα να κρατάς ότι αφορά το κάθε input μέσα στο ίδιο στοιχείο, εφόσον μπορείς γιατί μπορεί να υπάρξουν και τέτοιες ανάγκες για άλλα πεδία.
Yποθέτω οτι αναφέρεσαι στο data attribute της HTML5?

Πάντως ευχαριστώ και τους δυο, καταλάβατε τι εννοώ αμέσως.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

απόκρυψη input field on cancel

Δημοσίευση από fafos » 15 Σεπ 2013 16:10

kai tou alou eina sosth h proseggish.. ena mikro paradeigma apo to hidden:

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	$&#40; "#cancel" &#41;.click&#40;function&#40;&#41; &#123;
		var serverVal = $&#40;'#foohidden'&#41;.val&#40;&#41;;
		$&#40;'#foo'&#41;.val&#40;serverVal&#41;;
	&#125;&#41;;
&#125;&#41;;
</script>
</head>
<body>
	<input type="text" name="foo" id="foo"  value="kapoio value" />

	<input type="hidden" name="foohidden" id="foohidden" value="kapoio value" />

	<a id="cancel">cancel</a>
</body>
</html>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

απόκρυψη input field on cancel

Δημοσίευση από alou » 15 Σεπ 2013 16:22

Και κάτι που θα μπορούσε να φτιάχνει τα data attributes μόνο όταν χρειάζονται, δηλαδή όταν γίνει edit η φόρμα, θα ήταν

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

$&#40;'#edit'&#41;.on&#40;'click', function&#40;&#41;&#123;
$&#40;'#some_form input'&#41;.each&#40;function&#40;&#41;&#123;
$&#40;this&#41;.data&#40;'originalValue', $&#40;this&#41;.val&#40;&#41;&#41;;
&#125;&#41;
&#125;
Οπότε στο cancel απλά το παίρνεις από εκεί και το επαναφέρεις.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 16:45

δοκίμασα την λυση του αλλού αλλά η error console toy chrome βγαζει data is not defined

Nα και λίγο κώδικας:

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

$&#40;'#canceladrs'&#41;.click&#40;function&#40;&#41; &#123; 

    

$&#40;'input#wwwaddress'&#41;.val&#40;data&#40;'originalValue'&#41;&#41;; 
$&#40;'input#wwwaddress'&#41;.removeClass&#40;'hideurl'&#41;;
$&#40;'label&#91;for=url&#93;'&#41;.removeClass&#40;'hideurl'&#41;;

 closeaddress&#40;&#41;; 
               
&#125;&#41;;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

απόκρυψη input field on cancel

Δημοσίευση από alou » 15 Σεπ 2013 16:56

Serghio, πρέπει να μεταφέρεις τη λογική στη δική σου html. Που να ξέρω τι ακριβώς έχεις κάνει στη φόρμα σου? Υπάρχει το data attribute στην html σου? αν όχι, λογικό.

Οι λύσεις που έχεις, είναι είτε ένα data attribute που θα κρατάει την αρχική τιμή, είτε ένα hidden input που σου είπε ο fafos. Το πως θα λειτουργήσει στη φόρμα σου, που προφανώς συμβαίνουν και άλλα πράγματα, θα το κρίνεις εσύ.

Και σου είπα, το data attribute μπορεί να δημιουργείται με jquery όταν κάνεις edit τη φόρμα.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 17:08

αυτή είναι η html:

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

<input type="text" class="text valid" data-originalvalue="www.in.gr" value="www.in.gr" size="40" id="wwwaddress" name="wwwaddress">


είναι περίεργο που δεν παίζει.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 17:31

ξεχνα την φόρμα μου για λίγο και πήγαινε εδώ¨

jsfiddle.net/fiddlehunt/QubJB/10/

Δεν δουλεύει ούτε στο παραπάνω.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

απόκρυψη input field on cancel

Δημοσίευση από Serghio » 15 Σεπ 2013 17:43

δοκίμασα αυτό τελικά, που δουλεύει:

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

 var initial=$&#40;'input#wwwaddress'&#41;.attr&#40;'data-originalvalue'&#41;;

$&#40;'input#wwwaddress'&#41;.val&#40;initial&#41;; 

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

απόκρυψη input field on cancel

Δημοσίευση από alou » 15 Σεπ 2013 17:54


Απάντηση

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

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

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