Durch Onclick errechnete Variable in anderes Feld übertragen

[nils242]

Hallo!
Zuerst einmal zu mir:
Ich bin in HTML und CSS ein wenig trainiert, versuche gerade mir etwas Javascript draufzuschaffen, um gezielt meine Ideen umzusetzen.
In dem Formular, das ich gerade erstelle (1. JS-Versuch mit JQuery mobile!!), sollte eine aus einer ausgewählten Option des Selektors errechnete Variable in ein Textfeld eingetragen werden - die Syntax treibt mich in den Wahnsinn, zudem bin ich mir ob der Sinnhaftigkeit der Rechnung nicht sicher...
Evtl. könnte mir einer von Euch helfen?
HTML:

<div id="opioide" data-role="page" data-theme="a">  
                <div data-role="header" data-position="inline">  
            <h1 style=" padding-top: 0px; padding-bottom: 0px;" aria-level="1" role="heading" class="ui-title">Opioid-<br>umrechnung</h1>  
                   <a data-icon="arrow-l" href="#menu" class="back ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" data-theme="a" style="top: 10px; bottom: 10px;" data-transition="slide" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all" style="border-top-width: 0px; top: 0px; margin-top: 3px;"><span class="ui-btn-text">zurück</span><span class="ui-icon ui-icon-arrow-l  
ui-icon-shadow ui-iconsize-18">&nbsp;</span></span></a>  
                </div>  
<br><form id="opioidform"  method="post" name="opioidform">  
<div class="ui-select"><a href="#" role="button" id="opioid1" aria-haspopup="true" aria-owns="select-choice-5-menu" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-inline="true" data-mini="true" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-block ui-btn-icon-right ui-btn-up-c">  
  
</span></a><select id="opioid1" select onchange="milliodermikro()" data-native-menu="false" name="opioid1" tabindex="-1">  
<option value="0" data-placeholder="true">Aktuelles Opioid wählen</option>  
<option value="buprenorphinpoiv">Buprenorphin p.o./i.v.</option>  
<option value="buprenorphintransdermal">Buprenorphin transdermal</option>  
...  
<option value="tramadol">Tramadol</option>  
</select></div>  
    <table cellpadding="0" cellspacing="2">  
    <tr>  
        <td align="left" valign="bottom">Dosis:&nbsp;</td>  
        <td align="left" valign="top">&nbsp;<input type="number" input-class="large-input" name="opioiddosis1" id="opioiddosis1" value="" size="3" maxlength="3" /> </td>  
        <td width="60" align="left" valign="bottom">&nbsp;<input type="text"  data-theme="b" name="milliodermikro" size="5" readonly="readonly" maxlength="4" value=""></td>  
...        

