Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „JavaScript-Formular - Wie fang ich an?“

FrolleinNaseweis

Miss Waikiki**

Hilfe!



Wie kann ich das da oben mit JavaScript umsetzen?

Ich schreib in einem Monat meine Prüfungen und habe keine Ahnung, wie ich da überhaupt anfangen soll!
Ich hab hier auch diverse Scripte vom Professor, aber ich steig da nicht durch! Wie fang ich da nur an?

Hilfe! :'(
 

Duddle

Posting-Frequenz: 14µHz

AW: JavaScript-Formular - Wie fang ich an?

Ein paar Threads vorher hat einer sowas in der Richtung gemacht:

Das Prinzip ist das Gleiche, du musst dich also nur in die dort beschriebene Lösung einlesen. Wenn du es verstanden hast, dann kannst du auch dein Formular scripten. Falls dabei konkrete Fragen aufkommen, kannst du sie immer noch hier stellen.


Duddle
 

cebito

undefined

AW: JavaScript-Formular - Wie fang ich an?

Hast du das gemacht?

Erstmal mußt du die Tabelle wegmachen und das ganze in eine packen sonst werden deine Buttons nicht funktionieren. kannst du anfangen zu lesen und dann grad weiter. Laß dich von den cgi-Aufrufen im form action nicht stören, kannst stattdessen dein javascript:rechnen (); aufrufen, dann wird auch gerechnet (das was du bisher als javascriptcode hast).
Die input type="radio" sollten denselben Namen haben, denn dann funktionieren sie auch wie gedacht (abwechselnd angewählt) sonst hättest nämlich auch 'ne Checkbox nehmen können. Die Werte (1000, 1500 usw.) würd ich im jeweiligen value eintragen, dann kannst du mit denen später direkt rechnen.

Wenn du das alles hast oder dabei nicht weiterkommst, dann frag wieder. Wenn das Formular fertig ist, können wir anfangen zu rechnen.
 

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

Weiters musst Du den Type vom Button "Zusammenzählen" auf button und nicht submit setzen. Dann fehlt dort nur mehr ein onClick.
Wenn alles in ein Formular gepackt ist, musst du den type vom Zurücksetzen-Button auf reset ändern. Dann kann auch nichts abgeschickt werden (ohne submit-Button).
 

MrManko

Nicht mehr ganz neu hier

AW: JavaScript-Formular - Wie fang ich an?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://1.2.3.4/bmi-int-js/bmi.js"language="javascript"></script>
<title>Untitled Document</title>
<script language="JavaScript">
<!--
   function preis() {
      ausgangspreis = 0;

      if(document.form.wahl[0].checked) {
         ausgangspreis = 1000;
      }

      else {
         ausgangspreis = 1500;
      }

      check1 = document.form.checkbox;
      check2 = document.form.checkbox2;
      check3 = document.form.checkbox3;

      if(check1.checked) {
         ausgangspreis = ausgangspreis-250;
      }

      if(check2.checked) {
         ausgangspreis = ausgangspreis*1+120*1;
      }

      if(check3.checked) {
         ausgangspreis = ausgangspreis*1+60*1;
      }

      alert("Summe"+ausgangspreis);
   }

-->
</script>
</head>
<body>
<form name="form">
<table width="400" height="260" border="2" align="center">
  <tr>

    <td width="200" height="23" align="center"><span class="style11">Modell</span></td>
    <td width="183" align="center"><span class="style11">Preis</span></td>
  </tr>
  <tr>
    <td height="48" align="center"><p class="style3">Typ A
      <label>
      <input type="radio" name="wahl"  value="a" />
      </label>

      <br />
    Typ B
      <input type="radio" name="wahl"  value="b" />
    </p>    </td>
    <td align="center"><p class="style3">1.000 Euro<br />
    1.500 Euro</p>    </td>
  </tr>

  <tr>
    <td height="23" colspan="2" align="center" valign="top"><p class="style3"><span class="style11">Optionen</span><br />
    </p></td>
  </tr>
  <tr>
    <td align="right"><span class="style3">ohne Monitor
      <input type="checkbox" name="checkbox" value="no_screen" />
      <br />
      2. Festplatte
      <input type="checkbox" name="checkbox2" value="hdd" />

      <br />
      WLAN Karte
      <input type="checkbox" name="checkbox3" value="wlan" />
