[javascript] Button heeft invloed op invulveld

[dawuss]

Ik ben bezig met een site voor de locale buurtvereniging hier. De mensen die hier gebruik van gaan maken zijn allemaal niet bekend met HTML, en alle handelingen die nodig zijn om dingen te uploaden.
Ik heb er daarom voor gekozen om de site databasegestuurd te maken (php+mysql) zodat de beheerders het nieuws dat op de site moet komen via invulvelden kunnen invoeren. Ik heb nu dus een simpel formulier met één text-invulvak voor de titel, en één <textarea>. Voor opmaak is het de bedoeling dat HTML gebruikt gaat worden. Aangezien de meeste nieuwsberichten aangeleverd worden als .DOC, en er goede manieren zijn om .doc naar HTML om te zetten.
Aangezien de mensen die de site gaan bijhouden geen verstand hebben van HTML, en er toch af en toe iets handmatig ingevoerd moet worden, wil ik dingen als 'vet-, schuingedrukt', 'link', en 'afbeelding' implementeren.
Mijn idee was als volgt:
Voor het invoeren van een link, bijvoorbeeld, komen er twee invulvelden en een knop: één invulveld voor de URL, één invulveld voor de tekst en de verzendknop.
Het is dus de bedoeling dat, als de gebruiker de twee invulvelden ingevuld heeft en op de knop geklikt heeft, de invoer verwerkt wordt tot een <A HREF...> statement, die dan wordt toegevoegd aan de tekst die al in de <TEXTAREA> staat.
Ik denk dat dit met javascript moet kunnen, maar ik heb weinig kaas gegeten van Javascript, en ik weet niet hoe dit kan. Het lukt me wel om een <a href=> statement te maken (gewoon strings samenvoegen) maar verder kom ik niet.
Kan iemand me hier mee helpen?

[Verwijderd]

Is het niet gewoon sneller om een content management systeem ( zo'n gratis zie www.hotscripts.com) te installeren ?

Die hebben meestal ook een WYSIWYG editor ... nog makkelijker ....

Bij ons op werk hebben dat ook ... heel simpel

[Verwijderd]

Je kan het beste met een IFRAME werken. Wanneer je daar de designmode van op on zet, dan kan je er gewoon allemaal dingen in editten enzo. Bold, Italic, etc. Copy paste.

Hier is een hele lijst te vinden met bruikbare editors:
http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html

Succes ermee.

[dawuss]

Dit is natuurlijk wel handig, maar als het anders kan is het natuurlijk beter
Kan het niet in javascript dan? WYSIWYG is niet nodig, alleen wat simpele functionaliteit.

[nl2dav]

Ben geen voorstander van IFRAME sowieso en ik geloof dat ik wel begrijp wat je bedoelt. kijk eens voor de lol naar de werking van hetgene wat ik een paar maanden terug heb gemaakt voor onze eigen site;

http://flits.gris.nl/forum/index.php?view=addsms

Ik hoop dat je een beetje source code kan doorlezen want het is a) veel te lang om hier te posten en b) heb ik er sowieso geen zin in.

Maarrem even serieus, dit heeft me wel een weekendje gekost voordat het draaide zoals ik het wilde (met hulp van irt.org)... Maar waar een wil is, is een weg, nietwaar.

[dawuss]

nl2dav: Dit is bijna precies hoe ik het wil maken. Kun je je methoden nog een klein beetje toelichten? Zoals ik al zei, van javascript heb ik nog weinig kaas gegeten

[nl2dav]

Nouja in principe zit het vrij logisch in elkaar .. Als ik de code er eens even bij pak dan begint het hiermee;

code:

<SCRIPT LANGUAGE="JavaScript"><!--
function updateTextField() {
    document.melding.opmerking.value = 
        document.form1.select1.options[document.form1.select1.selectedIndex].value + ' ' +
        document.form1.select2.options[document.form1.select2.selectedIndex].value + ' ' +
        document.form1.wegnummer.value + ' ' +
        document.form1.locatie1.value + ' ' +
        document.form1.ri.value + ' ' +
        document.form1.locatie2.value + ' ' +
        document.form1.thv.value + ' ' +
        document.form1.aanduiding.value
}
//--></SCRIPT>

De onderste uiteindelijke tekstbalk wordt opgebouwd met bovenstaande code.

