Απενεργοποίηση πολλαπλών πεδίων φόρμας βάσει επιλογής Radio button

Reissistm · 8 Σεπτεμβρίου 2011

Καλησπέρα,

έχω την εξής ερώτηση μιας και έψαξα αλλά δεν βρήκα κάτι στο web και οι γνώσεις μου είναι αρκετά περιορισμένες στο js:

έχω μία φόρμα html την οποία την χωρίζω σε 3 τμήματα με div name="x1" κλπ.

θέλω στο body, να κάνω onload="document.form.onomadiv.disabled=true"; ή hidden καλύτερα.

Ας το καλώ μέσω getelementbyname η id.

Μπορεί να με βοηθήσει κάποιος?

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

spartakoscs · 9 Σεπτεμβρίου 2011

Δεν είμαι σίγουρος ότι αυτό θες αλλά παρτό !! Αντικατέστησε το

><input name="x1" type="text" />

με το

><input name="x2" type="hidden" />

δεν θες ούτε css ούτε js για να κρύψεις ένα πεδίο !!

Reissistm · 9 Σεπτεμβρίου 2011

Τα πεδια δεν θελω.να ειναι κρυμενα παντα αλλα disabled onload και θα τα ενεργοποιω αναλογα με ενα radio b που εχω στην form.

dewn735 · 9 Σεπτεμβρίου 2011

Κάτι τέτοιο θες (για να εμφανίζονται μόλις πατήσεις το hyperlink):

><a href='#' onClick='javascript:document.getElementById("hid").style.display=""; '>test</a>
<div id="hid"  style="display:none"><!--Εδώ πάνε τα contols σου--></div>

parsifal · 9 Σεπτεμβρίου 2011

Κάτι τέτοιο μήπως;

>
<!doctype html>
<html lang="el">
<head>
   <meta charset="utf-8" />
   <title>Απενεργοποίηση πεδίων φόρμας από radio buttons</title>
   <style>.invisible { display: none; }</style>
   <script>
       function radioSelected(index)
       {
           var elements = document.getElementsByClassName("invisible");
           var i;

           for(i = 0; i < elements.length; i++) elements[i].style.display = "none";

           elements[index].style.display = "block";
       }
   </script>
</head>
<body>
   <form>
       <input name="radiogroup" type="radio" onclick="radioSelected(0);" />radio0<br />
       <input name="radiogroup" type="radio" onclick="radioSelected(1);" />radio1<br />
       <input name="radiogroup" type="radio" onclick="radioSelected(2);" />radio2<br />
       <div class="invisible"><input type="text" placeholder="input0" /></div>
       <div class="invisible"><input type="text" placeholder="input1" /></div>
       <div class="invisible"><input type="text" placeholder="input2" /></div>
   </form>
</body>
</html>

Live demo: http://dl.dropbox.com/u/3123541/insomnia.gr/disable_form_fields_based_on_radio_buttons.html

aghahowa · 9 Σεπτεμβρίου 2011

υπαρχει το attribute disabled="disabled" (η σε html5 σκετο disabled)

εξηγησε τι θελεις να κανεις γιατι εγω προσωπικα μπερδευτηκα με το τι πρεπει να ειναι disabled και τι hidden....

thanocaster · 9 Σεπτεμβρίου 2011

Και η λύση του parsifal, χωρίς onclick attributes (που προσωπικά τα απεχθάνομαι ), και με τη χρήση jquery:

>

<!doctype html>
<html lang="el">
<head>
 <meta charset="utf-8" />
 <title>Απενεργοποίηση πεδίων φόρμας από radio buttons</title>
 <style>.invisible { display: none; }</style>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
   google.load("jquery", "1.6.2");
   google.setOnLoadCallback(function() {
     var inputs = $("input[type=text]")
     $("input:radio[name=radiogroup]").click(function() {
       var value = $(this).val()
       var values = value.split(".")
       $("input").removeAttr("disabled")
       $("label").css("opacity", "1")
       for (i in values){
         $("input[name=input"+values[i]+"]").attr("disabled", "disabled")
         $("label[for=input"+values[i]+"]").css("opacity", "0.5")
       }
     });
   });
 </script>
</head>
<body>
 <form>
   <label for="radio0"><input id="radio0" name="radiogroup" type="radio" value="0" />Μόνο το πρώτο</label>
   <label for="radio1"><input id="radio1" name="radiogroup" type="radio" value="1.2" />Τα υπόλοιπα</label>
   <label for="radio2"><input id="radio2" name="radiogroup" type="radio" value="0.2" />Τα υπόλοιπα</label>
   <div><label for="input0">input 0: </label><input id="input0" type="text" name="input0" /></div>
   <div><label for="input1">input 1: </label><input id="input1" type="text" name="input1" /></div>
   <div><label for="input2">input 2: </label><input id="input2" type="text" name="input2" /></div>
 </form>
</body>
</html>

Για να επιλέξεις ποια πεδία θα απενεργοποιούνται με κάθε radio button, δίνεις για value τις τιμές των name των inputs χωρισμένες με τελείες. Πχ αν είχες 20 πεδία και ήθελες να απενεργοποιούνται τα πεδία με names 0,3,5,6,7,14 θα φτιάξεις ένα radio button με value '0.3.5.6.7.14':

>
<input name="radiogroup" type="radio" value="0.3.5.6.7.14" /><Η ετικέτα του radio button σου>

EDIT: Και, πάντα στο πνεύμα του parsifal, ας βάλω κι εγώ ένα live demo link

Σύνδεση

Απενεργοποίηση πολλαπλών πεδίων φόρμας βάσει επιλογής Radio button

Προτεινόμενες αναρτήσεις

Reissistm

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

spartakoscs

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Reissistm

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

dewn735

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

parsifal

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

aghahowa

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

thanocaster

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Αρχειοθετημένο

Σύνδεση