Just nu i M3-nätverket
Gå till innehåll

Onsubmit


Christoph

Rekommendera Poster

Hej!

 

Jag skulle behöva lite hjälp med en grej:

 

jag har ett formulär <form name="theform">, dvs utan action definerad. Jag skulle vilja ha en funktion att, när formuläret skickas med hjälp av Enter-knappen (eller Submit-knappen), målet för formuläret (action="...") fylls med samma länk som en länk som jag har angivit i en DIV med ID´t "thelink".

 

Typ att

<form name="theform">
<input name="dittnamn">
</form>
<div id="thelink"><a href="start.html">Detta är länken</a>
<!-- eller: <a href="start.html" id="thelink"> om det underlätter saken -->

 

skall skicka användaren till start.html när man trycker på Enter i input-fältet.

 

Stort tack för hjälpen!

 

Christoph

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

<form action="" method="post" onsubmit="this.action=document.getElementById('thelink').childNodes[0].href;" name="theform">

 

Länk till kommentar
Dela på andra webbplatser

Hej,

 

snabbt svar - tack! desvärre funkar det inte, den skickar mig till en sida "undefined", vilket ger mig en 404.

 

Länken som finn i ID´t thelink skapas "dynamisk", dvs den finns inte när formuläret laddas, men den finns när (förhoppningsvis, iaf när jag testade nu) man trycker på Enter, med hjälp av Ajax.

 

Har du en annan idé hur man kan fixa det?

 

Christoph

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Du menar att du lägger dit den typ med innerHTML? Om inte, förklara exakt vad du gör. Följande fungerar nämligen också, trots att länken läggs till dynamiskt innan.

 

 

