radio Show hide 2 felter

Specifikt til kun to:

<script type="text/javascript">
function showTxt(num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
}
</script>

Vis tekst 1 <input type="radio" name="gnu" onclick="showTxt(1);">&nbsp;Vis tekst 2 <input type="radio" name="gnu" onclick="showTxt(2);"><br>
<span id="txt1" style="display:none;">Dette er tekst 1</span>
<span id="txt2" style="display:none;">Dette er tekst 2</span><br>

Et andet forslag:

<html>
<head>
<title>test visning af kontroller</title>
<script type="text/javascript">
var activeElement;
function showElement(element) {
  if(activeElement) activeElement.style.display = 'none';
  activeElement = document.getElementById(element);
  if(activeElement) activeElement.style.display = 'block';
}
</script>
</head>
<body>

<form ID="Form1">
<input type="radio" name="rad" onclick="showElement('txt1')" >vis txt1<br>
<input type="radio" name="rad" onclick="showElement('div1')" >vis div1<br>
<input type="text" name="txt1" id="txt1" style="display:none" value="">
<div id="div1" style="display:none">En anden tekst</div>
</form>

</body>
</html>

-- men det er vel ikke altid så klogt at give en input block-display ?-)

Jeg har ikke gjort overvejelser i den retning og hvis du siger det så retter jeg gerne ind til højre for at fremme end bedre kodestandard på internettet :)

*lol*

-- en af mine overvejelser var præcis, hvilken type element, det var mest sandsynligt, thorus kunne bruge ...

-- normalt ville jeg smide tekster, som vises/skjules i block-level-elementer, men i denne situation så det ud til at være fornuftigt med et inline-element !-)

-- men kommentaren gik mere på, at hvis man sætter et element, som normalt er et inline-element til at være block-level, skal man gøre det bevidst !o]

Som du nok har opdaget bliver mit clientside webusvikling stadig gennemført med en grovfil og jeg har blot konstateret at display="block" viser det element jeg forsøger at vise og display="none" skjuler det igen (sørme så!). Jeg er yderst modtagelig overfor opgradering af min fil, så jeg kan gøre flere overvejede valg ifht. hvad jeg skal gøre i de forskellige situationer. Du bringer (endnu) et nyt aspekt ind i mit arbejde med clientside webudvikling - og det er jeg glad for :)

helt perfekt roenving. giver du et svar

display-propertyen kan tage rigtig mange forskellige værdier, men desværre er en hel del af dem, den del af css1 og -2, som IE ikke understøtter, men disse 3 skulle gælde for alle browsere, der understøtter css:

block|inline|none

-- og forskellen på block-level og inline kan du forestille dig, hvis du f.eks. i et word-dokument markerer 3 ord og trykker på Kursiv-knappen, så vil de tre ord blive hvor de var inde midt i teksten (kursiv er et inline-tag !-), men hvis du opretter en tabel, vil teksten blive delt over, så tabellen bliver et afsnit for sig selv (den er et block-level tag !o]

De øvrige muligheder er iøvrigt:

compact | inline-table | list-item |run-in | table | table-caption | table-cell |table-column-group |table-footer-group | table-header-group | table-row | table-row-group

Velbekomme '-)

-- og tak for point ;~}

hvad nu hvis jeg vil have at hvis man vælger showTxt 1 så skal form action laves om til

form action="url1"
og hvis man vælger showTxt 2
form action="url2"

F.eks.

<script type="text/javascript">
function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"url1":"url2";
}
</script>

<form action="..." ... >

...

Vis tekst 1 <input type="radio" name="gnu" onclick="showTxt(this.form,1);">&nbsp;Vis tekst 2 <input type="radio" name="gnu" onclick="showTxt(this.form,2);"><br>

...

</form>

hvad hvis jeg vil have hele <form action etc. skal være anderledes?

Så kan du indstille alle form-attributter på samme måde, som action ændres !-)

kan man ikke tage hele:
send1
<form onSubmit="return sbasket(this);checkform(this);" name="send" method="post" action="send.phtml" enctype="multipart/form-data">

send2
<form onSubmit="return sbasket(this);checkform(this);" name="send" method="post" action="send2.phtml" enctype="multipart/form-data">

Nej (nå, jaeh, tjah, det kan man godt, men det er voldsomt omstændeligt, da man så også får fjernet formens indhold i processen !-)

-- men hvad er der til hinder bare at ændre action, i det viste eksempel er det bare spild af gode kræfter at gøre noget anderledes ?-)

