login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery radiobuttons

Offline roy - 18/06/2009 22:39 (laatste wijziging 18/06/2009 22:40)
Avatar van royPHP gevorderde Beste,

Ik ben een dynamisch content management systeem aan het maken. Dynamische wil zeggen dat de hele opbouw van de invulformulieren uit een database wordt gehaald. Een invulformulier kan bestaan uit verschillende elementen: textfield, textarea, radio button, checkbox, etc.

Het is een ajax CMS, dus ik haal de waarde uit de velden met jQuery. Dat gaat allemaal goed, behalve bij de radiobuttons en selectboxen. Dat komt omdat er bij de geselecteerde waarde 'checked' in de code staat en het javascript haalt de waarde op waarbij checked staat.

Een voorbeeld:
Uit de database worden de gegevens gehaald om het invulformulier op te bouwen en de gegevens die bij een item, dat gewijzigd moet worden, horen. Hij bouwt de radiobutton en zet de waarde 'CHECKED' bij de waarde die bij het item hoort.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var brokenstring = item.values.split(",");
  2.             $.each(brokenstring, function(i, value){
  3.                 html += '<input type="radio" name="column|' + item.column + '" value="' + value + '" ' + ((value == item.value) ? "checked=''" : "") + ' />' + value; //{if $bez == $item.storedvalue}CHECKED{/if} //' + ((value == item.value) ? "checked='checked'" : "") + '
  4.             });


In html ziet dat er zo uit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input type="radio" checked="CHECKED" value="true" name="column|fade"/>
  2. true
  3. <input type="radio" value="false" name="column|fade"/>
  4. false


De waarde die bij het item hoort is dus 'true'.
Wanneer ik deze waarde wil wijzigen in 'false' dan klik je false aan, maar 'checked' blijft bij 'true' staan.

Met jQuery haal ik de waarde uit alle velden op. Dus ook de waarde die bij checked staat. (dit is de verkeerde waarde)
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("form").find("input:checked, input:type='text', input:type='hidden', input:type='password', input:type='submit', option:selected, textarea").filter(":enabled").each(function(){
  2.             params[this.name || this.id ||
  3.             this.parentNode.name ||
  4.             this.parentNode.id] = this.value;
  5. 			alert(this.value);
  6.         });


Hoe kan ik het zo maken dat als ik op een andere radiobutton klik bij de eerste radiobutton 'checked' wordt weggehaald en bij de tweede wordt neergezet. Het probleem is dat het meer dan twee radiobuttons kunnen zijn en meerdere groepen(sets).

Ik hoop dat iemand hier een oplossing voor heeft.

11 antwoorden

Gesponsorde links
Offline Kevin - 19/06/2009 13:44
Avatar van Kevin Crew Ajax/REST Steek ze gewoon in een radio group? Daar kan je niet meer dan 1 checken. En laat vervolgens alle waarden updaten naar je database, zodanig dat die dat checked was en nu niet meer, dat die de waarde unchecked heeft.
Offline roy - 19/06/2009 17:37
Avatar van roy PHP gevorderde bedankt voor je reacte, maar als het zo simpel was dan had ik het zelf ook voor elkaar gekregen.

Beide radiobuttons vormen al 1 groep. het probleem is dat bij het ophalen van de waarde (dmv jQuery) er gekeken wordt naar de controls waarbij 'checked' staat. in de html code blijft checked dus vast staan en verspringt niet mee als een andere radiobutton wordt geselecteerd. zie de beginpost.
Offline Rik - 19/06/2009 22:06
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Je kunt handmatig het checked attribuut verwijderen met removeAttr() en dan weer neerzetten met attr(). Zie:
http://docs.jquery.com/Attributes
Offline roy - 20/06/2009 10:56
Avatar van roy PHP gevorderde ok maar hoe weet je war je het attribute moet verwijderen als je op een andere radiobutton klikt?

Zou je een voorbeeldje kunnen geven?
Offline Rik - 20/06/2009 13:19
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Je zou op alle checkbox input's een onchange event kunnen zetten en in de callback de vakjes bij een bepaalde naam afgaan en kijken of ze aangevinkt zijn met this.checked. Als dat zo is kun je het attribuut weghalen.

Maar wat trouwens veel makkelijker werkt is: input[@type=radio]:checked toevoegen aan je find functie. Heb het net getest en werkt.  
Offline roy - 20/06/2009 13:25 (laatste wijziging 21/06/2009 20:49)
Avatar van roy PHP gevorderde ik heb het nu zo:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("form").find("input:checked, input[@type=radio]:checked, input:type='text', input:type='hidden', input:type='password', input:type='submit', option:selected, textarea").filter(":enabled").each(function(){
  2.             params[this.name || this.id ||
  3.             this.parentNode.name ||
  4.             this.parentNode.id] = this.value;
  5.         });


Hij pakt nog steeds niet de veranderde radiobutton..

Iemand nog een idee?
Offline Richard - 21/06/2009 23:14
Avatar van Richard Crew algemeen @type is verouderd, gewoon type. En hoe kom je bij :type=... ??? Dat is dus input[type=password] bijvoorbeeld.
Offline roy - 21/06/2009 23:33 (laatste wijziging 22/06/2009 11:13)
Avatar van roy PHP gevorderde bedankt voor je reactie.

input:checked zou dan toch ook goed moeten gaan??
dit staat in mijn nieuwe code input[type=radio]:checked en werkt ook niet..

wat zou het probleem kunnen zijn ?
Offline Rik - 22/06/2009 11:56
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Misschien gaat het dan mis in je filter op :enabled. Staat dat ook goed?
Offline roy - 22/06/2009 12:19
Avatar van roy PHP gevorderde Hi,

je kan het testen (je hebt de inlogcodes)

dit moet je dan uitvoeren in firebug:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var params = {};
  2. $("form").find("input:checked, input[@type=radio]:checked, input:type='text', input:type='hidden', input:type='password', input:type='submit', option:selected, textarea").each(function(){            params[this.name || this.id ||            this.parentNode.name ||            this.parentNode.id] = this.value;        });


Het probleem is dat ie beide waardes pakt.. (geloof ik)
en false is de laatste, dus wordt die in de query genoteerd.
Offline Rik - 22/06/2009 15:52
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Die jQuery selectors zijn toch lastiger dan verwacht.  

Toch is het gelukt:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("form").find('input:text, input:checked, input:radio:checked, input[type=hidden], input:password, input:submit, option:selected, textarea').filter(':enabled').each((...)
Ik heb zoveel mogelijk geprobeerd de regels aan te houden.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s