Meerdere Javascripts op 1 pagina.

Misschien kun je eerst even vertellen wat je precies probeert te bouwen. Daarnaast: Als je code plakt, doe dat dan even in een code=html blok, dat maakt het wat leesbaarder.

zondag 28 april 2013 11:06

Acties:

zondag 28 april 2013 11:13

Topicstarter

posttoast schreef op zondag 28 april 2013 @ 10:59:
Misschien kun je eerst even vertellen wat je precies probeert te bouwen. Daarnaast: Als je code plakt, doe dat dan even in een code=html blok, dat maakt het wat leesbaarder.

Sorry, zie topic

Acties:

Zonder het probleem direct voor je op te lossen, kijk nog even heel goed naar je HTML. Het is een beetje een rommeltje. Je hebt een paar inputs buiten je <form> gezet, dat gaat natuurlijk niet werken.

Kijk hier anders even naar: http://sharkysoft.com/tutorials/jsa/content/034.html

zondag 28 april 2013 11:18

Acties:

Afvalzak

Zet jij mij even buiten?

Zonder een hele discussie te starten, maar het is wel zo netjes om niet 2 talen door elkaar te gebruiken (dus Engels commentaar, Nederlandse variabelen etc.)

Inputs moeten inderdaad in je form element staan, en wat is het nut van die array (descriptions) die gegevens kan je zo uit het select element halen.

Last.fm | Code Talks

zondag 28 april 2013 11:43

Acties:

zondag 28 april 2013 11:47

Topicstarter

afvalzak schreef op zondag 28 april 2013 @ 11:18:
Zonder een hele discussie te starten, maar het is wel zo netjes om niet 2 talen door elkaar te gebruiken (dus Engels commentaar, Nederlandse variabelen etc.)

Inputs moeten inderdaad in je form element staan, en wat is het nut van die array (descriptions) die gegevens kan je zo uit het select element halen.

Nou de mail wordt verstuurd naar een Nederlands bedrijf dus het is de bedoeling dat het ook in het Nederlands komt.

Ik ga ervan dat jullie naam / best effort / next day etc bedoelen dat die niet onder de form tags staan. Dat is inmiddels aangepast maar dat was eigenlijk mijn probleem niet.

Ik wil regel 10 t/m 40 nog eens kopieren / plakken onderaan alleen daar komen andere variabelen in te zitten. Als ik dat doe dan werkt niks of 1 van de 2 werkt niet meer. Ik zit dus met het probleem als er meerdere scripts heb dan houdt alles op. Ik weet dat ik iets met die dothis;dothat;onload commando's moet doen alleen daar komt ik niet helemaal uit in mijn situatie.

descriptions variablen wordt nog uitgebreid met meer text.

Acties:

Even heel lullig gezegd: ik denk dat je eerst even moet "leren" hoe een formulier in HTML überhaupt werkt. Want als ik zie wat je nu doet, dan heb je dat nog niet helemaal door. Je hebt nu meerdere <forms> gemaakt, wat is daar het idee achter?

zondag 28 april 2013 11:54

Acties:

zondag 28 april 2013 12:13

Topicstarter

Erm ik zou ze kunnen grouperen onder 1 form, maar maakt dat echt zoveel uit? Nu is elke sectie (wat het is overzichtelijk). Zoals aangegeven ben ik vrij n00b met dit maar bereid om te leren. Dus graag advies of vertel me wat ik fout doe ipv bovenstaande.

Tevens beantwoordt dit mijn vraag nog altijd niet. Ook al heb ik alles onder 1 form tag staan. Zodra het 2e javascript invoer dan stopt het met werken. Zelf ben ik al op het volgende methodes uitgekomen zoals aangegeven op http://sharkysoft.com/tutorials/jsa/content/033.html. Alleen ik zie niet hoe ik dit in mijn situatie krijg.

Acties:

Het punt is dat je ze niet zou "kunnen" groeperen in één <form>, het moet in één form. Het is namelijk één en hetzelfde formulier dat je nu in stukjes gehakt hebt. Als je het in secties wilt indelen (wat op zich prima is) dan heb je daar andere HTML elementen voor. <fieldset>'s om precies te zijn, die plaats je in je formulier.

Het punt is dat je nu hier een berg code neerkwakt met de mededeling "het werkt niet". En dat is nou precies niet de bedoeling van dit forum. Het beste is als je zelf probeert te debuggen, maar ik heb het idee dat je je eigen code al niet goed begrijpt en dat maakt dat heel lastig. Dat bedoel ik geenszins lullig, je moet aan mij ook niet vragen om de motor van een auto te repareren

