radio checked setzen und gleich die Aktion ausführen

[selfmade01]

Hallo,

ich habe hier zwei radio buttons.
Diese sind für das Sperren von Formularfelder zuständig.
Klickt man den einen dann kann man nur in die ersten 4 Felder was eingeben klickt man den anderen dann in die anderen 4 Felder (insgesamt sind 8 Eingabefelder vorhanden)

Wenn ich auf den radio klicke funktioniert das schon sehr gut.

Ich möchte jedoch das beim Laden der Seite (diese wird durch ajax geladen) schon ein bestimmter radio angeklickt ist und das auch die entsprechenden Felder gesperrt werden.

hier einer der radiobuttons

<input type="radio" name="radio'.$week.'" id="v'.$week.'" onclick="this.form.phBMin'.$week.'.disabled = this.form.phBMax'.$week.'.disabled = this.form.ecBMin'.$week.'.disabled = this.form.ecBMax'.$week.'.disabled = true; this.form.phVMin'.$week.'.disabled = this.form.phVMax'.$week.'.disabled = this.form.ecVMin'.$week.'.disabled = this.form.ecVMax'.$week.'.disabled = false ;" /> <label for="v'.$week.'" class="inline">

der eine radio button hat dabei die id id="v'.$week.'" z.B. id="v1" und der andere
id="b'.$week.'" z.B. id="b1"


hoffe natürlich das ich diese onklick-funktion beim laden der Seite auslösen kann... so würde ich mir viel Programmierarbeit sparen

Grüße Jürgen

[selfmade01]

Kann keiner helfen?

[qtify]

schonmal jQuery ausprobiert?

[selfmade01]

.. hi
jQuery ... ich träume davon und habe Alpträume

das Zeug mus echt genial sein.. aber diese Programmierlogik ich wo gerade ein wenig php kann und mich vor Javascript fürchte aber doch ein paar kleinigkeiten nachvollziehen kann.... aber das jquery... wow.. das muss jemand aus dem Busch erfunden haben.

bei mir z.B. beginnt eine function mit
function blabla(){
}

bei jquery kann man nicht mal sehn was eine function ist... ich glaub das ist alles eine function oder?

nein im Ernst... ich hätte da großes Interesse... aber mir müsste erstmal jemand kurz erklären wo der Unterschied zu javascript ist.

ich glaube jquery führt sich automatisch immer selber aus wenn die seite geladen wird oder?
bzw, er überwacht die seite auf irgendwelche aktionen und führt dann was angegebenes aus oder?


das geht bei mir nicht so einfach da meine seite nur einmal geladen wird und die ganzen zeilen mit eingabefelder werden in div container nachgeladen und dort verändern sich die id's...
und beim laden oder wenn die zeilen (div container) da sind, dann muss anhand einer id die jedoch nur in dem bereich der container sind was ausgeführt werden.
im oberen Bereich in dem jedoch die jquery Anweisung wäre bekommt diese ja von der neuen id nichts mit .


mmhh?
wenn Du lust hast, ich wäre Dir dankbar wenn du mir bei dem Problem helfen könntest

Grüße
Jürgen

[qtify]

So könnte es evtl aussehen, wenn Du das jQuery Framework benutzt

<input class="mein-radio-button" type="radio" name="xyz" value="felder-1" />
<input class="mein-radio-button" type="radio" name="xyz" value="felder-2" />

<section class="felder-1">A</section>
<section class="felder-1">B</section>
<section class="felder-1">C</section>
<section class="felder-1">D</section>

<section class="felder-2">0</section>
<section class="felder-2">1</section>
<section class="felder-2">2</section>
<section class="felder-2">3</section> 

<script>
$(function() {

// Verstecke alle Felder
$(".felder-1").hide();
$(".felder-2").hide();

$(document).on("click",".mein-radio-button",function(){

// Verstecke alle Felder
$(".felder-1").hide();
$(".felder-2").hide();

// Welche Felder sollen angezeigt werden
var oeffne = $(this).val();
// Auch möglich: var oeffne = $(this).attr("value");

// Zeige die gewünschten Felder
$("."+oeffne).show();

});

});

