[JS]Text uit form, lukt niet

[Yoram]

Hallo Allemaal,

Ik zit met het volgende:
Ik gebruik voor mijn eenvoudige CMS, CKEditor om toch wat eenvoudige opmaak aan de tekst te kunnen geven. Nu ben ik bezig om een plugin te maken waarmee je interne links kan maken voor op de website.

Aan de hand van deze tutorial heb ik al voor elkaar weten te krijgen om een icoon toe te voegen aan de toolbar van CKEditor. Dat werkt allemaal prima. Alleen krijg een heel simpel ding niet voor elkaar.

Het lukt me maar niet om tekst uit een input text form in het script te krijgen.

Dit is hoe mijn form eruit ziet:

HTML:

<form name="linkForm" id="linkForm" action="#">
<br>
<select name='pageID'>
 <option value="">Kies een pagina</option>
 <?php showPages(); ?>
</select>
<br>
<br>
Link tekst:<br>
<input name="inputText" id="inputText" type="text" size="50">
</form>

De showPages() functie haalt alle pagina's op uit de MySQL database en zet ze als options neer, dat werkt allemaal goed.

Dan mijn javascript, deze staan in de head.

JavaScript:

<script type="text/javascript">
internURL = document.getElementById('inputText').value;

var CKEDITOR = window.parent.CKEDITOR;
var okListener = function(ev) {
   this._.editor.insertHtml(internURL);
   CKEDITOR.dialog.getCurrent().removeListener("ok", okListener);
};
CKEDITOR.dialog.getCurrent().on("ok", okListener);
</script>

Als ik nu op ok klik in het plugin venster zet hij 'hallo' in het veld. Dat werkt. Maar nu moet het van het tekst veld komen.

Ik heb op google gezocht naar een manier om te de tekst uit het veld inputText te halen.
wat ik heb geprobeerd:

internURL = form.inputText.value; > doet niks
internURL = document.getElementById('inputText'); > doet niks
internURL = document.linkForm.inputText.value; > doet niks

Ik wil alleen dit veld werkend krijgen, als dat werkt kan ik verder kijken.

Het wil allemaal niet werken, ik kan nergens andere manieren vinden om dit anders te doen. Wat doe ik verkeerd ?

[ Voor 3% gewijzigd door Yoram op 05-02-2010 20:13 . Reden: id erbij gezet ]

[Tarilo]

Bij de eerste optie geef je de naam van de form niet zo te zien en bij de tweede moet je er volgens mij .value achter zetten.

Dus als je dit gebruikt:

code:

internURL = document.getElementById('InputText').value;

Werkt het dan wel?

Ben zelf ook niet echt een ster in JS, dus ik kan er naast zitten.

[Yoram]

Doet net zo weinig helaas

[MsG]

Ik zie ook nergens een ID gedefineerd. Dan werkt getElementById ook niet echt ;-).

Dus geef dat element ook nog even een ID.

[ Voor 21% gewijzigd door MsG op 05-02-2010 19:16 ]

[Yoram]

Ja dat klopt, die was ik vergeten in me post. Ik had hem er echter wel instaan. Maar alsnog wil het niet werken...

[Raynman]

Het is niet echt duidelijk hoe je alles nu aan elkaar knoopt. Online voorbeeld zou het makkelijkst zijn. (misschien ook voor jezelf nuttig om een uitgeklede testpagina op te zetten)

Verder zeg je "lukt niet" en "doet niks". Heb je al iets aan debuggen gedaan? Dan moet je toch iets specifieker kunnen zijn over wat er wel of niet gebeurt.

En als ik me niet vergis is het type-attribuut verplicht op de scripttag en language niet, en het weglaten van die laatste geeft volgens mij ook geen problemen (misschien in (heel) oude browsers), dus ik zou (het schreeuwerige) LANGUAGE="JavaScript" vervangen door type="text/javascript".

[ Voor 35% gewijzigd door Raynman op 05-02-2010 19:32 ]

[Miyamoto]

7laurens7 schreef op vrijdag 05 februari 2010 @ 19:08:

code:

internURL = document.getElementById('InputText').value;

Werkt het dan wel?

Yoram schreef op vrijdag 05 februari 2010 @ 18:41:

HTML:

<input name="inputText" id="inputText" type="text" size="50">

inputText vs InputText (case sensitive!). Verder hoort Laurens' methode gewoon te werken als de id's correct zijn

[Yoram]

Raynman schreef op vrijdag 05 februari 2010 @ 19:27:
Het is niet echt duidelijk hoe je alles nu aan elkaar knoopt. Online voorbeeld zou het makkelijkst zijn. (misschien ook voor jezelf nuttig om een uitgeklede testpagina op te zetten)

Verder zeg je "lukt niet" en "doet niks". Heb je al iets aan debuggen gedaan? Dan moet je toch iets specifieker kunnen zijn over wat er wel of niet gebeurt.

En als ik me niet vergis is het type-attribuut verplicht op de scripttag en language niet, en het weglaten van die laatste geeft volgens mij ook geen problemen (misschien in (heel) oude browsers), dus ik zou (het schreeuwerige) LANGUAGE="JavaScript" vervangen door type="text/javascript".