</span></td>
    <td align="right"><p class="style3">- 250 ?<br />
    + 120 ?<br />
    + 60 ?</p>    </td>
  </tr>

  <tr>
    <td align="center"><span class="style3">Gesamtpreis</span></td>
    <td><center class="style3"><input type="text" name="textfield" id="textfield" /></center></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><span class="style3">Kontrollbutton
      <input type="checkbox" name="vier" id="vier" />
      <input type="button" onclick="preis()" value="Preis berechnen" />
      <input type="reset" value="Eingabe löschen" />

    </span></td>
  </tr>
</table>
</form>
</body>
</html>

Da, ist nur ein wenig getestet, aber sollte laufen.

Wenn nicht, dann weiter rumprobieren

LG

MrManko
 

cebito

undefined

AW: JavaScript-Formular - Wie fang ich an?

@ MrManko - Mit deinem script kostet ein Nichts ohne Monitor 1250€, ganz schön teuer so'n bissl Luft. Mit noch ein wenig rumprobieren mag es für'n Laien gut sein, aber für 'ne Prüfung. Zumal ihr fertiger code nix nutzen würd, denn wenn sie erklären muß, was sie gemacht hat, dann isses schon vorbei. Deshalb
@ FrolleinNaseweis - vergiß das lieber


Edit: und wozu ist denn das?

Code:
<script src="http://1.2.3.4/bmi-int-js/bmi.js"language="javascript"></script>

Willst du den BMI vom Monitor berechnen?
 
Zuletzt bearbeitet:

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

Die Ausgabe sollte anscheinend aber im Textfeld ausgegeben werden, sprich
document.....value=ausgangspreis;
Weiters würd ich die Checkboxen und Radiobuttons besser via id oder name (ich würde id vorziehen), da auf diese Weise kein Durcheinander ensteht, wenn zum Beispiel im oberen Bereich eine zusätzliche Checkbox dazukommt.

@FrolleinNaseweis: Brauchst Du nur einen Ansatz oder den kompletten Quellcode?

lg
Stephan
 

puur

Nicht mehr ganz neu hier

AW: JavaScript-Formular - Wie fang ich an?

na man kann doch noch ne if abfrage setzen die überprüft ob ein Monitor ausgewählt wurde. und somit das Problem fixen oder nicht ?
 

FrolleinNaseweis

Miss Waikiki**

AW: JavaScript-Formular - Wie fang ich an?

so, ich!
ich hab mal versucht, dass was ihr da oben geschrieben habt umzusetzen!
allerdings:
Laß dich von den cgi-Aufrufen im form action nicht stören, kannst stattdessen dein javascript:rechnen (); aufrufen,
da kann ich nichts mit anfangen irgendwie!

@MrManko: kann nicht rumprobieren an irgendwas, wo ich keine ahnung von hab, was ich rumprobiere! trotzdem danke.

@stroyer: kompletten quellcode!


jaaa... und hier.. if-abfrage, das kommt mir bekannt vor! wenn nich A, dann B.

meine prüfung schreib ich am 6.2. bis dahin muss javascript sitzen!
zumindest ansatzweise!