</script> 

[selfmade01]

So könnte es evtl aussehen, wenn Du das jQuery Framework benutzt

<input class="mein-radio-button" type="radio" name="xyz" value="felder-1" />
<input class="mein-radio-button" type="radio" name="xyz" value="felder-2" />

<section class="felder-1">A</section>
<section class="felder-1">B</section>
<section class="felder-1">C</section>
<section class="felder-1">D</section>

<section class="felder-2">0</section>
<section class="felder-2">1</section>
<section class="felder-2">2</section>
<section class="felder-2">3</section> 

<script>
$(function() {

// Verstecke alle Felder
$(".felder-1").hide();
$(".felder-2").hide();

$(document).on("click",".mein-radio-button",function(){

// Verstecke alle Felder
$(".felder-1").hide();
$(".felder-2").hide();

// Welche Felder sollen angezeigt werden
var oeffne = $(this).val();
// Auch möglich: var oeffne = $(this).attr("value");

// Zeige die gewünschten Felder
$("."+oeffne).show();

});

});

</script> 

Hallo,

wow, das soll alles sein mit so wenig code.. das wäre ja genial.

Komisch das ist das erste Beispiel was ich nu sehe bei dem ich einiges begreife, Und ich habe sehr sehr viel im Netz gesucht.

Frage:
Ich kann alles nachvollziehen bis $(".felder-2").hide();
... ich könnte die Felder ja auch nur ausgrauen also sperren oder?... das sie ganz verschwinden bräuchte ich nicht... aber es zeigt mir wie simple es sein kann.

Jedoch hier das große Problem

ich zeige es anhand deines html-codes
Achtung: bei mir wird alles mit <div> container und <input type="text">gemacht ich zeige es aber hier anhand deines beispiels
Was ich verändere ist das Attribut "name="xyz1" und alle anderen "name" attribute. ich muss die eingetragene Werte dann ja in eine db speichern (das laden und speichern funktioniert schon alles !
Das mache ich gerade mit javascript, ajax und einer zweiten php-seite die die Werte dann mit $_Get bekommt

bei mir ist die Zahl die angehängt wird, gleich die Zeile so dass ich eine Eindeutigkeit bekomme

<input class="mein-radio-button" type="radio" name="xyz1" value="felder-1" />
<input class="mein-radio-button" type="radio" name="xyz1" value="felder-2" />

<section class="felder-1">A</section>
<section class="felder-1">B</section>
<section class="felder-1">C</section>
<section class="felder-1">D</section>

<section class="felder-2">0</section>
<section class="felder-2">1</section>
<section class="felder-2">2</section>
<section class="felder-2">3</section> 

###############
#das was oben steht wäre die erste Ausgabe
#bis dahin würde Dein Beispiel noch funtionieren
###############

#ab hier wird die zweite zeile nun nachgeladen (ohne das die obere #angefasst wird (da ich mit <div> container arbeite geht das

<input class="mein-radio-button" type="radio" name="xyz2" value="felder-1" />
<input class="mein-radio-button" type="radio" name="xyz2" value="felder-2" />

<section class="felder-1">A</section>
<section class="felder-1">B</section>
<section class="felder-1">C</section>
<section class="felder-1">D</section>

<section class="felder-2">0</section>
<section class="felder-2">1</section>
<section class="felder-2">2</section>
<section class="felder-2">3</section> 


###usw.
### zeile für zeile 

Das Problem was ich damit habe ist...
ich benutze htmlkickstarter als css-framework und verwendet schon als Formatierung für meine Buttons, und input-felder das Attribut class.

Dann:
wenn ich das so mache wie in Deinem beispiel... wie würde er dann zwischen der ersten geladen Zeile und den anderen zeilen unterscheiden können?