Online voorbeeld word wat moeilijk aangezien alles nu op me thuis server draait, en het met een password beveiligd gedeelte is.

Aangezien het moet werken met ckeditor valt er niet zo veel uit te kleden aan dit script. En daarbij alles is al minimaal.

Het type attribuut heb ik aangepast maar dat heeft ook niks uitgemaakt.

Ik heb net iets gelezen over een sample plugin wat ergens in ckeditor verstopt zit, ik ga daar eens naar opzoek.

En ik heb de code net eens in JSLint gestopt. Die zegt een hoop maar niks dat ik snap dus ik moet dat even duidelijk voor mezelf maken.

In de startpost heb ik alle fouten eruit gehaald.

[Feanathiel]

Yoram schreef op vrijdag 05 februari 2010 @ 18:41:
Dan mijn javascript, deze staan in de head.

Op het moment dat "inputText" opgevraagd wordt, bestaat het form nog niet. Het stukje script staat namelijk in de head tag, wat eerder zal worden geparsed dan de body tag (en dus ook het formulier).

Mogelijke oplossingen zouden kunnen zijn om dit geheel in een functie te zetten, waardoor het pas word opgevraagd wanneer het form opgestuurd wordt. Verder zou er kunnen worden gekeken om de code na het form te plaatsen. Niet bepaald een nette oplossing, maar dat laat ik over aan de topicstarter om hier een net geheel van te maken.

[Raynman]

Yoram schreef op vrijdag 05 februari 2010 @ 20:12:
Online voorbeeld word wat moeilijk aangezien alles nu op me thuis server draait, en het met een password beveiligd gedeelte is.

Aangezien het moet werken met ckeditor valt er niet zo veel uit te kleden aan dit script. En daarbij alles is al minimaal.

Je hebt het in een CMS (in wording) zitten, daar kon nog veel meer inzitten wat misschien voor problemen zorgt, maar daar weet ik verder natuurlijk niets over.

Het type attribuut heb ik aangepast maar dat heeft ook niks uitgemaakt.

Was ook meer een extra opmerking, niet relevant voor het probleem.

In de startpost heb ik alle fouten eruit gehaald.

Nu zien we dus dat je daar direct de inhoud van het input-element probeert uit te lezen, i.p.v. met een onsubmit-functie (of misschien iets specifieks voor CKEditor). Dat is wat ik bedoelde met het aan elkaar knopen (waar het mis leek te gaan), omdat er aan die twee stukjes JS/HTML niet heel veel te zien was (nou ja, omdat daar geen functiedefinitie stond, was dat wel te raden, maar ik dacht eerst dat je gewoon veel had weggelaten).

[ Voor 5% gewijzigd door Raynman op 05-02-2010 20:47 ]

[Verwijderd]

Ik weet zo niet wat je verkeerd doet, maar om deze problemen makkelijker op te lossen kun je er ook eens kijken naar jQuery. Dat heeft bij mij javascript ontwikkeling echt een stuk sneller maar vooral makkelijker gemaakt!

Voor jou voorbeeld kun je dan zo de waarde ophalen:

JavaScript:

var internURL = $('#inputText').val();

Het voordeel van jQuery is dat je op veel verschillende manieren een element kunt aanroepen. In dit geval zou je dus niet perse op het id een selectie hoeven doen, want die komt misschien 2 keer voor in je code (wat natuurlijk niet zou mogen).

Je zou dan bijvoorbeeld ook kunnen selecteren op een input veld met als name attribuut 'inputText'.

JavaScript:

var internURL = $('input[name=inputText]').val();

je kunt er ook een css class aanhangen en daarop selecteren.

JavaScript:

var internURL = $('.specialeCssClass').val();

Het geeft je in ieder geval meer mogelijkheden om de waarde op te halen mocht er ergens iets fout gaan. En het is meteen cross-browser!

[RobIII]

Verwijderd schreef op vrijdag 05 februari 2010 @ 22:14:
Ik weet zo niet wat je verkeerd doet, maar om deze problemen makkelijker op te lossen kun je er ook eens kijken naar jQuery.

Een complete library includen om een value uit een textbox te halen. _{Die jeugd van tegenwoordig...}

Verwijderd schreef op vrijdag 05 februari 2010 @ 22:14:
Het voordeel van jQuery is dat je op veel verschillende manieren een element kunt aanroepen.

En dat kan met 'vanilla' JS niet?

Verwijderd schreef op vrijdag 05 februari 2010 @ 22:14:
Het geeft je in ieder geval meer mogelijkheden om de waarde op te halen mocht er ergens iets fout gaan.

Dan moet je vooral een library gebruiken en de fout lekker laten zitten. En dan met een omslachtige manier alsnog proberen de value op te halen...

Verwijderd schreef op vrijdag 05 februari 2010 @ 22:14:
En het is meteen cross-browser!

En een simpele .getElementById() niet dan?

[Rvanlaak]

code:

 document.getElementById('InputText').text

code:

 document.getElementById('inputtext').text

?

[ Voor 0% gewijzigd door Rvanlaak op 09-02-2010 00:32 . Reden: typo ]