jeg har bare en onsubmit + en target i den ene action.

100point til dig hvis du gider at hjælpe med det er gået lidt død i det her javascript og det skal jo laves.

Skal der ikke være onsubmit i den ene af mulighederne og ikke target i en af dem ?-)

Prøv at skrive dem, som du ville have gjort, hvis du skrev to forskellige form-tags !-)

send1
<form onSubmit="return sbasket(this);checkform(this);" name="send" method="post" action="send.phtml" enctype="multipart/form-data">

send2
<form onSubmit="return sbasket(this);checkform(this);" name="send" method="post" action="send2.phtml" enctype="multipart/form-data" onsubmit="return doPopup(this);" target="bet">

Du kan da ikke have to onsubmit ?-)

onSubmit="return sbasket(this);checkform(this);" skal sættes sammen med onsubmit="return doPopup(this);" i send2

Hvis du sætter en return først i sådan en, vil den anden/de andre funktion(er) ikke blive udført, men f.eks.

<script type="text/javascript">
function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"url1":"url2";
  f.target = num==1?"":"bet";
  if(num==1)
    f.onsubmit = function(){
      checkform(this);
      return sbasket(this);
    }
  else
    f.onsubmit = function(){
      doPopup(this);
      checkform(this);
      return sbasket(this);
    }
}
</script>

<form action="..." ... >

...

Vis tekst 1 <input type="radio" name="gnu" onclick="showTxt(this.form,1);">&nbsp;Vis tekst 2 <input type="radio" name="gnu" onclick="showTxt(this.form,2);"><br>

...

</form>

-- hvis du vil have en retur-værdi fra begge eller alle funktioner skal vi have fat i noget boolean logik !-)

er ikke javascript haj, hvordan får jeg funktionen showtxt til at vise indhold i
<form name="sendbasket" method="post" enctype="multipart/form-data">
dynamisk.

jeg har min radio som virker men der kommer ikke indhold på.

Øeh, hvad ?-)

du skriver <form action="..." ... > men er ikke helt klar over hvad der skal stå af javascript så det vil virke

Det, der ikke ændres:

<form name="send" method="post" enctype="multipart/form-data">

det virker ikke.

<script type="text/javascript">
function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"start.pml":"order_sendt.phtml";
  f.target = num==1?"":"betaling";
  if(num==1)
    f.onsubmit = function(){
      checkform(this);
      sbasket(this);
      return doPopup(this);
    }
  else
    f.onsubmit = function(){
      checkform(this);
      return sbasket(this);
    }
}
</script>
     
<form name="sendbasket" method="post" enctype="multipart/form-data">

Sidder dine radios inde i formen ?-)

ja den reloader bare siden

-- skal checkform() forhindre afsendelse ?-)

-- og så har du flyttet return-tingen til doPopup(), returnerer den true eller false ?o]

ja checkform skal forhindre form hvis man ikke har indtastede navn etc.

doPopup bruges sådan her (det er send1) men den skal også have
checkform(this);
return sbasket(this);

<form method="post" action="start.pml"
onsubmit="return doPopup(this);" target="Betaling">

Så skal du:

<script type="text/javascript">
function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"url1":"url2";
  f.target = num==1?"":"bet";
  if(num==2)
    f.onsubmit = function(){
      return sbasket(this) && checkform(this);
    }
  else
    f.onsubmit = function(){
      doPopup(this);
      return sbasket(this) && checkform(this);
    }
}
</script>

hvad med return doPopup(this);?

Returnerer doPopup noget ?-)

return doPopup(this);

<script type="text/javascript"><!--
var newwin = null;
function doPopup(f) {
  newwin = window.open ('', 'Betaling', 'scrollbars,status,width=550,height=600');
  newwin.focus();
  if (!self.name) self.name = 'shopwin';

  if (!newwin.opener) newwin.opener = self;
  f.opener.value = self.name;
  return true;
}
//-->
</script>

Det kan du da bare lade være med, da den altid returnerer true, vil den ingen indflydelse have på resten !-)

her har jeg det hele.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio tjek form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript"><!--
var newwin = null;
function doPopup(f) {
  newwin = window.open ('', 'Betaling', 'scrollbars,status,width=550,height=600');
  newwin.focus();
  if (!self.name) self.name = 'shopwin';

  if (!newwin.opener) newwin.opener = self;
  f.opener.value = self.name;
  return true;
}
//-->