formeln.js:

  
(function($){  
  
$.fn.milliodermikro = function (opioidform)  
{  
    var mgvalue;  
  
    if (opioidform.opioid1.value == "buprenorphintransdermal" || opioidform.opioid1.value == "fentanyltransdermal")  
    { mgvalue = "µg/h";  
}  
else {  
    mgvalue = "mg";  
  
document.getElementById("milliodermikro").value = (mgvalue);  
return true;  
}  
  
};

Vielen Dank!
Nils

[Dr.Colossos]

Hi,
hab dir das mal zusammen geschustert - immer noch viel zu verbessern.

1. immer komplettes Beispiel posten, am besten minimalisiert.
2 JQuery ist hier unnötig, mahcts vor allem schwieriger dir zu helfen
3. onchange="milliodermikro()"wird aufgerufen ohne Argument, Definition hat aber Parameter "opioidform" - einfach aufrufen mit milliodermikro(this), dann ist "this" das select-Feld selbst (Parameter in meiner Lösung angepasst"
4. Klammerung in if/else war falsch, glaub ich ...
5. document.getElementById("milliodermikro").value = (mgvalue); - es gab kein Feld mit id "milliodermikro", nur eins mit Name "milliodermikro" - das ist NICHT das gleiche - gefixed
6. µ ist kein Standardzeichen - such das HTML-Äquivalent (wie bei ä, ö, ü, ß, bzw. setze entsprechendes charset)
7. nutze camelCase Namen .... milliodermikro -> milliOdeMikro, dann kann man deinen Code auch lesen

Viel Erfolg!

  
  
  
<script>  
function milliOrMicro (selectField)  
{  
    var mgvalue;  
  
    if (selectField.value == "buprenorphintransdermal" || selectField.value == "fentanyltransdermal")  
    {  
      mgvalue = "µg/h";  
    }  
    else {  
	mgvalue = "mg";  
    }  
  
  
    document.getElementById("milliodermikro").value = (mgvalue);  
    return true;  
}  
</script>  
  
<div id="opioide" data-role="page" data-theme="a">  
                <div data-role="header" data-position="inline">  
            <h1 style=" padding-top: 0px; padding-bottom: 0px;" aria-level="1" role="heading" class="ui-title">Opioid-<br>umrechnung</h1>  
                   <a data-icon="arrow-l" href="#menu" class="back ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" data-theme="a" style="top: 10px; bottom: 10px;" data-transition="slide" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all" style="border-top-width: 0px; top: 0px; margin-top: 3px;"><span class="ui-btn-text">zurück</span><span class="ui-icon ui-icon-arrow-l  
ui-icon-shadow ui-iconsize-18">&nbsp;</span></span></a>  
                </div>  
<br><form id="opioidform"  method="post" name="opioidform">  
<div class="ui-select"><a href="#" role="button" id="opioid1" aria-haspopup="true" aria-owns="select-choice-5-menu" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-inline="true" data-mini="true" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-block ui-btn-icon-right ui-btn-up-c">  
  
</span></a><select id="opioid1" select onchange="milliOrMicro(this)" data-native-menu="false" name="opioid1" tabindex="-1">  
<option value="0" data-placeholder="true">Aktuelles Opioid wählen</option>  
<option value="buprenorphinpoiv">Buprenorphin p.o./i.v.</option>  
<option value="buprenorphintransdermal">Buprenorphin transdermal</option>  
...  
<option value="tramadol">Tramadol</option>  
</select></div>  
    <table cellpadding="0" cellspacing="2">  
    <tr>  
        <td align="left" valign="bottom">Dosis:&nbsp;</td>  
        <td align="left" valign="top">&nbsp;<input type="number" input-class="large-input" name="opioiddosis1" id="opioiddosis1" value="" size="3" maxlength="3" /> </td>  
        <td width="60" align="left" valign="bottom">&nbsp;<input type="text"  data-theme="b" id="milliodermikro" size="5" readonly="readonly" maxlength="4" value=""></td>  
</tr>  
</table>  
</form>  
</div>  

[nils242]

Hi,
hab dir das mal zusammen geschustert - immer noch viel zu verbessern.

1. immer komplettes Beispiel posten, am besten minimalisiert.
   2 JQuery ist hier unnötig, mahcts vor allem schwieriger dir zu helfen
2. onchange="milliodermikro()"wird aufgerufen ohne Argument, Definition hat aber Parameter "opioidform" - einfach aufrufen mit milliodermikro(this), dann ist "this" das select-Feld selbst (Parameter in meiner Lösung angepasst"
3. Klammerung in if/else war falsch, glaub ich ...
4. document.getElementById("milliodermikro").value = (mgvalue); - es gab kein Feld mit id "milliodermikro", nur eins mit Name "milliodermikro" - das ist NICHT das gleiche - gefixed
5. µ ist kein Standardzeichen - such das HTML-Äquivalent (wie bei ä, ö, ü, ß, bzw. setze entsprechendes charset)
6. nutze camelCase Namen .... milliodermikro -> milliOdeMikro, dann kann man deinen Code auch lesen

Viel Erfolg!

Vielen Dank!
Habe, denke ich, jetzt soweit alles beachtet. Nur leider wird immer noch kein Text ausgegeben. Ich habe das Ganze jetzt mal hier gepostet: http://jsfiddle.net/9FQfT/39/
Vielleicht hast Du ja noch einen Einfall?
Nils

[MudGuard]

Hi,

Habe, denke ich, jetzt soweit alles beachtet. Nur leider wird immer noch kein Text ausgegeben. Ich habe das Ganze jetzt mal hier gepostet: http://jsfiddle.net/9FQfT/39/
Vielleicht hast Du ja noch einen Einfall?

Gib der Funktion einen anderen Namen als dem Eingabefeld.

cu,
Andreas