Δυναμική προσθήκη textbox...

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

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

Απάντηση
rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από rafinos » 20 Ιούλ 2011 15:07

Γεια σας!!!
Αν αρχικά έχω αυτό:

Εικόνα

Και στη συνέχεια τσεκάρο το checkbox ή αν γίνεται να έχω κάποιο κουμπάκι προσθήκη να προσθέτη ένα textbox όπως αυτό:

Εικόνα

Γίνεται κάτι τετοιό;;;;;;;
Αυτό θέλω να γίνεται χωρίς refresh....

Ευχαριστώ προκαταβολικά!!! :)

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από Pantso » 20 Ιούλ 2011 15:56

Μπορείς να δοκιμάσεις να γράψεις

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

	<label>TEST</label> <input type="text" /> <br/>
	<div id="box"><label>TEST</label> <input type="text" /> <br/></div>
	
	<label for="add">Προσθήκη</label> <input type="checkbox" id="add" name="add" />
και μετά να γράψεις
$(document).ready(function() {

$("#box").hide();

$('#add').click(function() {
if ($('#add').is(':checked')) { $("#box").show(); } else { $("#box").hide(); }
});

});
Έτσι απλά το κάνεις hide/show ανάλογα με το checkbox. Μπορείς να δοκιμάσεις και με .append() ή με .add() και .remove()
Does not compute ... !
GreekTuts.net - Ελληνικά Βοηθήματα
VideoGamer.gr - Γιατί η ζωή είναι ένα παιχνίδι

rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από rafinos » 20 Ιούλ 2011 16:08

Αυτό τρέχει τοπικά ή όχι;;;
Τελευταία επεξεργασία από το μέλος rafinos την 20 Ιούλ 2011 16:12, έχει επεξεργασθεί 2 φορές συνολικά.

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από Pantso » 20 Ιούλ 2011 16:09

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

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;

	$&#40;"#box"&#41;.hide&#40;&#41;;
	
	$&#40;'#add'&#41;.click&#40;function&#40;&#41; &#123;
	   if &#40;$&#40;'#add'&#41;.is&#40;'&#58;checked'&#41;&#41; &#123; $&#40;"#box"&#41;.show&#40;&#41;; &#125; else &#123; $&#40;"#box"&#41;.hide&#40;&#41;; &#125;
	&#125;&#41;;
  
&#125;&#41;;
</script>
</head>
<body>
	
	<label>TEST</label> <input type="text" /> <br/>
	<div id="box"><label>TEST</label> <input type="text" /> <br/></div>
	
	<label for="add">Προσθήκη</label> <input type="checkbox" id="add" name="add" />
	
	
	
</body>
</html>
Ορίστε για να το δοκιμάσεις τοπικά
Does not compute ... !
GreekTuts.net - Ελληνικά Βοηθήματα
VideoGamer.gr - Γιατί η ζωή είναι ένα παιχνίδι

rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από rafinos » 20 Ιούλ 2011 16:12

Ευχαριστώ πάρα πολύ!!!

Να σαι καλά!!!

rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από rafinos » 20 Ιούλ 2011 16:22

Θα μπορούσες να μου δείξεις ένα αντίστοιχο με add και όχι με hide;;;

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από Pantso » 20 Ιούλ 2011 16:35

Δοκίμασε αυτό με .append και remove

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

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	
	$&#40;'#add'&#41;.click&#40;function&#40;&#41; &#123;
	   if &#40;$&#40;'#add'&#41;.is&#40;'&#58;checked'&#41;&#41; &#123; 
			$&#40;'.test'&#41;.append&#40;'<div id="box"><label>TEST</label><input type="text" /></div>'&#41;;
		&#125; else  &#123; 
			$&#40;'#box'&#41;.remove&#40;&#41;;
		&#125;
	&#125;&#41;;
  
&#125;&#41;;
</script>
</head>
<body>
	
	<label>TEST</label> <input type="text" /> <br/>
	<div class="test"></div>
	<label for="add">Προσθήκη</label> <input type="checkbox" id="add" name="add" />
	
	
	
</body>
</html>
Does not compute ... !
GreekTuts.net - Ελληνικά Βοηθήματα
VideoGamer.gr - Γιατί η ζωή είναι ένα παιχνίδι

rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Δυναμική προσθήκη textbox...

Δημοσίευση από rafinos » 20 Ιούλ 2011 16:51

Είσαι μεγάλος!!!!
Thanks!!!!! :)

Απάντηση

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

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

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