[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function Linkit(oFrm) {
o=document.getElementById("thelink");
o.innerHTML='<a href="start.html">Detta är länken</a>';
oFrm.action=document.getElementById('thelink').childNodes[0].href;
return true;
}
//-->
</SCRIPT>
</head>

<body>

<form action="" method="post" onsubmit="return(Linkit(this));" name="theform">
<input name="dittnamn">
<input type="submit" value="Submit">
</form>
<div id="thelink"></div>
</body>
</html>

[/log]

[inlägget ändrat 2007-06-14 19:44:18 av Anjuna Moon]

[inlägget ändrat 2007-06-14 19:44:45 av Anjuna Moon]

Länk till kommentar
Dela på andra webbplatser

Hej,

 

formuläret jag använder har ingen submit-knapp och heller inte (just nu iaf) någon action-länk. Detta eftersom input-fältet "bevakas" av Scriptactulous´ Form.Observer, eftersom den skall fungera som en livesearch-funktion - så fort du börjar mata in något och något hittades, skickar php-skriptet tillbaka en länk som placeras i div´en med id=thelink (eller skickar alternativt tillbaka en <a id="thelink" href="...">.

 

Om det är InnerHTML eller inte vet jag tyvärr inte.

 

Hjälper det?

 

/Christoph

 

Länk till kommentar
Dela på andra webbplatser

Ditt exempel funkar, när man lämnar bort o.innerHTML="...". Jättebra, tack!!!

 

En liiiiten justering bara - kan den inte göra något, om det inte finns någon href-värde i ID´t thelink? Vill minnas att man gör det med return false eller så, men vet inte riktig hur.

 

Christoph

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Ändra funktionen till:

function Linkit(oFrm) {
o=document.getElementById("thelink");
o.innerHTML='<a href="start.html">Detta är länken</a>';
if (o.childNodes.length>0 && o.childNodes[0].href!='') {
	oFrm.action=o.childNodes[0].href;
	return true;
}
return false;
}

 

Tack förresten för nämnandet av Scriptaculous. Det verkar använda sig av ett framework som jag faktiskt inte kände till vid namn Prototype, http://www.prototypejs.org/

Ser mkt intressant ut.

 

Länk till kommentar
Dela på andra webbplatser

Hej!

 

Nja, det hjälpte inte riktig - jag ser ingen skillnad till förra versionen faktiskt. Den skickar fortfarande iväg formuläret, även om länken inte finns med id=thelink.

 

Juh, det finns en uppsjö med roliga grejer som använder sig av prototype och scriptaculous - lightbox eller greybox´en t. ex. En annan riktig bra grej är mootools (demos.mootools.net).

 

Orkar du ta dig en titt på scriptet ännu en gång?

 

/Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Scriptet fungerar i sig, är du säker på att du fått med tecknen rätt när du kopierade det ifrån Eforum?

 

 

Länk till kommentar
Dela på andra webbplatser

Juh, det tror jag nog att jag gjorde, kollade för säkerhets skull ännu en gång.

 

Detta är koden:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	<!--

		function Linkit(oFrm) 
		{
			oFrm.action=document.getElementById('thelink').childNodes[0].href;
			if (oFrm.action=document.getElementById('thelink').childNodes[0].href!='')
			{
				oFrm.action=document.getElementById('thelink').childNodes[0].href;
				return true;
			}
			return false;
		}

	//-->
	</SCRIPT>

 

Formuläret:

 

<form action="" method="post" onSubmit="return(Linkit(this));" name="theform">
						<input id="searchText" name="livesearch" class="field" />

</form>
<div id="search_results"></div>

 

I search_results kommer det, via Ajax (vilket jag strippade bort) in en länk <a href="..." id="thelink">...</a>

 

Missar jag något här?

 

/Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

För det första så har du inte döpt om id-namnet i din funktion till vad div:en heter.

Sen är scriptet omgjort ifrån Anjuna:s förslag och nu kommer det att bli fel om länken inte finns när scriptet körs.

Och det beror på att den söker ett objekt som inte finns, nämligen länken.

 

Hur har du tänkt att använda onsubmit utan en submit knapp?

När vill du att man ska köra scriptet? Är det när man skriver in något i textrutan?

 

Om du vill köra på ditt egna vis så borde det vara så här:

function Linkit(oFrm) {
if (document.getElementById('search_results').childNodes[0]) {
	oFrm.action=document.getElementById('search_results').childNodes[0].href;
	return true;
}
return false;
}

[inlägget ändrat 2007-06-16 23:12:08 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser

För det första så har du inte döpt om id-namnet i din funktion till vad div:en heter.

 

Vilket jag inte behöver göra, eftersom det mellan <div id="search_results"> och </div> kommer att finnas en länk "<a id="thelink" href="...">...</a>, eller hur?

 

Hur har du tänkt att använda onsubmit utan en submit knapp?

När vill du att man ska köra scriptet? Är det när man skriver in något i textrutan?

 

Det vet jag faktiskt inte. Det jag vill komma fram till är att _om_ det finns en länk med id="thelink", att det då skall vara möjligt att kunna trycka på enter och att man sedan (med formulärets innehåll) skickas till samma adress som "thelink"-länken innehåller. Finns det ingen länk i ovannämnda DIV´en, skall det helst inte ens vara möjlig att ngt händer om man trycker Enter i Input-fältet.

 

Förstår du hur jag menar?

 

/Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane
Förstår du hur jag menar?

Ja, att länken får id:et förändrar en del.

Hinner jag idag så kan du få ett exempel, på väg till jobbet.

 

Ha det!

Micke

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Okej, nu har jag gjort ett förslag som kollar så att länken finns och att dem har skrivit något söksträng.

Det körs hela tiden en koll på vilken tangent man trycker ner och stämmer den med Enter och länken finns och söksträngen finns så submita formuläret till länkens href-värde.

 

Hoppas det var så du tänkt dig det :)

 

http://22384a8d8d6d2d8d.paste.se/

 

 

Länk till kommentar
Dela på andra webbplatser

Hej Micke,

 

tack för att du tog dig tid, jättesnällt!

 

Men... har dubbelkollat 3 ggr nu, och får det inte på grej. Trycker du på enter när det inte finns en länk "thelink", laddas sidan om (sökrutan töms, inte bra). Finns det en länk och du trycker på Enter, kommer du till url minsida.com/undefined

 

Här är koden:

 

		<script type="text/javascript">
	<!--
		document.onkeydown = TangentKoll;
		var Tangent;
		function TangentKoll(e) {
			Tangent = (window.event)? event.keyCode:e.keyCode;
		}
		function Linkit() {
		var oLink = document.getElementById("thelink");
		var oSearchStr = document.getElementById("searchText");
		var oForm = document.forms[0];
			if (oLink && oSearchStr.value.length>0 && Tangent==13) {
				oForm.action = oLink.href;
				oForm.submit();
			}
			return false;
		}
	//-->
	</script>

 

 

<form action="" method="post" name="theform" id="theform">
					<p>
						<label for="alt_search" class="left">S&ouml;k efter:</label>
						<input id="searchText" name="livesearch" class="field" onkeypress="Linkit();"/>

					</p>
			</div>
			<div id="search_results">
			</div>
				</form>

 

Missar jag ngt h är?

 

/Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Vet inte om du missar något. Hinner inte kolla så noga just Nu men kollar senare.

 

Här kan du i alla fall se att det fungerar(om länken finns)

http://user.tninet.se/~gbs951f/test_submit.html

 

Kollade din kod nu och den fungerar hos mig!

Du hade dock en </div> extra, om nu inte den tillhör övrig kod.

[inlägget ändrat 2007-06-19 15:57:29 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser

Hej,

 

ursäkta att jag hör av mig först nu. Testade med din länk - den funkar, inte frågan om det (fast jag skulle vilja undvika att sidan laddas om när man trycker på Enter då rutan är tomt, går det inte att undvika att man kan submitta formuläret?).

 

Har du möjlighet att titta till vad jag missar, vore jag jättetacksam.

 

Tack!

 

Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Ändra i så fall funktionsanropet till att vara i en onsubmit.

 

Så här ska det vara:

<form action="" method="post" name="theform" id="theform" onsubmit="Linkit();return false;">
...
</form>

Ta alltså bort functionsanropet ifrån textfältet och lägg det i form-taggen, som jag visat.

 

Sen kan då funktionen ändras till:

[log]

function Linkit() {
var oLink = document.getElementById("thelink");
var oSearchStr = document.getElementById("searchText");
var oForm = document.forms[0];
if (oLink && oSearchStr.value.length>0 && Tangent==13) {
	oForm.action = oLink.href;
	oForm.submit();
}
}

[/log]

[inlägget ändrat 2007-06-20 23:05:24 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser

Hej Micke,

 

tack för detta! Inte heller helt okej, men det beror tydligen pa att jag använder Firefox, där skall det visst vara ngt annat än window.event.keyCode, läste jag ngnstans.

 

Jag har testat lite mera ingaende och sa här har jag det nu - det funkar rätt bra, men det enda jag inte "far tag i" är href´en, dvs. själva länken far värdet "undefined" när jag ser en länk med id=thelink, sa det maste vara ngt med oLink.href som inte är korrekt, annars funkar det som sagt jättebra. Just ja - kör med onKeyPressed fortfarande. Jag dumpade förresten längd-koll, för det vet jag att det inte kan komma en länk med id=thelink annars.

 

		<script language="JavaScript">
		function disableEnterKey(e)
		{
			var key;

			if(window.event)
				key = window.event.keyCode; //IE
			else
				key = e.which; //firefox

			var oLink = document.getElementById("thelink");
			var oForm = document.forms[0];

			if (key==13)
			{
				if (oLink)
				{
					oForm.action = oLink.href;
					alert(oLink.href);
					return true;
				}
				else
					return false;
			}
			else
				return true;
		}
	</script>

 

Vet du vad som orsaker att href inte far ngt rätt värde?

 

/Christoph

 

 

 

 

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

När jag kollar i FF så fungerar det, så som jag tror du vill ha det.

Ingen söktext så gör inget annars skicka formuläret vid enter-tryckning, då det finns en länk.

Finns det ingen länk så skickas inte heller formuläret vid en enter-tryckning.

Ingen skillnad i IE, FF, Opera eller Netscape!

 

http://user.tninet.se/~gbs951f/test_submit.html

 

Din "nya" kod orkar jag inte kolla över nu men det fungerar det jag redan gjort åt dig.

[inlägget ändrat 2007-06-20 23:25:39 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser

Hej Micke,

 

tack, har du helt rätt i. Jag fick det på grej nu, jag hade dubbla id=thelink, en gang i DIV´en och en gang i <a href="">, sa därför funkade din kod inte hos mig - sorry :).

 

Tack för hjälpen med detta, ännu en gang!

 

Christoph

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Bra att det fungerade även hos dig :)

Det blev ju skillnad nu när det var länken som skulle ha id:et och inte div:en.

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...