2 sec
Använda select-värden för att skapa ny input
43 svar · 1 791 visningar · startad av Sanji · sida 2 av 3
Frågan, av Sanji
Hej! jag håller på och kodar en sida där man gör servicebokningar på motorcyklar. länk: <http://www.actionsports.se/service2/> nu är det så att då man väljer övriga modeller i listan för välj modell så vill jag att ytterligare en input-ruta ska komma fram. I den rutan ska man kunna skriva in sin modell så denna sparas till databasen. jag vet hur jag skriver koden för att spara ner det man skriv
Läs frågan i sin helhet →head-delen
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
<?PHP require('connect.php');
mysql_query("SET NAMES utf8");
?>
<html>
<head>
<title>Motorcykel MC Service - Suzuki, Honda, Yamaha, Kawasaki, Aprilia</title>
<META NAME="keywords" content="parallellimport, direktimport, Suzuki, Honda, Yamaha, Kawasaki, Aprilia, billig, billiga, ny, fabriksny, mc, motorcykel, motorcyklar, hoj, hojar, Actionsports, mcservice, verkstad, mcverkstad, mctillbehör,mc-tillbehör, fellingsbro, örebro">
<META NAME="description" content="Motorcykel MC service till låga priser. Suzuki, Honda, Yamaha, Kawasaki, Aprilia. ActionSports 0581-62 20 03">
<META NAME="robots" content="ALL">
<META NAME="robots" content="INDEX, FOLLOW">
<META NAME="distribution" content="GLOBAL">
<META HTTP-EQUIV="Content-Language" CONTENT="SV">
<META NAME="Author" CONTENT="webmaster@actionsports.se">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function showField(list){
valjModell(this.value);
var sel = list.options[list.selectedIndex].value;
if(sel == 117 || sel = 119 || sel = 120 || sel == 121 || sel = 122 | sel == 123){
showLayer('theField');
}else{
hideLayer('theField');
}
}
function postForm(theForm){
var f = theForm;
if(f.mySelect.options[f.mySelect.selectedIndex].value == 3){
alert("Du valde en annan modell: " + f.myField.value);
}else{
alert("Här händer något annat\n");
}
return false;
}
function showLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.display = "block";
}
function hideLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.display = "none";
}
function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
if (el) el.css = (el.style)? el.style: el;
return el;
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mootools.v1.11.js"></script>
<script type="text/javascript" src="service.js?v=3"></script>
<script type="text/javascript">
var ModellerIdPrisVariation = new Array(116);
<?PHP
$counter = 0;
$rs = mysql_query("select * from do_motorcykelmodeller");
while($r = mysql_fetch_array($rs)){
$counter++;
//pris variation skrivs ut som en procentenhet
echo 'ModellerIdPrisVariation[' . $counter . '] = "' . $r['prisvariation'] . '";';
}
?>
</script>
<script language="javascript">
var currentChoice;
var theRadios;
window.onload=function(){
theRadios=document.forms.bokning.ovrigt;
currentChoice=theRadios.value;
}
function applyChoice(){
for (var i=0; i<theRadios.length; i++){
if (theRadios[i].checked){
currentChoice=i;
return true;
}
}
if (currentChoice == 0)
{
pris = 750;
}
else
{
pris = "-";
}
return false;
}
var felkoder;
function kollaform(){
felkoder = "";
if(document.getElementById("txtarsmodell").value){
//return true;
}else{
felkoder = felkoder + "\n* Årsmodell måste anges!";
}
if(document.getElementById("txtmilantal").value){
//return true;
}else{
felkoder = felkoder + "\n* Milantal måste anges!";
}
if(document.getElementById("txtnamn").value){
//return true;
}else{
felkoder = felkoder + "\n* Namn måste anges!";
}
if(document.getElementById("txtregnr").value){
//return true;
}else{
felkoder = felkoder + "\n* Reg-nr måste anges!";
}
if(document.getElementById("txttelenr").value){
//return true;
}else{
felkoder = felkoder + "\n* Telefonnummer måste anges!";
}
//var feltider = kollatider();
//felkoder = felkoder + feltider;
if(felkoder == ""){
document.getElementById('frmBokning').submit();
}else{
felkoder = "Följande fel hittades i formuläret:\n\n" + felkoder;
alert (felkoder);
return false;
}
}
</script>
</head>
resten
<body>
<div id="wrap">
<div id="head">
<img src="service_top.jpg" border="0">
</div>
<div id="main">
<?PHP
if(!empty($_POST['hidmarkeid'])){
echo '<br> Markeid: ' . $_POST['hidmarkeid'] . '<br>';
$r = mysql_fetch_array(mysql_query("select * from do_motorcykeltillverkare where doid = " . $_POST['hidmarkeid']));
echo '<br> Marke: ' . $r["namn"] . '<br>';
};
if(!empty($_POST['hidmodellid'])){
echo '<br> Modellid: ' . $_POST['hidmodellid'] . '<br>';
$r = mysql_fetch_array(mysql_query("select * from do_motorcykelmodeller where doid = " . $_POST['hidmodellid']));
echo '<br> Modell: ' . $r["beteckning"] . '<br>';
};
/*
echo $_POST['txtarsmodell'] . '<br>';
echo $_POST['txtmilantal'] . '<br>';
echo $_POST['txtnamn'] . '<br>';
echo $_POST['txtregnr'] . '<br>';
echo $_POST['txttelenr'] . '<br>';
echo $_POST['txtkommentar'] . '<br>';
*/
?>
<FORM class="conform" id="frmBokning" ACTION="selectdate.php?act=bokaservice" METHOD="post" NAME="bokning" onSubmit="return kollaform(this);">
<TABLE BORDER="0" WIDTH="800" CELLSPACING="1" CELLPADDING="0">
<tr><td>
<h2>Actionsports & Eurowheels servicesida</h2><br />
Fyll i milantal och övriga uppgifter och få prisuppgift direkt!<br>
Vill Ni boka online så klicka på knappen "Boka online" för att välja ett datum för servicen. <br>
</td>
</tr>
<tr><td>
<table>
<tr><td colspan="2"> </td></tr>
<tr>
<td width="250" valign="top">
Vad har du för motorcykel?
</td>
<td width="330" valign="top">
<table cellpadding="0" cellspacing="0"><tr>
<td>Välj märke<br/>
<select id="selmarke" NAME="selmarke" onChange="getModellerList(this.value)">
<option VALUE="ej valt">-</option>
<?PHP
$rs = mysql_query("select * from do_motorcykeltillverkare where mmservice > 0 order by namn");
while($r = mysql_fetch_array($rs)){
?>
<option value="<?PHP echo $r['doid']; ?>" <?PHP if($_POST['hidmarkeid'] == $r['doid']){ echo "selected"; } ?> ><?PHP echo $r['namn']; ?></option>
<?PHP
}//While do_motorcykeltillverkare
?>
</select>
</td>
<td>
<div id="getModeller">
<?PHP
if(!empty($_POST['hidmarkeid'])){
?>
Välj modell<br>
<select name="getModeller" onChange="showField(this);">
<option value="ejvalt">Välj modell i listan</option>
<?PHP
$sql = "SELECT * FROM do_motorcykelmodeller WHERE mmtillverkare = " . $_POST['hidmarkeid'];
$rs = mysql_query($sql);
while( $r = mysql_fetch_array($rs)){
?>
<option value="<?PHP echo $r['doid']; ?>" <?PHP if($_POST['hidmodellid'] == $r['doid']){ echo "selected"; } ?>><?PHP echo $r['beteckning']; ?> </option>
<?PHP
}
?>
</select>
<?PHP
}
?>
<div id="theField" style="display: none; width: 200px; float: left;" >
<p>
<input type="text" name="hidfield" /></p>
</div>
</div>
</td>
</tr></table>
<input type="hidden" name="hidmarke" id="hidmarke" value="<?PHP echo $_POST['hidmarke']; ?>" />
<input type="hidden" name="hidmarkeid" id="hidmarkeid" value="<?PHP echo $_POST['hidmarkeid']; ?>" />
<input type="hidden" name="hidmodell" id="hidmodell" value="<?PHP echo $_POST['hidmodell']; ?>" />
<input type="hidden" name="hidmodellid" id="hidmodellid" value="<?PHP echo $_POST['hidmodellid']; ?>" />
</td><tr>
<tr>
<td>
Ã…rsmodell</td><td><input id="txtarsmodell" name="txtarsmodell" type="text" value="<?PHP echo $_POST['txtarsmodell']; ?>" /></td>
</tr>
<tr>
<td>
Ange milantal</td><td><input id="txtmilantal" name="txtmilantal" type="text" value="<?PHP echo $_POST['txtmilantal']; ?>" /></td>
</tr>
<tr>
<td>
Ditt namn</td><td><input id="txtnamn" name="txtnamn" type="text" value="<?PHP echo $_POST['txtnamn']; ?>" /></td>
</tr>
<tr id="rRegNr"><td>
Ange registreringsnummer</td><td><input id="txtregnr" name="txtregnr" type="text" value="<?PHP echo $_POST['txtregnr']; ?>" /></td>
</tr>
<tr>
<td>Telefonnummer</td><td><input id="txttelenr" name="txttelenr" type="text" value="<?PHP echo $_POST['txttelenr']; ?>" /></td>
</tr>
<tr>
<td valign="top">Kommentar</td><td><textarea id="txtkommentar" name="txtkommentar" type="text" style="width: 294px"><?PHP echo $_POST['txtkommentar']; ?></textarea></td>
</tr>
<tr>
<tr><td>
<script>
//function uncheck()
//
//{
// for(i=0;i<ovrigt.length;i++)ovrigt[i].checked=false
//}
</script>
</td><td>
<div id="ovrigt-ruta1">
<div style="margin-bottom:2px">
<font size="2">Enskild service/reparation: </font>
<input id="check" name="check" type="Checkbox" onmousedown="for(i=0;i<ovrigt.length;i++)ovrigt[i].checked=false" value="Enskild service/reparationer" style="width:65px;font-size:10px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Display';
}">
</div>
<div style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
<input type="radio" onclick="javascript:setupFromMil();" id="oljebyte" name="ovrigt" />Endast Oljebyte<br /> 750 SEK<br/>
<input type="radio" onclick="javascript:setupFromMil();" id="deckbyte" name="ovrigt" /> Endast Däckbyte<br /> ---- SEK<br/>
<input type="radio" onclick="javascript:setupFromMil();" id="ovrigt" name="ovrigt" /> Övrig reparation/service<br /> ---- SEK<br /> </td><td>Nollställ formuläret <a href="index.php">Här</a></td></tr>
</div>
</div>
</div>
<tr>
<td colspan="2" height="5"> </td>
</tr>
<tr>
<td><strong>Pris för servicen</strong></td><td><input type="hidden" name="hidpris" id="hidpris" /><strong><span id ="pris">-</span></strong></td>
</tr>
<tr><td colspan="2">
<span style="padding-top: 15px" id ="kommentar"></span>
<input type="hidden" name="hidkommentar" id="hidkommentar"/>
</td>
</tr>
<tr>
<td style="padding: 5px" colspan="3"><div style="margin: 0 auto;">
<center>
<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>
<td valign="top" width="33%">
<input type="submit" value="Bli uppringd" name="bokaknapp" style="height: 40px; padding: 0px 30px;" />
<br/>
Klicka på denna knapp för att bli uppringd angående service.<br/>
</td>
<td valign="top" width="33%">
<input type="submit" value="Offert" name="bokaknapp" style="height: 40px; padding: 0px 30px;"/>
<br/>
Klicka på denna knapp för att skriva ut en offert på ovanstående uppgifter.<br/>
</td>
<td valign="top" width="33%">
<input type="submit" value="Boka online" name="bokaknapp" style="height: 40px; padding: 0px 30px;" />
<br/>
Klicka på denna knapp om du vill gå vidare och boka online. Ingen service är bokad innan datum och tid är vald vilket görs på nästa sida.
</td>
</tr></table>
<input type="hidden" name="hidalltok" id="hidalltok" value="nej" />
<input type="hidden" name="commandsFromServer" id="commandsFromServer" value="<?PHP if($_POST['hidalltok'] == 'nej'){ echo 'rebounce'; } ?>" />
</center></div>
</td>
</tr>
</table>
</form>
</TD>
</TR>
</TABLE>
<!--Slut på MAIN sidan-->
</TD></TR>
</TABLE>
<div class="push"></div>
</div>
</div>
</body>
</html>
jag sr nu att jag skulle behöva snygga till och kommentera en hel del -.-
jag kommer ingen vart själv just nu, så jag grejjar med en annan sida så länge
Ta bort valjModell(this.value); från funktionen showfield();. Att använda this.value där lär inte fungera. Kolla i felkonsollen i Firefox vad du får för fel.
Förstår fortfarande inte varför du måste använda mer än en funktion.
jag tror det är värdet jag ska jämföra i dessa två som inte blir det det ska...
<script type="text/javascript">
function showField(list){
var sel = list.options[list.selectedIndex].value;
if(sel == 117 || sel = 119 || sel = 120 || sel == 121 || sel = 122 | sel == 123){
showLayer('theField');
}else{
hideLayer('theField');
}
}
function postForm(theForm){
var f = theForm;
if(f.mySelect.options[f.mySelect.selectedIndex].value == 3){
alert("Du valde en annan modell: " + f.myField.value);
}else{
alert("Här händer något annat\n");
}
return false;
}
för grejen är att id't på select-värdena bestäms av id't på motorcykelmodellerna. men när jag testar att använda dessa värden i if-satsen så går det inte... Har jag missuppfattat hur man använder selectedIndex.value?
Har jag missuppfattat hur man använder selectedIndex.value?
Nej, det tror jag inte, this.options[this.selectedIndex].value "ger" dig värdet för vald item i selectlistan.
det betyder alltså att denna kod:
<option value="<?PHP echo $r['doid']; ?>" <?PHP if($_POST['hidmodellid'] == $r['doid']){ echo "selected"; } ?>><?PHP echo $r['beteckning']; ?> </option>
gör att list.options[list.selectedIndex].value får värdet $r['doid']. men det är konstigt att det ändå inte funkar att använda det id't i if-satsen...
Men det är alldeles rätt så i så fall gör du något annat fel. Du vet att "list" i list.options[list.selectedIndex].value är namnet på din selectlista, dvs. om du kör <select name="foo"> så ska du använda foo.options[foo.selectedIndex].value.
det var väl det jag tänkte ^^ fast ja, det finns helt klart ett till fel någon stans... jag ska gå igenom koden riktigt grundligt nu!
en sak jag funderar på, i exemplet du gjorde så var select-namnet myselect, och du använde ändå
var sel = list.options[list.selectedIndex].value;
...
är detta på grund av
onchange="showField(this);"
??
Jo, jag skickar med this till funktionen istället för det valda värdet. Det är bra att göra så t.ex. när man vill göra andra saker med select-listan förutom att kolla dess valda värde.
Om jag hade haft såhär istället:
onchange="showField(this.options[this.selectedIndex].value);"
...så hade jag kunnat kolla direkt i ifsatsen:
if(list == 3 || list == 4){ ... }
åh :) men nu är jag nästan helt säker på var felet ligger... det måste ligga i min nuvarande select-lista, då det av någon anledning inte går att lägga in <option></option> manuellt... dessa visas inte i listan.
<td>
<div id="getModeller">
<?PHP
if(!empty($_POST['hidmarkeid'])){
?>
Välj modell<br>
<select name="getModeller" onchange="showField(this);">
<option value="ejvalt">Välj modell i listan</option>
<option value="3">Något annat</option>
<?PHP
$sql = "SELECT * FROM do_motorcykelmodeller WHERE mmtillverkare = " . $_POST['hidmarkeid'];
$rs = mysql_query($sql);
while( $r = mysql_fetch_array($rs)){
?>
<option value="<?PHP echo $r['doid']; ?>" <?PHP if($_POST['hidmodellid'] == $r['doid']){ echo "selected"; } ?>><?PHP echo $r['beteckning']; ?> </option>
<?PHP
}
?>
</select>
</td>
<?PHP
}
?>
det visas ingen text som lyder: "något annat" i denna select, varför vet jag inte :/
Det SKA visas med koden ovan, visar listan något alls? För om den inte gör det har du något PHP fel. Klistra in källkoden (alltså det du ser när du högerklickar i browsern och väljer 'visa källa') här för "stycket" ovan.
jo då det visas, alla <option></option> för modeller i databasen visas, och även denna: <option value="ejvalt">Välj modell i listan</option>
men om jag ändrar i den så blir det ingen förändring.
Vad har du för motorcykel?
</td>
<td width="330" valign="top">
<table cellpadding="0" cellspacing="0"><tr>
<td>Välj märke<br/>
<select id="selmarke" NAME="selmarke" onChange="getModellerList(this.value)">
<option VALUE="ej valt">-</option>
<option value="6" >Övriga Märken</option>
<option value="1" >Aprilia</option>
<option value="2" >Honda</option>
<option value="3" >Kawasaki</option>
<option value="5" >Suzuki</option>
<option value="4" >Yamaha</option>
</select>
</td>
<td>
<div id="getModeller">
<td>
<div id="theField" style="display: none; width: 200px; float: left;">
<p>Ange något annat<br />
<input type="text" name="myField" /></p>
</div>
</form>
</td>
endast detta visas konstigt nog... jag kan bara se <option></option> för select-menyn där man väljer märke, ingen för modell.
Jaa, men du fyller ju på den andra listan med getModellerList(this.value); vilket innebär att du skriver över dina <option> i den andra listan.
men åh! ibland känner jag mig riktigt korkad, det står ju där! varför har jag inte sett det tidigare? :P
btw, du kanske märker att det inte var jag som skrev originalsidan ^^
getModellerList(this.value); är det som gör hidmarkeid har jag för mig, som jag använder i sql-satsen för att hämta alla motorcyklar med det märket... det ligger en hel del funktioner i ett .js dokument i samma mapp som denna sida
Det är ju bara att lägga till i filen som genererar din andra lista så att "Annan modell" läggs till sist i listan, efter att du hämtat alla modeller från databasen.