. Dat je bereid bent om te leren is natuurlijk heel goed, maar de manier om dat te doen is je in te lezen en eventueel wat tutorials te volgen. Probeer eerst of je HTML formulieren volledig begrijpt en ga daarna kijken of je kunt verrijken met javascript.

zondag 28 april 2013 12:33

Acties:

downtime

Everybody lies

Zodra je dat tweede blok javascript toevoegt heb je opeens twee functies met de naam ShowText(). Functienamen moeten logischerwijze uniek zijn.

zondag 28 april 2013 12:35

Acties:

michiel_hc

We kunnen je hier wel een werkend stuk code voorkauwen maar het lijkt me verstandig dat je eerst even een basis tutorial html en javascript volgt want jouw code is gewoon niet goed. Bij html en javascript kun je niet gewoon de code nog een keer kopieren om nogmaals het zelfde te bereiken omdat de code niet van boven naar beneden wordt uit gevoerd. Je hebt nu functies dubbel en ook nog eens het formulier dubbel waardoor niet meer duidelijk is naar welk element wordt verwezen in de code.

zondag 28 april 2013 12:46

Acties:

Japius

Je gebruikt onder andere twee keer een formulier met dezelfde name. Niet handig. Daarnaast zou ik ervoor kiezen altijd alle regels in javascript af te sluiten met een ; om issues te voorkomen in verschillende browsers.

Je zegt: het stopt met werken. Gebruik je Firebug of een andere toolbar die je helpt met ontwikkelen? Gebruik bijvoorbeeld Google Chrome en druk op F12 om de toolbar te openen. Ik denk dat er een wereld voor je open gaat.

[ Voor 0% gewijzigd door Japius op 28-04-2013 12:47 . Reden: bbcode vs html ]

zondag 28 april 2013 13:46

Acties:

zondag 28 april 2013 14:19

Topicstarter

ok om posttoast tevreden te stellen

heb ik andere poging gedaan (1e was maar een snelle schets)

Maar kan iemand me uitleggen waarom in het 1e voorbeeld de dropdown functie wel werkt en in het 2e niet?
Dat was juist de reden waarom ik meerdere form tags had.

Dropdown selectie werkt

HTML:

<!DOCTYPE html>
<html>
<body>

    <h3>Send e-mail to test@test.com:</h3>

    <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

        <input type="radio" name="Urgentie" value="Best Effort"> Best Effort<br>
        <input type="radio" name="Urgentie" value="Next day"> Next day<br><br>

        Name:<br>
        <input type="text" name="Aanvrager" value="your name"><br>
        E-mail:<br>
        <input type="text" name="E-Mail" value="your email"><br>
        Comment:<br>
        <input type="text" name="Commentaar" value="your comment" size="50"><br><br><br>
    </form> 
        
<form name="Vestiging">
    <select name="Vestiging" size="1" onChange="showtext()">
    <option value=>Selecteer Vestiging</option>
    <option value=>Amsterdam</option>
    <option value=>Rotterdam</option>
    <option value=>Den Haag</option>
    </select><br>
    <textarea rows=5 cols=30 wrap="virtual" name="text"></textarea>
</form>

<script language="javascript">
<!--
    var shortcut=document.Vestiging
    var descriptions=new Array()

    //extend this list if neccessary to accomodate more selections
    descriptions[0]="Selecteer Vestiging"
    descriptions[1]="aaaa"
    descriptions[2]="bbbb"
    descriptions[3]="cccc"

    shortcut.text.value=descriptions[shortcut.Vestiging.selectedIndex]
    function gothere(){
    location=shortcut.Vestiging.options[shortcut.Vestiging.selectedIndex].value
    }

    function showtext(){
    shortcut.text.value=descriptions[shortcut.Vestiging.selectedIndex]
    }
//-->
</script>

    

        <br>
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
        
        
        
        
    </form>

</body>
</html>

Dropdown selectie werkt niet

HTML:

<!DOCTYPE html>
<html>
<body>

    <h3>Send e-mail to test@test.com:</h3>

    <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

        <input type="radio" name="Urgentie" value="Best Effort"> Best Effort<br>
        <input type="radio" name="Urgentie" value="Next day"> Next day<br><br>

        Name:<br>
        <input type="text" name="Aanvrager" value="your name"><br>
        E-mail:<br>
        <input type="text" name="E-Mail" value="your email"><br>
        Comment:<br>
        <input type="text" name="Commentaar" value="your comment" size="50"><br><br><br>
        
        
    <name="Vestiging">
    <select name="Vestiging" size="1" onChange="showtext()">
    <option value=>Selecteer Vestiging</option>
    <option value=>Amsterdam</option>
    <option value=>Rotterdam</option>
    <option value=>Den Haag</option>
    </select><br>
    <textarea rows=5 cols=30 wrap="virtual" name="text"></textarea>

<script language="javascript">
<!--
    var shortcut=document.Vestiging
    var descriptions=new Array()

    //extend this list if neccessary to accomodate more selections
    descriptions[0]="Selecteer Vestiging"
    descriptions[1]="aaaa"
    descriptions[2]="bbbb"
    descriptions[3]="cccc"

    shortcut.text.value=descriptions[shortcut.Vestiging.selectedIndex]
    function gothere(){
    location=shortcut.Vestiging.options[shortcut.Vestiging.selectedIndex].value
    }

    function showtext(){
    shortcut.text.value=descriptions[shortcut.Vestiging.selectedIndex]
    }
//-->
</script>

    

        <br>
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
        
        
        
        
    </form>

</body>
</html>

Acties:

Raven__NL schreef op zondag 28 april 2013 @ 13:46:
ok om posttoast tevreden te stellen heb ik andere poging gedaan (1e was maar een snelle schets)

Dat vind ik aardig van je

Maar kan iemand me uitleggen waarom in het 1e voorbeeld de dropdown functie wel werkt en in het 2e niet?
Dat was juist de reden waarom ik meerdere form tags had.

Gebruik je een HTML validator om te kijken of je (typ)fouten maakt? Zo nee, zeker even doen. Dan had je gezien dat je op regel 20 van je nieuwe voorbeeld <select> zou moeten hebben staan. Je hebt nu <name> en dat is geen bestaand HTML element

Geloof me: je moet 1 formulier niet over meerdere <form>'s gaan verdelen. Het is niet alleen onnodig, het is ook nog eens onjuist.

zondag 28 april 2013 14:58

Acties:

zondag 28 april 2013 15:04

Topicstarter

Ik geloof je zeker hoor

Als ik jou suggestie aanpast dan werkt het nog niet. Ik vind het wel apart waarom het wel werkt als ik hem onder een <form> tag plaats zoals in het 1e voorbeeld.

Ik doe dit onder notepad++ btw

Acties:

R4gnax

Raven_NL, het is moeilijk om uit je bestaande code iets zinnigs te brouwen, aangezien te veel onderdelen scheef in elkaar zitten. Het is eigenlijk tegen de regels, zoals eerder gezegd is door posttoast, maar ik heb iets voor je neergezet wat ongeveer is waar je naar zou moeten streven. Ik zou je adviseren om onderstaande eens goed door te nemen en er op door te bouwen.