Ich muss also der jquery-function irgendwie beim Laden des <div> containers die id oder eben die zahl der Zeile mitgeben so das wenn er die Zeilen sperrt , auch die richtigen findet.


oder stehe ich da jetzt total auf dm Schlauch?

Grüße Jürgen

[qtify]

Hey, du kannst die id ja noch mit anhängen... also so

<input class="mein-radio-button" type="radio" name="xyz" value="felder-1-{ID}" />
<input class="mein-radio-button" type="radio" name="xyz" value="felder-2-{ID}" />

<section class="felder-1-{ID}">A</section>
<section class="felder-1-{ID}">B</section>
<section class="felder-1-{ID}">C</section>
<section class="felder-1-{ID}">D</section>

<section class="felder-2-{ID}">0</section>
<section class="felder-2-{ID}">1</section>
<section class="felder-2-{ID}">2</section>
<section class="felder-2-{ID}">3</section> 

durch die

$(document).on("click",".mein-radio-button",function(){...}); 

kannst Du alle radio buttons mit der klasse "mein-radio-button" ansprechen, egal ob diese nachgeladen werden, oder nicht, solange das Hauptelement "document" nicht neu geladen wurde. Anstatt "document" könntest du auch "#content", wenn das Parent Element Deiner Tabelle die id="content" hat, oder ".content", wenn der Parent die class="content" hat. Die Selectoren, durch die Du die Elemente ansprichst, sind gleich aufgebaut die von css.

Nunja, wenn du die Felder nur ausgrauen möchtest, gibst du den input, oder select Feldern das attribut "disabled"

// Alle Felder in .felder-1-{ID} ausgrauen 
$(".felder-1-" + id).find('input, select, button').each(function() {

$(this).prop( "disabled", true);

});

// und andersrum
$(".felder-1-" + id).find('input, select, button').each(function() {

$(this).prop( "disabled", false);

}); 

[qtify]

ups doppelpost

[selfmade01]

Hallo,

wow, sorry aber ich checks einfach nicht...sorry.
bitte lass uns mein Beispiel verwenden sonst kapier ich das nie.

ich habe folgende seite die ist abgespeckt wie folgt aufgebaut... ich schreibe hier nicht alles rein also nicht wundern
das ist eine php-seite... ich verzichte hier auf das ganze echo und richtiger syntax aber anhand der Variablen "$xyz" siehst du was über php generiert (diese variablen und der einzufügende html-code kommt alles aus einer unterphpseite.php die durch ajax aufgerufen wird und immer nachgeladen wird

<html>
<html>
	<head>
</head>
<body>
<script>


</script>


<div class="setzdiebreiteauf-1200px"> // da ich ein css-framework verwende
<div> hier steht das was immer stehen soll und nicht verändert wird<div> button der die erste zeile via ajax laden wird</div></div>
// jetzt wird es interessant allles was hier kommt wird stes durch einen addnewrow-button nachgeladen
<div class="setzebreiteauf100%" id="erstezeile'.$woche'">
das ist die erste zeile
	<div> <input type="radio" name="radio'.$woche.'" id="felder_1-2'.$woche.'" </div>
	<div> <input type="radio" name="radio'.$woche.'" id="felder_3-4'.$woche.'" </div>
	<div><input type="text" id="feld1'.$woche.'" name="feld1'.$woche.'></div>
	<div><input type="text" id="feld2'.$woche.'" name="feld2'.$woche.'></div>
	<div><input type="text" id="feld3'.$woche.'" name="feld3'.$woche.'></div>
	<div><input type="text" id="feld4'.$woche.'" name="feld4'.$woche.'></div>
</div>

<div id="neuezeile-hier-wird-sie-angehängt"> //dieser bereich wird immer ausgetauscht mit einer Zeile wie oben mit den radios und eingabefelder und einem neuen Button der wieder ein hinzufügen ermöglicht

<div><button id="ichbinder-add-new-row-button'.$woche.'"></div>
</div>


</div>

vielleicht kannst du mir es nochmals anhand meines Beispiels zeigen

Ziel:
wenn eine zeile nachgeladen wird dann sollen die felder-1-bis-2 oder 3-4 ausgegraut werden so das keine Eingabe möglich ist
Da ich das ja vorselktieren muss wähle ich ganz einfach felder-1-2
Der User hat dann jedoch die Möglichkeit auf den Radio zu klicken damit er selber entscheiden kann welche felder er beschreiben darf.

Grund :
Wenn ich das alles dem user überlasse und keine Felder schon vorgesperrt sind dann kann er frei schnauze in jedes Feld was eintragen und ich komme später mit der Abfrage die die werte in die DB schreibt durcheinander

Ob man das nun beim nachladen der Zeile mit einer Möglichkeit macht
oder wenn das nicht geht
das man das bei einem klick in ein textfeld macht
Beispiel: der user schreibt was in das feld-1 in diesem Moment werden dann die Felder 3-4 ausgegraut
wenn der User merkt das er ins falsche feld was geschrieben hat hat er die Möglichkeit auf den radio zu klicken und die anderen felder auszuwählen.
Bei dieser Lösung müsste man dann aber automatisch z.B. alles was der user zuvor geschrieben hat aus den feldern löschen

Sorry... ich kann es nicht besser erklären hoffe ich verwirre dich nicht zu sher


Und vielen dank für die Hilfe

Grüße Jürgen

hier noch der code der zeilen die nachgeladen werden
Die Werte $woche werden jetzt ums eins nach oben gezählt
bei der ersten zeile stand also "1" bei der zweiten Zeile "2" usw drin
somit habe ich dann eindeutige id's

<div class="setzebreiteauf100%" id="erstezeile'.$woche'">
//das ist die temp zeile die stets nachgeladen wird bei klick auf den button
	<div> <input type="radio" name="radio'.$woche.'" id="felder_1-2'.$woche.'" </div>
	<div> <input type="radio" name="radio'.$woche.'" id="felder_3-4'.$woche.'" </div>
	<div><input type="text" id="feld1'.$woche.'" name="feld1'.$woche.'></div>
	<div><input type="text" id="feld2'.$woche.'" name="feld2'.$woche.'></div>
	<div><input type="text" id="feld3'.$woche.'" name="feld3'.$woche.'></div>
	<div><input type="text" id="feld4'.$woche.'" name="feld4'.$woche.'></div>
</div>

<div id="neuezeile-hier-wird-sie-angehängt"> //dieser bereich wird immer ausgetauscht mit einer Zeile wie oben mit den radios und eingabefelder und einem neuen Button der wieder ein hinzufügen ermöglicht

<div><button id="ichbinder-add-new-row-button'.$woche.'"></div>
</div>

[qtify]

<div class="ichbinneuhier">

<div><input type="radio" name="radio-woche001" value=".felder_1-2-woche001" checked="checked"/></div>
<div><input type="radio" name="radio-woche001" value=".felder_3-4-woche001"/></div>

<div><input class="felder_1-2-woche001" type="text" name="feld1-woche001"></div>
<div><input class="felder_1-2-woche001" type="text" name="feld2-woche001"></div>

<div><input class="felder_3-4-woche001" type="text" name="feld3-woche001"></div>
<div><input class="felder_3-4-woche001" type="text" name="feld4-woche001"></div>

</div> 

// Nachdem die Div ins DOM geladen wurde
$(".ichbinneuhier").load(function() {

var _this = this;

var zeige = $(this)find.("input[type=radio]:checked").val(); // gibt ''.felder_1-2-woche001" aus

// Alle Felder beim laden auf inaktiv setzen
$(this).find("input[type=text").prop("disabled", true);

// Die gewünschten Felder wieder aktivieren
$(this).find(zeige).prop("disabled", false);

// Und nun das Selbe, wenn ein radio geklickt wird
$(this).on("click", "input[type=radio]", function() {

  var zeige = $(this).val();

  // Alle Felder beim laden auf inaktiv setzen
  $(_this).find("input[type=text").prop("disabled", true);

  // Die gewünschten Felder wieder aktivieren
  $(_this).find(zeige).prop("disabled", false);


});

}); 

So müsste es ca. aussehen

[selfmade01]

<div class="ichbinneuhier">

<div><input type="radio" name="radio-woche001" value=".felder_1-2-woche001" checked="checked"/></div>
<div><input type="radio" name="radio-woche001" value=".felder_3-4-woche001"/></div>

<div><input class="felder_1-2-woche001" type="text" name="feld1-woche001"></div>
<div><input class="felder_1-2-woche001" type="text" name="feld2-woche001"></div>

<div><input class="felder_3-4-woche001" type="text" name="feld3-woche001"></div>
<div><input class="felder_3-4-woche001" type="text" name="feld4-woche001"></div>

</div> 

// Nachdem die Div ins DOM geladen wurde
$(".ichbinneuhier").load(function() {

var _this = this;

var zeige = $(this)find.("input[type=radio]:checked").val(); // gibt ''.felder_1-2-woche001" aus

// Alle Felder beim laden auf inaktiv setzen
$(this).find("input[type=text").prop("disabled", true);

// Die gewünschten Felder wieder aktivieren
$(this).find(zeige).prop("disabled", false);

// Und nun das Selbe, wenn ein radio geklickt wird
$(this).on("click", "input[type=radio]", function() {

  var zeige = $(this).val();

  // Alle Felder beim laden auf inaktiv setzen
  $(_this).find("input[type=text").prop("disabled", true);

  // Die gewünschten Felder wieder aktivieren
  $(_this).find(zeige).prop("disabled", false);


});

}); 

So müsste es ca. aussehen

hallo die Lösung sieht sehr clever aus...

Frage:
ich verwende ja ein css-framwork und alle meine div oder auch <input> felder werden mit class="schaugutaus" definiert.

jetzt verwendets Du aber für dei Zuweisung auch class wie mache ich das dann, kann ich hier mehrere angeben?

Noch was:

ich habe ja oben den <script></script> teil
dann unte den html teil der immer statisch bleibt und dann den teil der mit <div id"blabla"> markiert ist und nachgeladen wird...

Deine Lösung... merkt der oben automtisch im script teil das unten was nachgeladen wurde?

ich kenne das nur von javascript das dort meist immer eine aktion ausgelöst wird die dann wieder oben im script-teil eine function auslöst
ist das hier wohl anders?

Sorry für meine total dummen Dau-Fragen

Grüße Jürgen

[qtify]

ich bin mir nicht zu 100% sicher, ob die

$(".ichbinneuhier").load(function() { ... 

Funktion das automatisch erkennt, aber ich gehe davon aus, ansonsten lädst du diese Prozedur, nachdem du den success von deinem Ajax Script bekommst

Du kannst einer Klasse mehrere Werte geben

<div class="dies das jenes"></div> 

[selfmade01]

Hallo

habe das gerade probiert

das Problem was nun auftaucht ist wohl das jquery nun schon gleich beim ersten laden der gesamten seite dies ausführen will.
Da findet er aber nichts da ja noch nichts geladen wurde.

Ich habe auf dieser seite registerkarten.
<ul><li></li></ul>
wenn ein user auf eine dieser klickt erst dann kommt die erste Zeile

ich habe jetzt den jquery-code in die zeilen reingesetzt die geladen werden.

echo '<script>$(".ichbinneuhier").load(function() { var _this = this; var zeige = $(this)find.("input[type=radio]:checked").val(); // gibt .felder_1-2-woche001" aus // Alle Felder beim laden auf inaktiv setzen $(this).find("input[type=text").prop("disabled", true); // Die gewünschten Felder wieder aktivieren $(this).find(zeige).prop("disabled", false); // Und nun das Selbe, wenn ein radio geklickt wird $(this).on("click", "input[type=radio]", function() {   var zeige = $(this).val();   // Alle Felder beim laden auf inaktiv setzen   $(_this).find("input[type=text").prop("disabled", true);  // Die gewünschten Felder wieder aktivieren   $(_this).find(zeige).prop("disabled", false); }); });	</script>';

echo '<div class="ichbinneuhier"  >';

//und dann kommt der ganze andere code der mitgeladen wird also die radiobuttons usw

da macht er aber gar nichts... er läd zwar die Zeilen.. aber die jquery wird nicht ausgeführt

[selfmade01]

Hallo,

ich habe das jetzt den jquery code von dir nach dem ajax eingesetzt
aber da passiert dann gar nichts mehr, es wird auch die ajax anweisung nicht ausgeführt

hier ein ausschnitt aus der javascript funktion mit dem ajax was die Seite aufruft die den code für die zeile generiert

 xmlhttp.open("GET","pages/Settings.php?gtid="+testTypeId+"&gtg="+testTypeGroup+"&tid="+tabrid+"&test="+test+"&week="+week,true);

	  xmlhttp.send();	  

//da ich dachte jetzt müsste die seite hier sein
//habe ich hier den jquery code eingefügt

$(".ichbinneuhier").load(function() { 

var _this = this; 

var zeige = $(this)find.("input[type=radio]:checked").val(); // gibt ''.felder_1-2-woche001" aus 

// Alle Felder beim laden auf inaktiv setzen 
$(this).find("input[type=text").prop("disabled", true); 

// Die gewünschten Felder wieder aktivieren 
$(this).find(zeige).prop("disabled", false); 

// Und nun das Selbe, wenn ein radio geklickt wird 
$(this).on("click", "input[type=radio]", function() { 

  var zeige = $(this).val(); 

  // Alle Felder beim laden auf inaktiv setzen 
  $(_this).find("input[type=text").prop("disabled", true); 

  // Die gewünschten Felder wieder aktivieren 
  $(_this).find(zeige).prop("disabled", false); 


}); 

}); 

}

[qtify]

function request(testTypeId, testTypeGroup, tabrid, test, week) {
          
  $.ajax({
        
    url:'pages/Settings.php',
    type:"GET",
    data:{
      gtid: testTypeId,
      gtt: testTypeGroup,
      tid: tabrid,
      test: test,
      week: week
    },
    success:function(data) {
          
      $("#deinFormular").html(data); // Schreibt die Ausgabe in den Container mit der id="deinFormular"
          
      // $("#deinFormular").append(data); // Schreibt die Ausgabe an das Ende des Containers, falls die alten Formulare bleiben sollen
    
      $("#deinFormular .ichbinneuhier").load(function() {
      
        var _this = this;
        
        var zeige = $(this)find.("input[type=radio]:checked").val(); // gibt ''.felder_1-2-woche001" aus
        
        // Alle Felder beim laden auf inaktiv setzen
        $(this).find("input[type=text").prop("disabled", true);
        
        // Die gewünschten Felder wieder aktivieren
        $(this).find(zeige).prop("disabled", false);
        
        // Und nun das Selbe, wenn ein radio geklickt wird
        $(this).on("click", "input[type=radio]", function() {
        
          var zeige = $(this).val();
        
          // Alle Felder beim laden auf inaktiv setzen
          $(_this).find("input[type=text").prop("disabled", true);
        
          // Die gewünschten Felder wieder aktivieren
          $(_this).find(zeige).prop("disabled", false);
        
        
        });
      
      });  
    
    })
          
  });
  
} 

Ich kanns nicht genau testen, da ich den gesamten Quelltext nicht kenne, aber gerade für javascript Anfänger ist jQuery sehr willkommen und gut erklärt. Auch wenn ich Dir nicht helfen konnte, vllt hast Du einige neue Ansätze und Sichtweisen dadurch erhalten. vg