und hier das, was ich gedacht hab verändern zu müssen.

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!-- 
function rechnen(){
var preis;

function rechnen(){
if (document.formular.formularfeld.checked == true) {
alert ("Ausgewählt");
}


function ausgabe(){
if (document.formular.vier.checked == true){ alert ("Angeklickt"); }
else {alert('click die checkbox');}

}





-->
</script>

<style type="text/css">
<!--
.style3 {font-family: Geneva, Arial, Helvetica, sans-serif;}
.style11 {font-family: "Times New Roman", Times, serif; font-size: 24px; font-style: italic; font-weight: bold; }
-->
</style>
</head>

<body>
<table width="400" height="260" border="2" align="center">
  <tr>
    <td width="200" height="23" align="center"><span class="style11">Modell</span></td>
    <td width="183" align="center"><span class="style11">Preis</span></td>
  </tr>
  <form name="formular">
  <tr>
    <td height="48" align="center"><p class="style3">Typ A 
      <label>
      <input type="radio" name="radio" id="radio" value="1000" />
      </label>
      <br />
    Typ B 
      <input type="radio" name="radio" id="radio" value="1500" />
    </p>    </td>
    <td align="center"><p class="style3">1.000 Euro<br />
    1.500 Euro</p>    </td>
  </tr>
  <tr>
    <td height="23" colspan="2" align="center" valign="top"><p class="style3"><span class="style11">Optionen</span><br />
    </p></td>
  </tr>
  <tr>
    <td align="right"><span class="style3">ohne Monitor 
      <input type="checkbox" name="checkbox" id="checkbox" value="-250" />
      <br />
      2. Festplatte 
      <input type="checkbox" name="checkbox2" id="checkbox2" value="+120" />
      <br />
      WLAN Karte
      <input type="checkbox" name="checkbox3" id="checkbox3" value="+60" />
</span></td>
    <td align="right"><p class="style3">- 250 €<br />
    + 120 €<br />
    + 60 €</p>    </td>
  </tr>
  <tr>
    <td align="center"><span class="style3">Gesamtpreis</span></td>
    <td><center class="style3"><input type="text" name="textfield" id="textfield" /></center></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><span class="style3">Kontrollbutton 
      <input name="checkbox4" type="checkbox" id="checkbox4" />
      <input type="button" name="Preis berechnen" id="Preis berechnen" value="Preis berechnen" onclick="preis" /> 
      <input type="reset" name="button" id="button" value="Eingabe löschen" />
    </span></td>
  </tr>
  </form>
</table>
</body>
</html>

gibt es eigentlich tutorials zu javascript?
 
Zuletzt bearbeitet:

cebito

undefined

AW: JavaScript-Formular - Wie fang ich an?

na man kann doch noch ne if abfrage setzen die überprüft ob ein Monitor ausgewählt wurde. und somit das Problem fixen oder nicht ?

Geht doch garnicht um den Monitor, war nur ein Beispiel. Schau mal hier:

Code:
      if(document.form.wahl[0].checked) {
         ausgangspreis = 1000;
      }

      else {
         ausgangspreis = 1500;
      }
Das hab ich gemeint, wenn nichts ausgewählt ist, ist der Preis 1500. Du mußt immer mit der Unfähigkeit der User rechnen. Außerdem ist es besser den Preis im value einzutragen, denn dann mußt nur einmal den value-wert abfragen. Zweiter Vorteil, was wenn der Preis sich ändert?

Code:
function preis() {
    ausgangspreis = 0;
    
    if(document.form.wahl[0].checked) {
         ausgangspreis = document.form.wahl[0].value;
      }
    else if(document.form.wahl[1].checked) {
         ausgangspreis = document.form.wahl[1].value;
      }
    else{
         alert("Bitte waehlen sie ein Modell!");
         return;
      }
      // weiterrechnen
}

Soweit, Telefon dazwischen :motz:
@ FrolleinNaseweis - das muß ich jetzt erstmal lesen
 

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

Oder (was leichter ist) gar keine Action verwenden, auch kein submit, sondern nur einen normalen Button mit onClick. Da kann das Formular gar nicht abgeschickt werden.

EDIT: hab mir jetzt erlaubt den Quelltext etwas zu ändern und das Javascript so einzufügen, wie ichs als einfachste Variante sehe.

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
      <!-- 
        function rechnePreis()
          {
            var preis=0;
            if(document.getElementById('radioA').checked)
              {
                preis+=1000;
              }
            if(document.getElementById('radioB').checked)
              {
                preis+=1500;
              }
            if(document.getElementById('checkbox1').checked)
              {
                preis-=250;
              }
            if(document.getElementById('checkbox2').checked)
              {
                preis+=120;
              }
            if(document.getElementById('checkbox3').checked)
              {
                preis+=60;
              }
            document.getElementById('preis').value=preis;
          }
      -->
    </script>
    <style type="text/css">
      <!--
        .style3 {font-family: Geneva, Arial, Helvetica, sans-serif;}
        .style11 {font-family: "Times New Roman", Times, serif; font-size: 24px; font-style: italic; font-weight: bold; }
      -->
    </style>
  </head>
  <body>
    <form>
      <table height="260" border="2" align="center">
        <tr class="style11" height="23" align="center">
          <td width="200">Modell</td>
          <td width="183">Preis</td>
        </tr>
        <tr height="48" align="center" class="style3">
          <td>
            Typ A <input type="radio" name="typ" id="radioA">
            <br />
            Typ B <input type="radio" name="typ" id="radioB">
          </td>
          <td>
            1.000 &euro;
            <br />
            1.500 &euro;
          </td>
        </tr>
        <tr height="23" align="center" class="style11">
          <td colspan="2">Optionen</td>
        </tr>
        <tr align="right" class="style3">
          <td>
            ohne Monitor <input type="checkbox" id="checkbox1">
            <br />
            2. Festplatte <input type="checkbox" id="checkbox2">
            <br />
            WLAN Karte <input type="checkbox" id="checkbox3">
          </td>
          <td>
            - 250 &euro;
            <br />
            + 120 &euro;
            <br />
            + 60 &euro;
          </td>
        </tr>
        <tr align="center" class="style3">
          <td>Gesamtpreis</td>
          <td><input type="text" id="preis"> &euro;</td>
        </tr>
        <tr align="center" class="style3">
          <td colspan="2">
            Kontrollbutton <input type="checkbox" id="checkbox4">
            <input type="button" value="Preis berechnen" onclick="rechnePreis();"> 
            <input type="reset" value="Eingabe l&ouml;schen">
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Habs schon getestet.
Wozu sollte der Kontrollbutton bzw. die Kontrollcheckbox sein?
 
Zuletzt bearbeitet:

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

Aso,
dann einfach document.getElementById('preis').value=preis; durch


if(document.getElementById('checkbox4').checked)
{

document.getElementById('preis').value=preis;
}

ersetzen.
 

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

Danke, ich hab eh dran gedacht aber es nicht in den Code mitgenommen.

Also, so würd ichs machen:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
      <!-- 
        function rechnePreis()
          {
            if(document.getElementById('checkbox4').checked!=true)
              {
                alert('Bitte bestätigen Sie Ihre Auswahl!');
                return ;
              }
            var preis=0;
            if(document.getElementById('radioA').checked)
              {
                preis+=1000;
              }
            if(document.getElementById('radioB').checked)
              {
                preis+=1500;
              }
            if(preis==0)
              {
                alert('Bitte wählen Sie ein Modell aus');
                return ;
              }
            if(document.getElementById('checkbox1').checked)
              {
                preis-=250;
              }
            if(document.getElementById('checkbox2').checked)
              {
                preis+=120;
              }
            if(document.getElementById('checkbox3').checked)
              {
                preis+=60;
              }
            document.getElementById('preis').value=preis;
          }
      -->
    </script>
    <style type="text/css">
      <!--
        .style3 {font-family: Geneva, Arial, Helvetica, sans-serif;}
        .style11 {font-family: "Times New Roman", Times, serif; font-size: 24px; font-style: italic; font-weight: bold; }
      -->
    </style>
  </head>
  <body>
    <form>
      <table height="260" border="2" align="center">
        <tr class="style11" height="23" align="center">
          <td width="200">Modell</td>
          <td width="183">Preis</td>
        </tr>
        <tr height="48" align="center" class="style3">
          <td>
            Typ A <input type="radio" name="typ" id="radioA">
            <br />
            Typ B <input type="radio" name="typ" id="radioB">
          </td>
          <td>
            1.000 &euro;
            <br />
            1.500 &euro;
          </td>
        </tr>
        <tr height="23" align="center" class="style11">
          <td colspan="2">Optionen</td>
        </tr>
        <tr align="right" class="style3">
          <td>
            ohne Monitor <input type="checkbox" id="checkbox1">
            <br />
            2. Festplatte <input type="checkbox" id="checkbox2">
            <br />
            WLAN Karte <input type="checkbox" id="checkbox3">
          </td>
          <td>
            - 250 &euro;
            <br />
            + 120 &euro;
            <br />
            + 60 &euro;
          </td>
        </tr>
        <tr align="center" class="style3">
          <td>Gesamtpreis</td>
          <td><input type="text" id="preis"> &euro;</td>
        </tr>
        <tr align="center" class="style3">
          <td colspan="2">
            Kontrollbutton <input type="checkbox" id="checkbox4">
            <input type="button" value="Preis berechnen" onclick="rechnePreis();"> 
            <input type="reset" value="Eingabe l&ouml;schen">
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>
 

FrolleinNaseweis

Miss Waikiki**

AW: JavaScript-Formular - Wie fang ich an?

Code:
if (x==10) { alert ("Der Wert beträgt zehn."); }
else { alert ("Der Wert beträgt NICHT zehn."); }
das hab ich im script gefunden, kann man das auch so machen?
wenn nicht A, dann B. wenn haken nicht da, dann -250...

und wenn ich sowas mache, dann muss da immer dieses <form> hin?!
und kann man das noch anders machen, als dieses getElementById?
weil irgendwie hab ich das anders in erinnerung. glaub ich!
 
Zuletzt bearbeitet:

stroyer

Aktives Mitglied

AW: JavaScript-Formular - Wie fang ich an?

if(document.getElementById('checkbox1').checked)
{
preis-=250;
}


bedeutet im Prinzip WENN Hacken gesetzt DANN vom Preis 250 subtrahieren.
Ist das das was du gemeint hast?
 

cebito

undefined

AW: JavaScript-Formular - Wie fang ich an?

So und hier noch die andere, nur mit value gerechnet, damit man die Preise nur im Formular ändern muß. Statt id lieber aussagekräftige Namen genommen, die jeder nachvollziehen kann.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preise berechnen mit Javascript</title>

<style type="text/css">
<!--
.klein {font-size: 6px; font-style: italic; font-weight: bold; }
-->
</style>

<script language="JavaScript">
<!--
function preisberechnen() {
    var preis = 0;
    
    if(document.preisrechner.AGB.checked) {
        if(document.preisrechner.modell[0].checked) {
             preis = 1*document.preisrechner.modell[0].value;
          }
        else if(document.preisrechner.modell[1].checked) {
             preis = 1*document.preisrechner.modell[1].value;
          }
        else{
             alert("Bitte waehlen sie ein Modell!");
             return;
          }
        }
    else{
        alert("Sofort stimmen sie den AGB zu!!!");
        return;
        }
        
    if(document.preisrechner.monitor.checked) {
         preis+=1*document.preisrechner.monitor.value;
      }

      if(document.preisrechner.festplatte.checked) {
         preis+=1*document.preisrechner.festplatte.value;
      }

      if(document.preisrechner.wlan.checked) {
         preis+=1*document.preisrechner.wlan.value;
      }

      document.preisrechner.gesamtpreis.value = preis;
   }

-->
</script>

</head>

<body>
<div id="rechner">
    <form name="preisrechner" action="javascript:preisberechnen()">
        <h1>Unsere Angebote</h1>
        <p><input name="modell" type="radio" value="1000" /> Modell A 1000 &euro;</p>
        <p><input name="modell" type="radio" value="1500" /> Modell B 1500 &euro;</p>
        <h2>Optionen</h2>
        <p><input name="monitor" type="checkbox" value="-250" /> ohne Monitor -250 &euro;</p>
        <p><input name="festplatte" type="checkbox" value="120" /> 2.Festlatte +120 &euro;</p>
        <p><input name="wlan" type="checkbox" value="60" /> WLAN-Karte +60 &euro;</p>
        <p>Gesamtpreis <input name="gesamtpreis" type="text" disabled readonly="true" /> &euro;</p>
      <p><input name="AGB" type="checkbox" value="" checked="checked" /> 
      <span class="klein">Ich kann das Kleingedruckte nicht lesen und stimme deshalb den AGB blind zu.</span> </p>
        <p><input type="submit" value="Preis berechnen" /> <input type="reset" value="Eingabe löschen" /></p>
    </form>
</div>
</body>
</html>
Viel Spaß Frollein :D

@ stroyer - schon besser

Edit: achja, Tabelle weggelassen, kannste ja selbst machen incl. css
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.855
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben