[JS] Form-waarden veranderen door event

[jfeelders]

Voor de MX-5 Clubsite ben ik een pagina aan het maken waar leden zich online kunnen opgeven voor een clubrit. Afhankelijk van de keus voor de rit wordt een via een form automatisch een text/plain mailtje naar de organisator gestuurd en wordt het onderwerp van het mailtje aangepast. Nu zit ik met enkele handicaps vanuit de server/cms waardoor ik het in IE niet werkend krijg (in Firefox werkt het wel):
- scripts kunnen niet in de head staan
- het cms laat zelf aanhalingstekens weg tijdens het parsen

Ik heb zelf al een paar dagen rondgezocht op GoT, Google en W3Schools maar kom er niet achter waarom ik het in IE niet werkend kan krijgen.

Form:

HTML:

<FORM action="mailto:" method="post" enctype="text/plain" name="aanmelding">
<INPUT type=hidden value=" Dit formulier is verstuurd door onderstaande persoon vanaf de MX-5 Clubsite." name="Onderwerp ">
<INPUT type=hidden value=" __________________________________________________________________" name="_________ "> 
<TABLE cellPadding=3 border=0>
<TBODY>
<TR>
<TD>Naam :</TD>
<TD><INPUT size=50 name="Naam " value=" "></TD></TR>
<TR>
<TD>Lidnummer:</TD>
<TD><INPUT size=4 maxlength=4 name="Lidnummer "></TD></TR>
<TR>
<TD>Emailadres :</TD>
<TD><INPUT size=50 name="Email " value=" "></TD>
</TR>
</TBODY>
</TABLE><BR>
Geeft zich op voor de <SELECT name="Ritnaam">
<OPTION selected value=""> </OPTION>
<OPTION value=' Circuitdag | a1@b.c'>Circuitdag</OPTION>
<OPTION value=' Beginnersrit | a2@b.c'>Beginnersrit</OPTION>
</SELECT><BR><BR>
<CENTER>Let op: Uw aanmelding is pas compleet en definitief<BR>als u het inschrijfgeld heeft overgemaakt.<BR><BR>
<INPUT type=submit value=" Verzenden " onclick="javascript:navForm();"> <INPUT type=reset value=" Opnieuw ">
</CENTER></FORM>

De bijbehorende JavaScript die in de body wordt geladen. Het script splitst de data die in de form pull-downlist staat om zodoende automatisch de mailto en topic aan te passen.

JavaScript:

<script language="javascript">
  function navForm(){
     if (document.aanmelding.Ritnaam.value != "") {
       var first_split = document.aanmelding.Ritnaam.value.split(" | ");
          var naam = (first_split[0]);
          var email = (first_split[1]);
       document.aanmelding.Ritnaam = naam;
       document.aanmelding.action = ('mailto:'+email+'?subject=(MX-5 Club) Online aanmelding voor'+naam);
     } 
  }
</script>

In Firefox krijg ik dus mooi een mailtje voor me naar de organisator van de desbetreffende rit met als onderwerp zijn rit. In IE krijg ik geen mailto-adres en het standaard IE-onderwerp: 'Dit formulier is gepost met Microsoft Internet Explorer.' Moet voor IE het script persé in de head staan?

Wie kan me een duwtje in de goede richting geven?

[ Voor 15% gewijzigd door jfeelders op 28-06-2006 12:08 ]

[crisp]

JavaScript:

document.aanmelding.Ritnaam = naam;

dat kan niet in IE bij een select (en lijkt me ook overbodig hier).

Verder zou ik de javascript call vanuit de onsubmithandler van het form doen - kan je gelijk netjes een referentie naar je formulier meegeven, en zou ik eens kijken of je provider niet een echt mailscript aanbiedt; mailto: is echt een pauperoplossing.

[jfeelders]

Crisp, bedankt voor je opmerking, maar ik ben er helaas niets verder mee gekomen. Ik heb weer een tijd lopen zoeken en aanpassen, maar krijg het niet werkend in IE.

Ik zit helaas vast aan een mailto-constructie, hoe slecht dan ook. Zou je me een duwtje in de rug kunnen geven voor wat betreft de onsubmit met referentie?

[Verwijderd]

Hoi,

Zie hieronder de javascript functie, je kan hem aan laten roepen door het attribuut onsubmit="return navForm()" in je form tag te zetten. Bijvoorbeeld:

code:

<form onsubmit="return navForm()">

Dit word dan aangeroepen als je op een <input type="submit" /> klikt.

Hier het javascript, als de functie false returnt dan word het formulier niet gesubmit.

code:

<script language="javascript">
function navForm(){
var form = document.aanmelding; // scheelt typen!
var Ritnaam = form.Ritnaam;

if (Ritnaam.value == '') {
   alert('Ritnaam is leeg.');
   return false;
}

var first_split = Ritnaam.value.split(" | ");

var naam = first_split[0];
var email = first_split[1];

Ritnaam.value = naam;
form.action += email + '?subject=(MX-5 Club) Online aanmelding ' + naam;
return true;
}

