Hallo,
Ich habe ein Problem das wie ich vermute auf Kommunikationsprobleme zwischen Javascript und Html5 zurück zu führen ist. Ich habe als Startseite eine kleine Webseite geschrieben die den BMI eines Patienten berechnen soll (für weitere Berechnung auf noch folgenden Seiten tut nicht viel zur Sache). Die nötigen Informationen werden über Formulare eingelesen und dann in Javascript ausgewertet und der BMI berechnet. Anschießend soll das Ergebnis in einem weiteren Formular das "disabled" würde ausgegeben werden. Nun zu meinem Problem: sobald man die eingaben aus den Formularen absendet und der BMI in Javascript berechnet wird werden sämtliche eingaben aus den Formularen gelöscht, genauso auch aus dem Ergebnis Formular (Das Ergebnis leuchtet Kurz auf verschwindet aber sofort wieder).
Ich hätte es lieber wenn die Eingaben sowie das Ergebnis dort erhalten bleiben bis man zum nächsten Rechenschritt weiter geht.
Ich hoffe jemand hier im Forum hat da eine Idee wie das zustande kommt oder sogar eine Lösung wie ich dieses Problem umgehen kann.
MfG
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title>Get your patients BMI</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">-</h1>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<article id="bla">
<header>
<h1>Step1 getting the BMI of the patient</h1>
<p>Enter the weight of the patient bevor pregnancy (in kg) and the height of the patient (in cm) to determine the BMI of the patient</p>
</header>
<section> <!--Eingabefelder für gewicht und größe-->
<form name="WeightHeight" id="Input 1" >
<p>Weight of patient before pregnancy (in kg): </p>
<input maxlength="3" name="weight" type="number" id="weight1">
<p>Height of patient (in cm):</p>
<input maxlength="3" name="height" type="number" id="height">
<h2 id="H2">Get your BMI</h2>
<button id="getBMI" name="button1" type="Submit">Submit</button>
<p>Your BMI</p>
<input id="BMI" name="BMI" disabled="disabled" value="">
<form action="/Normal Weight/Step2Normal.html">
<p>Move forward</p>
<button id="nextStep" name="nextStep" type="Submit">Next step</button>
</form>
<script>
$(getBMI).on('click', function(){
var weight = $("input:first").val();
var height = $("input:eq(1)").val();
var bmi = (weight/([height/100]*[height/100]));
document.cookie = bmi;
if (bmi >= 18.5 && bmi < 25){ /* normal weight */
document.getElementsByName("BMI")[0].value=bmi.toFixed(1) + "normal weight";
}
else if (bmi >= 25 && bmi < 30){ /* overweight */
document.getElementsByName("BMI")[0].value=bmi.toFixed(1) + "overweight";
}
else if (bmi > 30){ /* obssesivweight */
document.getElementsByName("BMI")[0].value=bmi.toFixed(1) + "obssesivweight";
}
else{ /* alles andere */
window.alert(undefined)
}
});
</script>
</form>
</section>
</article>
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container" id="footer">
<footer class="wrapper">
<h3>Get your patients BMI</h3>
</footer>
</div>
</body>
</html>