function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"http://www.exp.dk":"order_sendt.phtml";
  f.target = num==1?"":"betaling";
  if(num==2)
    f.onsubmit = function(){
      return sbasket(this) && checkform(this);
    }
  else
    f.onsubmit = function(){
      doPopup(this);
      return sbasket(this) && checkform(this);
    }
}

function sbasket(f) {

        if (f.name.value.length < 1) {
            alert("du har glemt at indtaste dit Navn");
            return false;
        }
                if (f.postalCode.value.length < 1) {
            alert("du har glemt at indtaste dit post nr.");
            return false;
        }

        if (emailCheck(f.email.value) == false) {
            alert('Du har ikke indtastet en gyldig E-mail');
            return false;
        }
       
        if (f.betingelser.checked == false) {
            alert("du har glemt at godkende vores betingelser.");
            return false;
        }
       
        return true;
    }
   
</script>
</head>

<body>

<form name="sendbasket" method="post" enctype="multipart/form-data">
<input type="radio" name="gnu" onClick="showTxt(1);">vælg 1<br>
<input type="radio" name="gnu" onClick="showTxt(2);">vælg 2
<br><br>
<span id="txt1" style="display:none;">Dette er tekst 1  <input type="submit" name="next" value="Betal"></span>
<span id="txt2" style="display:none;">Dette er tekst 2 <input type="submit" name="Submit" class="butbasket" value="Gennemf&oslash;r ordre"></span><br>

</form>
</body>
</html>

Hvad er checkform ?-)

ja godt spørgmål, nok en fejl.

-- så bliver det jo nok:

  if(num==2)
    f.onsubmit = function(){
      return sbasket(this);
    }
  else
    f.onsubmit = function(){
      doPopup(this);
      return sbasket(this);
    }

virker ikke. har du prøvede at køre hele koden som jeg skrev før? jeg får ikke fejl eller noget aktivitet

-- du har jo heller ikke ændret kaldet, som jeg gjorde @14:58:07 !-)

<input type="radio" name="gnu" onClick="showTxt(this.form,1);">vælg 1<br>
<input type="radio" name="gnu" onClick="showTxt(this.form,2);">vælg 2

ahhh der var den

Det hele ser ud til at virke.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio tjek form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript"><!--
var newwin = null;
function doPopup(f) {
  newwin = window.open ('', 'Betaling', 'scrollbars,status,width=550,height=600');
  newwin.focus();
  if (!self.name) self.name = 'shopwin';

  if (!newwin.opener) newwin.opener = self;
  f.opener.value = self.name;
  return true;
}
//-->

function showTxt(f,num){
  document.getElementById("txt1").style.display = num==1?'inline':'none';
  document.getElementById("txt2").style.display = num==2?'inline':'none';
  f.action = num==1?"http://www.exp.dk":"order_sendt.phtml";
  f.target = num==1?"":"betaling";
    if(num==2)
    f.onsubmit = function(){
      return sbasket(this);
    }
  else
    f.onsubmit = function(){
      doPopup(this);
      return sbasket(this);
    }
}

function sbasket(f) {

        if (f.name.value.length < 1) {
            alert("du har glemt at indtaste dit Navn");
            return false;
        }
                if (f.postalCode.value.length < 1) {
            alert("du har glemt at indtaste dit post nr.");
            return false;
        }

        if (emailCheck(f.email.value) == false) {
            alert('Du har ikke indtastet en gyldig E-mail');
            return false;
        }
     
        if (f.betingelser.checked == false) {
            alert("du har glemt at godkende vores betingelser.");
            return false;
        }
     
        return true;
    }
 
</script>
</head>

<body>

<form name="sendbasket" method="post" enctype="multipart/form-data">
<input type="radio" name="gnu" onClick="showTxt(this.form,1);">vælg 1<br>
<input type="radio" name="gnu" onClick="showTxt(this.form,2);">vælg 2

<br><br>
<span id="txt1" style="display:none;">Dette er tekst 1  <input type="submit" name="next" value="Betal"></span>
<span id="txt2" style="display:none;">Dette er tekst 2 <input type="submit" name="Submit" class="butbasket" value="Gennemf&oslash;r ordre"></span><br>

</form>
</body>
</html>

mange tak for hjælpen endun engang dine extra point ligger her
http://www.eksperten.dk/spm/642420

-- og det skal tilføjes, at det er at lægge op til problemer, hvis man bruger navne, som kan forveksles med element-typer, så find et andet navn til din 'Gennemfør ordre'-knap !-)