Dit gebruikt trouwens jQuery, wat wel zo makkelijk voor iemand die naar eigen zeggen weinig ervaring met JS heeft. De normale DOM APIs zijn een rommelbende waar je als beginner zeker niet mee bezig moet willen zijn.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Send e-mail to test@test.com:</title>
  <style>
    .form-layout,
    .form-layout > li,
    .form-layout > dt,
    .form-layout > dd {
      display    : block;
      list-style : none outside;
      margin     : 0;
      padding    : 0;     
    }   
    .form-layout > dt > label:after {
      content : ":";
    }
    
    .form-layout-inline > li {
      display : inline;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    // Use jQuery's DOM ready handling to ensure the DOM is safe for JavaScript to work on.
    $( document ).ready( function() {
      // Maintain a map of value -> description for the select field(s).
      var descriptions = {
        "Amsterdam" : "aaaa",
        "Rotterdam" : "bbbb",
        "Den Haag"  : "cccc"
      };
       
      // Hook up a change event listener to the form, which listens for changes on any nested
      // element that contains a `data-description-for` attribute.
      $( "#form-mailto" ).on( "change", "[data-description-for]", function( event ) {
        var el, id, value;

        // Re-wrap the element that emitted the change event with a jQuery selector.
        el = $( this );

        // Retrieve the value of the `data-description-for` attribute using jQuery's data API.
        id = el.data( "descriptionFor" );
        
        // Map the value of the input / select / etc. element through the descriptions map.
        // If no mapped value exists, take the empty string.
        value = descriptions [ el.val() ] || "";

        // Find the element indicated by the id pulled out of the data attribute and set its
        // value to the mapped value.
        $( "#" + id ).val( value );       
      });
      
    });
</script>
</head>
<body>

  <h3>Send e-mail to test@test.com:</h3>

  <form id="form-mailto" action="mailto:someone@example.com" method="post" enctype="text/plain" autocomplete="off">
    <!-- Use fieldsets to group the form, not multiple forms -->
    <fieldset>
      <legend>Urgentie</legend>
      <!-- Use lists for structuring your form  --> 
      <ul class="form-layout form-layout-inline">
        <!-- Labels provide a larger clickable area for these radio buttons -->
        <li><label><input type="radio" name="Urgentie" value="Best Effort"> Best Effort</label></li>
        <li><label><input type="radio" name="Urgentie" value="Next day"> Next day</label></li>
      </ul>
    </fieldset>

    <fieldset>
      <legend>Details</legend>
      <dl class="form-layout">
        <!-- Also use labels for regular fields; better UX for disabled users -->
        <dt><label for="form-mailto-name">Name</label></dt>
        <!-- Set a mask text using `placeholder`; don't abuse the initial form value -->
        <dd><input id="form-mailto-name" name="Aanvrager" placeholder="your name"/></dd>
        <dt><label for="form-mailto-email">E-mail</label></dt>
        <dd><input id="form-mailto-email" name="E-Mail" placeholder="your email" /></dd>
        <dt><label for="form-mailto-comment">Comment</label></dt>
        <dd><input id="form-mailto-comment" name="Commentaar" placeholder="your comment" size="50" /></dd>
      </dl>
    </fieldset>
    
    <fieldset>
      <legend>Vestiging</legend>
      <ul class="form-layout">
        <li>
          <!-- Uses the `data-description-for` attribute to hook fields together with our scripting. -->
          <select name="Vestiging" data-description-for="form-mailto-office-text">
            <option value="-" disabled="disabled" selected="selected">Selecteer Vestiging</option>
            <option value="Amsterdam">Amsterdam</option>
            <option value="Rotterdam">Rotterdam</option>
            <option value="Den Haag">Den Haag</option>
          </select>
        </li>
        <li>
          <textarea id="form-mailto-office-text" rows=5 cols=30 wrap="virtual" name="text"></textarea>
        </li>
      </ul>
    </fieldset>
    
    <input type="reset" value="Reset" />
    <input type="submit" value="Send" />
  </form>
</body>
</html>

zondag 28 april 2013 15:25

Acties:

zondag 28 april 2013 16:55

Topicstarter

R4gnax schreef op zondag 28 april 2013 @ 15:04:
Raven_NL, het is moeilijk om uit je bestaande code iets zinnigs te brouwen, aangezien te veel onderdelen scheef in elkaar zitten.

Lol ik weet het was ook mijn 1e poging. Dingen nakijken en editten in een bestaand iets lukt me nog wel. Maar iets van 0 opbouwen is een ander verhaal.

Het is eigenlijk tegen de regels, zoals eerder gezegd is door posttoast, maar ik heb iets voor je neergezet wat ongeveer is waar je naar zou moeten streven. Ik zou je adviseren om onderstaande eens goed door te nemen en er op door te bouwen.

Wow dat was niet nodig hoor

Daarvoor kwam ik hier niet om hulp vragen. In iedergeval bedankt $_/-\o_$ $_/-\o_$ ik zal dit eens bestuderen en hierop verder gaan (als het me lukt)

Acties:

zondag 28 april 2013 17:03

Topicstarter

Nou ik heb er even naar gekeken en meegespeeld maar vind dit ziet er geavanceerder uit als waar ik mee bezig was. Ik probeer nu een niet veld toe te voegen die in principe hetzelfde werkt als het vestiging veld. Alleen daar komt dan een andere selectie in te staan.

Form-layout c/p daaronder is het probleem niet. Ik zit een beetje met het script zelf te spelen en het is me niet duidelijk als ik een nieuw script moet maken voor het nieuwe veld of dat ik het bij de bestaande erbij kan editten. Op dit moment heb ik de 2e dropdown selectie toegevoegd alleen als ik daar iets veranderd dan gebeurd dat bij de vestiging box. Ik zie ff niet waar ik dat kan aanpassen?

Acties:

R4gnax

Let even op het data-description-for atribuut in de HTML en waar die heen wijst.

zondag 28 april 2013 18:14

Acties: