form - bilde for å sende

[Tonny Kluften]

Har denne koden her som lager en knapp for å sende. Hva må jeg gjøre for at den skal bruke et bilde istedenfor en knapp?

I tillegg ønsker jeg at sidene åpnes i nytt vindu.

<form 
method="post" name="nameform"> <font color="#9933CC" 
size="2" face="Times New Roman">
<select name="tanyasmenu" size="1" > 
<option selected value="http://sdfsdfsdf2.no">123</option> 
<option value="http://sdfsdfssdf.no">345</option> 
<option value="http://sdfsdfsasd.no">678</option>
<option value="http://sdfsdf254.no">890</option>  
</select> 

<input type="button" value="Søk" onclick="location 
= document.nameform.tanyasmenu.options [document.nameform.tanyasmenu.selectedIndex].value;" > 

</form>

 

[kongen]

<input name="submit" type="image" src="button.jpg">

 

[Tonny Kluften]

Det har jeg prøvd, men det fungerer ikke desverre.

 

[hansson]

Lag en div med en css-klasse som setter bildet ditt som bakgrunnsbilde og har cursor: pointer i css. Lag en :hover-state og evt. en :active, med tilhørende bytte av bakgrunnsbildet for å gjøre knappen mer levende.

Så legger du på litt javascript på div-en (f.eks. onclick="sendBestilling") som som sender inn skjemaet. Se knappen nederst på Frilansboka*|*Komplett håndbok for frilansere (og for deg som vil bli det) hvordan du gjør det (scriptet ligger i headeren).

 

[hansson]

Forresten sendes skjemaet i forrige innlegg via php. Du skal trolig sende skjemaet på en enklere måte, og kan da heller bruke noe slikt:

<script type="text/javascript">
function submitform()
{
  document.xxxxxx.submit();
}
</script>

Skjemaet må ha id="xxxxxx".

 

[adeneo]

Eksempelet ditt sender ingenting, det bare bytter adresse, men uansett hva knappen gjør så kan du bytte den ut med ett hvilket som helst annet element.

Knapper for opplasting av filer kan ikke byttes ut i Opera, av den enkle grunn at Opera er et helt tilbakestående selskap som ikke følger samme standarder som andre, men vanlig submit knapper kan fint byttes ut.

Dersom du skal åpne et nytt vindu så trenger du ikke den knappen i det hele tatt, du kan bruke en div eller ett a element i stedet, men her er uansett et eksempel med knappen i behold, har bare flyttet den ut av skjermen.

 

[Tonny Kluften]

Eksemplet ditt virker som bare det Men når jeg setter inn dette på siden min så virker det ikke. Den nye adressa blir /#. Åpner seg heller ikke i nytt vindu.

<script type="text/javascript">
$("#fakebutton").click(function(e) {
    var adresse = $("#tanyasmenu").val();  //henter verdien fra nedtrekkslisten
    $("#fjernbutton").trigger('click');    //trigger et klikk på den opprinnelige knappen dersom den brukes til noe
    window.open(adresse);                  //åpner et nytt vindu med adressen
    e.preventDefault();                    //gjør så ikke href="#" utføres
});
//brukt jQuery her, men window.open er vanlig javascript og kan brukes i onclick handleren i stedet.
</script>


<form 
method="post" name="nameform"> <font color="#9933CC" 
size="2" face="Times New Roman">
<select id="tanyasmenu" name="tanyasmenu" size="1" > 
<option selected value="http://sdfsdfsdf2.no">123</option> 
<option value="http://sdfsdfssdf.no">345</option> 
<option value="http://sdfsdfsasd.no">678</option>
<option value="http://sdfsdf254.no">890</option>  
</select> 

<input type="button" id="fjernbutton" action="submit" />
<a href="#" id="fakebutton">Klikk for å komme til siden</a>
</form>

 

[Pong]

<form ..... target="_blank">
ville jeg trodd for å åpne i nytt vindu?

Edit: whatever, det er det som skjer når man leser 20%.
Anyways, er det ikke $("tanyasmenu") i jQuery for å lokalisere en id?

 

[adeneo]

Prøv å sett inn document.ready, sånn:

<script type="text/javascript">
    $(document).ready(function() {
        $("#fakebutton").click(function(e) {
            var adresse = $("#tanyasmenu").val();
            $("#fjernbutton").trigger('click');
            window.open(adresse);
            e.preventDefault();
        });
    });
</script>

Regnet med du brukte jQuery fra før på den siden?

Som du sikkert ser er den opprinnelige knappen beholdt, men bare flyttet laaangt ut til venstre, da display:none og lignende løsninger ikke virker i, ehhm, tror det var Chrome, det er en stund siden jeg drev å testet dette, og det var en del problemer med Opera og trigging av knapper, men mener det gikk greit med vanlig submit knapper, og at det kun var input type="file" som lagde krøll i Opera fordi en nisse hos Opera mente dette kunne være en sikkerhetsrisiko. På tide å få lagt ned det selskapet en gang for alle snart.

Dersom det kun skal åpnes en ny side, så trenger du ikke den opprinnelige knappen i det hele tatt, det er kun hvis det skjemaet har en eller annen action at det må trigges ett klikk på den opprinnelige knappen.
Dette er i hvert fall den eneste måten jeg har funnet som lar deg style en knapp akkurat slik du vil, da det er en del begrensninger på hva som kan gjøres med <button> elementet (eller input type button, samme greiene), selv om det sikkert går an å få de til å se bedre ut også: kjapt eksempel! som er stylet litt.

 

[Tonny Kluften]

Takk, skal prøve dette.
En ting ang. dette. Vil sidene man går til ved hjelp av denne koden se hvilken side du kommer fra?

 

[adeneo]

Nei, ikke ut i fra nettleserens window.history (frem og tilbake knappene, litt enkelt forklart).
Man kan ta med seg window.history videre i det nye vinduet ved å sette replace til false, men det fungerer ikke alltid like bra.

window.open har følgende muligheter: window.open(URL,name,specs,replace)
Normalt brukes bare url, men man kan angi navn (vises som regel i toppen av vinduet på popups og slikt), specs har masse greier, som størrelse på vinduet, og å fjerne menyen og adressefeltet f. eks., og replace betyr at det nye vinduets adresse overskriver history, og kan altså settes til false dersom man ønsker å beholde historien, noe som nesten aldri gjøres.

I standard form - "window.open(URL)" så åpnes et nytt vindu i full størrelse, og det er i utgangspunktet dette target=_blank er en forkortelse for.