wenn option = ja zeige textfeld 1 sonst textfeld 2
Hey,
ich möchte, dass beim Ausfüllen des Formulares per auswahliste abgeben wird ob pro std oder pro km abgerechnet wird. und je nachdem welche option ausgewählt wird, soll dahinter das entsprechende Feld zum eingeben des Preises angezeigt werden.
Ich möchte somit verhindern, dass der Kilometersatz bei Std.satz reingeschrieben. Da es sonst später beim Auswerten mit sql Probleme gibt.
Hat jmd. eine Idee wie man das realisieren könnte?
Mein Versuch klappt leider nicht:
<select name="me" size="1" class="searchField">
<option value="1" >€/h</option>
<option value="2" >€/km</option>
</select>
<input type="text" name="prokm" maxlength="50" type="<? echo ($me==1) ? "hidden" : "text" ?>">
<input type="text" name="prostd" maxlength="50" type="<? echo ($me==1) ? "hidden" : "text" ?>">
Antwort schreiben
Antwort 1 von Fassy91 vom 22.04.2020, 15:03 Options
also wie kommt das PHP Script an das value ?
ich würed das net mit php sondern mit Javascript machen.
Antwort 2 von stefanie79 vom 22.04.2020, 15:07 Options
ja genau das ist das Problem. Wie mache ich das mit Javascript, habe davon keine Ahnung :(
Antwort 3 von Fassy91 vom 22.04.2020, 15:18 Options
also das ist ganz einfach.
Du gibst den inputs eine ID.
<input type="hidden" name="prostd" maxlength="50" id="prostd">
<input type="text" name="prokm" maxlength="50" id="prokm">
so das ist die einzige veränderung die du an den inputs machen musst.
nun zum select
<select id="me" size="1" class="searchField" onChange="inputchange(this.selectedIndex)">
<option value="prostd">Pro Stunde</option>
<option value="prokm">Pro Kilometer</option>
</select>
so und nun brauchen wir eine Funktion die das alles ändert
<script type="text/javascript">
function inputchange(index)
{
if (index == 1)
{
document.getElementById('prostd').type = "text";
document.getElementById('prokm').type = "hidden";
}
if (index == 2)
{
document.getElementById('prostd').type = "hidden";
document.getElementById('prokm').type = "text";
}
document.getElementById('prostd').value = "";
document.getElementById('prokm').value = "";
}
</script>
So in etwa muss das aussehen
mfg
Fassy91
Antwort 4 von stefanie79 vom 22.04.2020, 15:41 Options
DANKE @Fassy91
Antwort 5 von katy vom 22.04.2020, 16:07 Options
Hallo stefanie79,
das Verfahren von Fassy91 hat ein kleines Problem: nicht alle Internet-Explorer mögen type-Änderungen bei input-Feldern.
Sicherer ist sowas wie
document.getElementById('prostd').style.visibility= "visible";
document.getElementById('prokm').style.visibility = "hidden";
kombiniert mit
<input type="text"
für beide.
Wenn eins von vornherein unsichtbar sein soll, schreibe das ins CSS.
Sicher ist diese Vorprüfung mittels JavaScript aber sowieso nicht. Du musst unbedingt serverseitig die Daten mit PHP nochmals prüfen.
katy
Antwort 6 von Teerbaby vom 22.04.2020, 16:16 Options
oser so ;)
<head>
<script type="text/javascript">
<!--
function ShowInput(i)
{
if (i==1)
{
var el1 = document.getElementById("1");
var el2 = document.getElementById("2");
el1.style.display = "none";
el2.style.display = "block";
}
else
{
var el1 = document.getElementById("1");
var el2 = document.getElementById("2");
el2.style.display = "none";
el1.style.display = "block";
}
}
//-->
</script>
</head>
<body>
<select name="me" size="1" class="searchField" onchange="ShowInput(this.value)">
<option value="1" >€/h</option>
<option value="2" >€/km</option>
</select>
<input id="1" type="text" name="prokm" maxlength="50" style="display:block">
<input id="2" type="text" name="prostd" maxlength="50" style="display:none">
</body>
Antwort 7 von Fassy91 vom 22.04.2020, 16:36 Options
@teerbaby : Du hast vergessen das es nur ein Value geben darf also musst du die Values der Inputs leeren.
Antwort 8 von katy vom 22.04.2020, 16:38 Options
Hallo stefanie79,
Teerbabys Variante entspricht so ca dem von mir vorgeschlagenen.
Ein Problem, das ich vorhin vergaß ist: Ohne JavaScript ist dein Auswahlfeld sinnlos. Das dürfte also nur sichtbar werden, wenn JavaScript aktiviert ist.
Eigentlich wird das ganze dadurch langsam zu kompliziert. Ich würde einfach 2 Inputfelder anzeigen lassen und serverseitig prüfen, in welchem etwas steht. Mit PHP prüfen musst du ja ohnehin, da JavaScript viel zu unzuverlässig ist, als dass du damit Daten prüfen könntest.
katy
Antwort 9 von Fassy91 vom 22.04.2020, 16:45 Options
wie waäre es damit das man einen input macht und den namen ändert ?
also so :
<input type="text" name="prostd" maxlength="50" id="feld">
<select size="1" onChange="document.getElementById('feld').name = this.value;">
<option value="prostd">Pro Stunde</option>
<option value="prokm">Pro Kilometer</option>
</select>
Dürfte gehen oder ?
Antwort 10 von Fassy91 vom 22.04.2020, 16:48 Options
mit Firebug (Firefox) getestet es geht zu 100 %. Kann aber manipuliert werden. Auf jedenfall prüfen mit PHP bevor du damit was machst.
Antwort 11 von katy vom 22.04.2020, 16:59 Options
Hallo Fassy91,
von Attribut-Manipulationen an input-Feldern rate ich nach wie vor ab, da der Internet-Explorer damit gelegentlich Probleme hat.
katy
Antwort 12 von Fassy91 vom 22.04.2020, 19:21 Options
ja aber internet explorer 7 unterstützt das komplett
Antwort 13 von katy vom 22.04.2020, 21:26 Options
Hallo Fassy91,
dass ein IE mitmacht sagt nichts über die anderen.
Aber ich halte den Ansatz sowieso für zu kompliziert, siehe Antwort 8.
katy
Antwort 14 von Stefanie79 vom 23.04.2020, 09:35 Options
Danke Euch allen für Eure Hilfe..