Hitto kun ei tajua miten tämä pitäisi tehdä.
Mulla on formi jossa alasvetovalikosta valitaan kirjautumiskohde a tai b. Lisäksi syötetään tunnus ja salasana.
Homma pitäisi saada toimimaan JavaScriptillä "lennossa" niin, että
jos alasvetovalikoosa valinta on a, niin form action on muotoa: <form action="https://paikka1" method="post" name=""> ja jos valinta on b, niin form action on muotoa: <form action="https://paikka2" method="post" name="">
Ymmärsiköhän kukaan? :)
<script>
function forminid(id) {
document.getElementById('forminid').action = id;
}
</script>
<select>
<option onClick="forminid('paikka1')">Kirjaudu 1</option>
<option onClick="forminid('paikka2')">Kirjaudu 2</option>
</select>Mikäli molemmat action -sivut sijaitsevat samalla palvelimella, kannattaa tarkistukset tehdä yhdessä paikassa tuon option -valinnan arvon mukaan.
Eli action-osoite pysyisi samana, mutta tarkistussivulla lomakkeen tiedot tarkistettaisiin "eri kohdassa" valinnan mukaan.
Short Php kirjoitti:
<script> function forminid(id) { document.getElementById('forminid').action = id; } </script> <select> <option onClick="forminid('paikka1')">Kirjaudu 1</option> <option onClick="forminid('paikka2')">Kirjaudu 2</option> </select>
Mä en ihan 100% päässyt tästä vielä jyvälle.
Lebe80:n mukainen esimerkki:
Html:
<form action="edit.php" method="post"> <select name="kumpi"> <option name="1">Kirjautumis1</option> <option name="2">Kirjautumis2</option> </select> <input name="nimi"><br> <input type="password" name="sala"><br> <input type="submit"> </form>
Php:
<?php if ($_POST["kumpi"] == 1) { $filu = "filu1.txt"; } else { $filu = "filu2.txt"; } if ($_POST["salasana"] == file_get_contents($filu)) { echo "You're in"; } ?>
Jos voisit esimerkkisivua näyttää missä kirjautumisformi olisi, voisin sen pohjalta tehdä esimerkin.
Hmm. Php:llä joo, mutta pitäis saada valinta määriteettyä Js:llä
Niin ja tossa pitäis olla myös submit nappi mukana
Heippa fooff!
tässä, ole hyvä...
<HTML><HEAD></HEAD>
<script Language="JavaScript">
function funktio(response, opt){
for (var i = 0; i < response.length; i++){
if (response[i].selected){
if (response[i].value != "Paikka0") {
document.all('formi').action = "https://" + response[i].value
document.all('ListBox').options[i].selected = 0;
document.all('ListBox').options[0].selected = -1
document.formi.submit();
}
}
}
}
</script><BODY>
<FORM id=formi method="POST" action="" name="">
<SELECT id=ListBox size=1
onchange="funktio(this.form.ListBox.options)">
<OPTION value=Paikka0></OPTION>
<OPTION value=Paikka1>A</OPTION>
<OPTION value=Paikka2>B</OPTION></SELECT>
</FORM></BODY></HTML>Heippa taas fooff!
tässä vielä lyhennetty versio
<HTML><HEAD></HEAD><BODY> <FORM id=formi runat="server" method="POST" action="" name=""> <SELECT id=ListBox size=1 onchange="document.clear(); formi.action='http://'+ formi.ListBox.value; formi.submit()"> <OPTION value=></OPTION> <OPTION value=www.ohjelmointiputka.net/keskustelu>A</OPTION> <OPTION value=mureakuha.com>B</OPTION> </SELECT></FORM></BODY></HTML>
Heippa taas fooff!
suosittelisin kuitenkin tätä mallia...
<HTML><HEAD></HEAD><BODY><FORM> <SELECT size=1 onchange="document.location=this.value"> <OPTION value=></OPTION> <OPTION value=https://www.ohjelmointiputka.net>A</OPTION> <OPTION value=http://mureakuha.com>B</OPTION> </SELECT></FORM></BODY></HTML>
Jos kuitenkin käytettäisiin ja suositeltaisiin siistiä koodia.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fi"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head> <body> <form action="http://www.google.fi/search" method="get"> <p> <select onchange="this.parentNode.parentNode.action=this.value" onkeyup="this.onchange()"> <option value="http://www.google.fi/search">Google.fi</option> <option value="http://www.google.com/search">Google.com</option> </select> <input type="text" name="q"> <input type="submit" value="Hae!"> </p> </form> </body> </html>
Ja tämän myös näkee livenä: http://kontu.selfip.info/html.css.js/
Mä ratkaisin ongelman alla olevalla koodilla. Nyt tosin syntyi uusi ongelma:
Kirjautuminen toimii suoraan palveluun A, mutta palveluun B kirjauduttaessa jäädään kirjautumisruudulle. Tämä johtuu siitä, että palveluissa on email ja passu kentät nimetty erillailla.
Ratkaisuksi pitäisi js:llä hoitaa kirjautuminen siten, että "lennossa" muutettaisiin email ja passu kenttien nimet jos kirjaudutaan palveluun B. Olisiko kellään vielä ideaa miten tämä pitäisi toteuttaa?
<HTML> <HEAD></HEAD> <BODY> <FORM id=loginForm method="post" action="" name="login_form"> <SELECT id=list size=1 onChange=""> <OPTION value=>Choose login:</OPTION> <OPTION value=domain.fi/A>A</OPTION> <OPTION value=domain.fi/B>B</OPTION> </SELECT> <input name="email" id="emailField" type="text"/> <input name="pass" id="passField" type="password"/> <input type="submit" name="login" onclick="document.clear(); loginForm.action='https://'+ loginForm.list.value; loginForm.submit()" value="Sisään" class="loginbutton" title="" /> </FORM> </BODY> </HTML>
Heippa taas fooff!
koska ratkaisit edellisen ongelman noin hienosti, niin ...
<SELECT id=list size=1 onChange=
"if (this.value==''){this.form.emailField.name='';
this.form.passField.name='';}
else if(this.value=='domain.fi/A'){
this.form.emailField.name='email';
this.form.passField.name='pass';}
else{this.form.emailField.name='s_posti';
this.form.passField.name='s_sana';}">Nostan nyt esille sellaisen asian, että noissa ratkaisuissa ongelmaksi tulee se mahdollisuus, että JavaScript on kytketty pois päältä, tai että esim. jonkun firman palomuuri suodattaa JavaScriptin pois. Ja sittenhän mikään ei enää toimi, käyttäjät valittaa ja ongelman korjaamiseen menee taas aikaa.
Joten... tässä on tempaus joka käyttää vähän runsaammin JavaScriptiä, mutta toimii vaikka kaiken sen JS:n jättäisi pois. Ilman JS:ää lopputuloksena näkyy kaksi kirjautumislomaketta, mutta ainakin palveluihin voi ylipäätään kirjautua.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#login { background : #EEE; border : 1px solid #DDD; padding : 10px; }
#login select { float : left; margin-right : 10px; }
#login input { margin-right : 10px; }
#login p,#login form { margin : 0; padding : 0; }
#login.hidden form { display : none; }
#login.hidden #active { display : block; }
</style>
<script type="text/javascript">
window.onload = function() {
var login = document.getElementById('login');
if( login ) {
login.className = 'hidden';
var form = login.getElementsByTagName('form');
var select = document.createElement('select');
for(var i = 0; i < form.length; i++) {
var option = document.createElement('option');
form[i].id = form[i].action.replace(/\//gi, '_');
option.value = form[i].id;
option.appendChild(document.createTextNode(form[i].action.replace(/https:\/\//gi, '')));
select.appendChild(option);
}
form[0].id = 'active';
select.onchange = function() {
var activenew = document.getElementById(this.value);
if( activenew ) {
var active = document.getElementById('active');
if( active ) active.id = active.action.replace(/\//gi, '_');
activenew.id = 'active';
}
}
select.onkeyup = function() { this.onchange(); }
login.insertBefore(select, form[0]);
select.focus();
}
}
</script>
</head>
<body>
<div id="login">
<form action="https://www.domain.fi/a" method="post">
<p>
<label for="email">E-mail:</label>
<input id="email" type="text" name="email">
<label for="pass">Salasana:</label>
<input id="pass" type="password" name="pass">
<input type="submit" value="Palveluun A">
</p>
</form>
<form action="https://www.domain.fi/b" method="post">
<p>
<label for="email2">E-mail:</label>
<input id="email2" type="text" name="emailField">
<label for="pass2">Salasana:</label>
<input type="password" name="passField">
<input type="submit" value="Palveluun B">
</p>
</form>
</div>
</body>
</html>Eli select-laatikko luodaan lennossa ja sillä vaihdellaan kumpi formi näkyy.
Heippa taas!
Kun käytetään simmppelisti määrettä runat="server" niin mitkään firmojen palomuurit ei kytke yhtään mitään pois eikä päälle...
runat="server" on ASP.NETin juttuja, joten mitä se tässä tapauksessa auttaisi? Ja ennenkaikkea, miten se muuttaisi sivun käyttäytymistä?
Heippa taas!
@Merri
No jos sun serverillä sattuu olemaan ASP-tuki niin mm. scriptit joissa on runat="server" määre ajataan suoraan serverillä (server side) elikä vaikka käyttäjällä (tässä client) olis koneellaan tahi firmalla palomuurissaan vaikka minkälainen scriptin esto päällä ja painetaan nappulaa niin scripti ajetaan jne...Tällaisia tukia voi impata vaikka Sun'lta ihan ilmaiseksi
Niin, tuo on se jokseenkin itsestäänselvä asia, mutta mitä se tässä tapauksessa auttaa? Jossain välissähän se asiakkaan puolella pitää tapahtua, että on vaihdettu valinta toiseen kohtaan? Ja mikäli tämä tarkoittaa sitä, että ASP tekee välissä sen tehtävän, että se tarjoilee erilaisen HTML:n sen JavaScriptin pohjalta mitä on, niin käytännössähän lopputulos olisi sama kuin jos vaan suoraan koodaisi sivun, joka tekisi uudelleenohjauksen kiinteän HTML-sivun antamien tietojen perusteella. Ei tarvitsisi JavaScriptiä säätää ollenkaan.
No moro!
No voi Herre Gud! <form runat="server" ....> ja koko v***n actioni ajetaan serverillä heti submit-komennon tapahduttua...
Joku ei näytä nyt ymmärtävän miten se ASP toimii :)
Oikea tapa on btw. tehdä se kirjautumiskohteen valinta serverin puolella. Turha mitään client-puolen skriptejä tähän sekoittaa.
neau33 kirjoitti:
Heippa taas fooff!
koska ratkaisit edellisen ongelman noin hienosti, niin ...
<SELECT id=list size=1 onChange= "if (this.value==''){this.form.emailField.name=''; this.form.passField.name='';} else if(this.value=='domain.fi/A'){ this.form.emailField.name='email'; this.form.passField.name='pass';} else{this.form.emailField.name='s_posti'; this.form.passField.name='s_sana';}">
Moi -Nea- + muut. Tämä näyttäisi toimivan hienosti... mutta jos dokumentin doctyypiksi laittaa esim. xhtml tai html 4.01 ei koodi toimi enään ollenkaan. Tämä pätee näköjään tuohon minunkin viritykseeni. Olisiko tähän kellään ratkaisua?
Heippa taas!
Pistä kuule kaikki mahdollinen W3C-suosittus/oikeaoppisuuspaska sinne sivun alkuun + kilometrin tyylisivu esittelyt niin kaikki pelaa 115% varmuudella...btw, ei tässä nyt auta edes 2:den lumpion tuki
neau33 kirjoitti:
Heippa taas!
Pistä kuule kaikki mahdollinen W3C-suosittus/oikeaoppisuuspaska sinne sivun alkuun + kilometrin tyylisivu esittelyt niin kaikki pelaa 115% varmuudella...btw, ei tässä nyt auta edes 2:den lumpion tuki
Tarkoittiko tämä nyt sitä, että elä laita? :) Mä en ainakaan saa toimimaan edes html 4.01:nä doctypen kanssa!!
Ilmeisesti Nea testasi vain Internet Explorerilla. Eli tosiaan, Firefoxilla/Operalla/Safarilla putoaa pois jonkinmoinen määrä vanhaa 90-luvun koodaustyylin tukea kun otetaan käyttöön standardimoodi. Samaa voidaan odottaa tapahtuvan tulevassa IE8:ssa, koska sen JavaScript-tukea uudistetaan ja siihen tulee ihan oikea standardimoodi, joten kannattaa opetella kirjoittamaan koodia nykyaikaisten suositusten mukaisesti. Sikäli jos tahtoo kirjoittaa kunnollista koodia. Pistän tässä nyt vähän informaatiokylpyä kehiin, mutta tämä kaikki on perustietoa joka jokaisella vakavammalla sivuntekijällä pitäisi sisäistää.
Eka ongelma on se, että standardimoodissa sivulla olevat elementit eivät ole julkisesti saatavilla. Tämän takia koodi hajoaa kohdassa loginForm.action='https://'+ loginForm.list.value; koska loginFormia ei ole määriteltynä JavaScriptin puolella. Se pitäisi joko hakea getElementById:llä tai sitten referoida lomake-elementtiin (this.form), jossa ne on valmiiksi saatavilla.
Toisaalta pidän tässä ongelmallisena sitä, että asioita on hajautettu ympäriinsä, ja että lomakkeen voi lähettää vaikka olisi valinnut kohdan jolla ei voi kirjautua. Toisaalta taas olen kyllä Lumpion kanssa samaa mieltä siitä, että lomakkeen tiedot pitäisi käsitellä puhtaasti palvelimen puolella ylipäätään ja ohjata sieltä käsin oikeaan suuntaan, mutta tässä on silti jonkinmoinen ehdotelma, vaikken tästä toteutuksesta pidäkään:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
function select_onchange(e) {
var fields = e.value.split(' ');
e.form.action = fields[0];
e.form.emailField.name = fields[1];
e.form.passField.name = fields[2];
e.form.loginField.disabled = (fields[0] == '');
}
</script>
</head>
<body>
<form id="loginForm" method="post" action="" name="login_form">
<p>
<select onchange="select_onchange(this)" onkeyup="this.onchange()">
<option value=" ">Choose login:</option>
<option value="https://domain.fi/A email pass">A</option>
<option value="https://domain.fi/B s_posti s_sana">B</option>
</select>
<input id="emailField" type="text">
<input id="passField" type="password">
<input type="submit" id="loginField" disabled="disabled" value="Sisään" class="loginbutton" title="">
</p>
</form>
</body>
</html>Selkeyden ja noiden aiempien perustelujeni vuoksi olen:
1) Siirtänyt JavaScriptin pois HTML:n seasta.
2) Siirtänyt kaikki muutettavat arvot option-elementtien arvoihin.
3) Estänyt lomakkeen lähettämisen jos JavaScript ei toimi tai jos toimimaton kohta listasta on valittuna.
4) Siistinyt ja selkeyttänyt HTML:n siten, että tagit on kirjoitettu pienellä, koodi on sisennetty ja attribuuttien arvot on lainausmerkkien sisällä. Parantaa luettavuutta.
5) Poistanut XML-tyyliset lopputagittoman elementin sulkemiset, koska ne eivät ole osa HTML 4:ää.
6) Firefoxissa onchange ei näytä laukeavan jos select-laatikon vaihtoehtoja muuttaa näppiksellä.
Jos tästä koodista nyt tahtoisi XHTML-yhteensopivaa, niin input-kenttien lopun pitäisi näyttää "> sijasta " />. Kuten yllä olevaan koodiin olen tehnytkin, niin XHTML:ssä on pakko olla kaikkien tagien ja attribuuttien pienellä, sekä attribuuttien arvojen lainausmerkeissä. Toisaalta on hyvä kirjoittaa tällä tavalla, koska se on käytäntö jota lähes kaikki asiansa osaavat sivuntekijät käyttävät.
Toki voisi väittää että W3C on itsekin käyttänyt HTML 4:n dokumentaatiossaan isoja tageja ja jättänyt attribuuttien lainausmerkkejä merkitsemättä, mutta toisaalta pitää muistaa minä aikana dokumentaatio on tehty ja miten vanha se jo on. Jos nyt katsot melkein minkä tahansa sivuston koodia, oli se sitten vaikka W3C:n, YLEn, BBC:n tai MTV3:n sivut, niin tagit on (pääosin) pienellä ja attribuuteilla on lainausmerkit. Se vain on pidemmän päälle selkeämpää.
Unohtui tämä: document.clear(); on myös katoava luonnonvara, joka poistuu tulevaisuudessa kokonaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.