Hierboven staat in principe:

de value van "opmerking" in het melding-form = de geselecteerde value van "select1" uit form1 + de 2de geselecteerde value "select2" uit form1 + de value van het veld die genaamd is "wegnummer" uit form1 etcetc... Uiteindelijk is met al die + 'jes een complete regel meldingsregel opgebouwd.

Dan begint form1, wat gewoon puur een html form is met de gewone standaard input en selectie blabla. Dat begint hier;

code:

<FORM NAME="form1">
<SELECT NAME="select1" onChange="updateTextField()">
<OPTION VALUE="RADAR">Radarcontrole
<OPTION VALUE="LASER">Lasercontrole
</SELECT>

Wat opvalt is dat de form1 benaming terugkomt hier, en dat hier de waarde "select1" gemaakt wordt. Wat verder opvalt is het onChange commando. Zodra het veld veranderd wordt van waarde dan wordt het updateTextField() javascriptje van hierboven opnieuw uitgevoerd. Dus als er een veld veranderd dan wordt elke keer automatisch het hele uiteindelijke invoerveld "opmerking" (in het form met de naam "melding") gewijzigd.

[code]
<INPUT type="TEXT" NAME="locatie1" size="10" onChange="updateTextField()">
[code]

Zie ook hier weer de benaming van het tekstveld terugkomen die zijn koppeling heeft met het javscriptje bovenaan en de Onchange instructie.

code:

<INPUT type="Hidden" NAME="thv" value="thv">

Ik heb er ook wat vaste waardes tussen zitten die ongewijzigd blijven in een uiteindelijke melding. Die velden heb ik het type "hidden"meegegeven zodat ze constant meegenomen worden in het uiteindelijke resultaat maar dat ze niet veranderd kunnen worden. De Onchange instructie is dan ook niet nodig natuurlijk.

code:

<FORM NAME="melding">
<input type="text" size="67" name="opmerking" value="Vul ALLE bovenstaande gegevens in en geef dan de melding door" readonly
</FORM>

En het uiteindelijke form waar alles zijn betrekking op moet hebben. De benaming "melding" komt weer terug 9alhoewel ik dat bijv. ook form2 had kunnen noemen). En de benaming "opmerking"van het veld. Voor het gemak heb ik het veld readonly gemaakt zodat ze niet nog eens een keer met hun vingertjes nog iets buiten het form om kunnen aanpassen

[nl2dav]

Ik denk alleen eerder dat je voor jouw toepassing beter nog iets anders kan gebruiken. Namelijk de "post reply" manier van Ikonboard. (Neem daar es een kijkje, ff reggen etc, willekeurige thread pakken en reply'en en dan view source hehe).

Daar doen ze dit soort dingen;

code:

function IBCunder() {
if (Underline == 0) {
ToAdd = "[U]";
document.REPLIER.under.value = " U*";
Underline = 1;
} else {
ToAdd = "[/U]";
document.REPLIER.under.value = " U ";
Underline = 0;
}
PostWrite(ToAdd);
}

Met PostWrite instructies enzo. En onClick instructies;

code:

<input type='button' accesskey='u' value=' U ' onClick='IBCunder()' class='forminput' title="UNDERLINE: [Control / Alt] + u" name='under' style="text-decoration:underline">

Wat uiteindelijk effect heeft op het tekstinvoerveld;

code:

<textarea cols='60' rows='12' wrap='soft' name='Post' tabindex='3' class='textinput'></textarea>

(Let ook is op het http:// invoerveld, hoe ze dat opgelost hebben)

... Eigenlijk is alles kinderlijk eenvoudig zolang je maar een concept in je hoofd hebt die iemand anders ongeveer op dezelfde manier gemaakt heeft. Ik begon ook met 0 javascript kennis, gewoon naar ideeen en oplossingen van anderen kijken en dwars door de source code heen kijken. Op gegeven moment is het eigenlijk wel vrij simpel allemaal

En tsja als het niet lukt dan kan je altijd nog HTML cursussen gaan geven

(Iemand trouwens enig idee hoe ik code kan posten zonder de hele tweakers forum layout te vern&^ken?)

[ Voor 23% gewijzigd door nl2dav op 24-11-2002 10:52 . Reden: typo's ]