if (document.aanmelding.Ritnaam.value != "") {
   var first_split = document.aanmelding.Ritnaam.value.split(" | ");
   var naam = (first_split[0]);
   var email = (first_split[1]);

   document.aanmelding.Ritnaam = naam;
   document.aanmelding.action = ('mailto:'+email+'?subject=(MX-5 Club) Online aanmelding voor'+naam);
} 
}
</script>

Succes ermee.

[ Voor 19% gewijzigd door Verwijderd op 23-06-2006 20:21 ]

[jfeelders]

Bedankt Jeromche voor je inbreng! Helaas werkt het op deze manier niet in IE èn FF maar mogelijk heb je me wel in de goede richting geholpen. Ik zal nog eens goed verder zoeken.

[Hermanvh]

jfeelders schreef op maandag 26 juni 2006 @ 10:22:
Bedankt Jeromche voor je inbreng! Helaas werkt het op deze manier niet in IE èn FF maar mogelijk heb je me wel in de goede richting geholpen. Ik zal nog eens goed verder zoeken.

Kijk eens naar JS DOM. Als ik het zo gauw zie, dan zal dit inderdaad niet op beiden werken. Vaak moet je werken met document.all en document.getElementById (afhankelijk van browser).

[Verwijderd]

Hermanvh schreef op maandag 26 juni 2006 @ 20:43:
[...]

Kijk eens naar JS DOM. Als ik het zo gauw zie, dan zal dit inderdaad niet op beiden werken. Vaak moet je werken met document.all en document.getElementById (afhankelijk van browser).

Vergeet die document.all maar.

[jfeelders]

Ik ben weer iets verder maar kom er niet uit. Ik heb de onSubmit nu in de form-tag gezet en de form een id="aanmelding" meegegeven. Met de onderstaande JS werkt het nog steeds niet in IE maar wel in FF:

JavaScript:

  function navForm(){
     var form = document.getElementById("aanmelding");
     if (form.Ritnaam.value != "") {
       var first_split = form.Ritnaam.value.split(" | ");
          var naam = first_split[0];
          var email = first_split[1];
       form.Ritnaam = naam;
       form.action = 'mailto:'+email+'?cc=[e-mail]&subject=(MX-5 Club) Online aanmelding voor'+naam;
     } 
  }

Fancy extra's (zoals form validation) komen later wel...

[ Voor 22% gewijzigd door jfeelders op 28-06-2006 12:47 ]

[crisp]

Dit lijkt goed te werken:

HTML:

<script type="text/javascript">

function navForm(form)
{
    var Ritnaam = form.elements['Ritnaam'];
    var Ritnaam_value = Ritnaam.options[Ritnaam.selectedIndex].value;
    if (Ritnaam_value != '')
    {
        var first_split = Ritnaam_value.split(' | ');
        var naam = first_split[0];
        var email = first_split[1];
        window.location = 'mailto:'+email+'?subject='+escape('(MX-5 Club) Online aanmelding voor '+naam);
    }

    return false;
}

</script>
<form action="#" onsubmit="return navForm(this)">
<select name="Ritnaam">
    <option value="">Maak een keuze:</option>
    <option value="Hobbeldebobbel | [e-mail]">Hobbeldebobbel</option>
    <option value="Zwalkiezwalkie | [e-mail]">Zwalkiezwalkie</option>
</select>
<input type="submit">
</form>

[jfeelders]

Damn close, nu nog de rest van mijn form gewoon in de body krijgen...

[jfeelders]

Done! Met wat form.elements[0].value tags kon ik de form-inputs zoals Naam en Lidnummer via de JavaScript in de body krijgen. Uiteindelijk een gedoe om het voor elkaar te krijgen maar ik ben blij dat het gelukt is!

@crisp: Hoe kwam je erbij om het op deze manier aan te pakken met een window.location? Het blijft een leermoment he?

[jfeelders]

Nog een vraagje: Ik heb in de form een hidden tekst gemaakt ("Bedankt, uw inschrijving is verzonden") welke in het onSubmit-script met een GetElementById visible wordt gemaakt. Om tegen te gaan dat het formulier meermalig wordt verstuurd heb ik aan het eind van het script ook een document.form.reset() gezet waardoor de inhoud wordt gewist.
De reset() en de GetElementById werken elkaar echter tegen. Als de reset() wordt uitgevoerd kan de tekst niet visible worden gemaakt. Verwijder ik de reset() uit het script dan wordt de tekst wel mooi visible. Hoe kan dit?

[Verwijderd]

Je kunt dan het beste nogmaals de code posten aangezien mijn glazenbol stuk is.

[BtM909]

Als je toch afhankelijk bent van JS, dan kan je toch gewoon je submit button disablen?

[jfeelders]

BtM909 schreef op maandag 04 september 2006 @ 23:26:
Als je toch afhankelijk bent van JS, dan kan je toch gewoon je submit button disablen?

Oeh, da's een goeie! Die ga ik proberen...