Auteur Topic: Javascript connecten met form  (gelezen 2329 keer)

0 leden en 1 gast bekijken dit topic.

OnlineRageKiller

  • DigitalPlace Lid
  • *
  • Berichten: 200
  • Karma: -10
  • Talk is cheap, show me the code!
    • Bekijk profiel
Javascript connecten met form
« Gepost op: november 23, 2015, 12:10:16 am »
  • [+1]0
  • [-1]0
  • Ik wil dat als iemand een getal tussen de 1 en de 10 invoert, dat er dan een bepaald bericht word getoond, maar hoe verbind ik de form met de javascript? en hoe connect ik de knop met de form? of heb ik dat al gedaan door name = "invoer" bij allebei te zetten
    Hier is mijn code


    <p class = "inputtext">


    </p>



    <form name = "opdracht1week4" onsubmit = "return validateForm()" method = "post">
    <table>
    <tr>
    <td><input type = "text" name = "invoer" value = "0"></td>
    <td><input type = "button" name = "invoer" value = "check"></td>
    </tr>
    </table>
    </form>


    <p class = "inputtext">


    </p>




    <!------------------ SCRIPT ------------------>
    <script>
    var x = 5;
    var text = "mijntekst";
    var mijnDouble = 5.466;


    //Controleer of x een getal tussen 0 en 10 is.
        if (x < 1 || x > 10) {
            text = "Input not valid";
        } else {
            text = "Input OK";
        }




    $(".inputtext").html (text);


    </script>

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2674
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: Javascript connecten met form
    « Reactie #1 Gepost op: november 23, 2015, 10:06:00 pm »
  • [+1]0
  • [-1]0
  • Nou als aller eerste moet je bij elke form element de name anders hebben. Met name kun je namelijk alle input velden uit elkaar houden!
    Ik zal morgen ochtend eens wat voor je fixen, Stack. Maar ik denk dat je met Google en jQuery al een heel eind moet komen...


    gertmenkel

    • Actief DigitalPlace Lid
    • **
    • Berichten: 1125
    • Karma: 131
      • Bekijk profiel
    Re: Javascript connecten met form
    « Reactie #2 Gepost op: november 23, 2015, 10:25:05 pm »
  • [+1]1
  • [-1]0
  • Misschien wel zo handig om dit in pure javascript te doen, omdat jQuery lang niet altijd een optie is...

    Als je Javascript gebruikt heb je veel meer aan de id dan aan de name van een element. De name wordt eigenlijk vooral gebruikt aan de serverzijde, maar binnen de browser is dat niet echt nuttig. Daarbij zijn dubbele name-attributen zelden handig, is het niet de bedoeling dat je table elementen gebruikt om forms uit te lijnen en moet je geen javascript binnen HTML attributen zetten (onsubmit= bijvoorbeeld, zeer lelijk en gaat tegen de principes van HTML in).

    Verder werken buttons vooral met click-events, niet met submit (tenzij je button type="submit doet")

    Je kunt HTML en Javascript koppelen met code zoals:
    document.getElementById("elementId")
     .addEventListener('event', function(e){}, false);

    Zie ook:
    element.addEventListener op w3schools
    document.getElementById op w3schools

    Zie hieronder voor een uitgebreider voorbeeld
    <html lang="en">
      <!-- Paginainformatie -->
      <head>
        <title>Stack9modz</title>
        <!-- Tekenset: onderdeel van de HTML5-standaard -->
        <meta charset="utf-8">

        <!-- CSS. Het is beter als je deze in een apart bestand zet -->
        <style>
          /* Maak een tabelrij van div.table*/
          div.table > div {
            display: table-row;
          }
          /* Alle divs die in een tabelrij zitten, wordt een tabelcel*/
          div.table > div > div{
            display: table-cell;
            padding: 4px 8px;
          }

          /* Alles wat in een tabelcel zit strekken naar 100% breedte*/
          div.table>div>div>*{
            width: 100%;
          }

          /* Limiteer de breedte van de output*/
          div#output{
            max-width: 200px;
          }

          /*
            Maak de output wat kleurrijker.
            Geef de goede paragrafen een groene achterground, de slechte een rode
          */
          p.good {
            background-color: green;
            color: white;
            font-weight: bold;
          }
          p.good:nth-child(even)
          {
            background-color: lightgreen;
          }

          p.bad {
            background-color: darkred;
            color: white;
            font-weight: bold;
          }
          p.bad:nth-child(odd)
          {
            background-color: red;
            color: black;
          }
        </style>
      </head>
      <!-- Paginainhoud -->
      <body>
        <!-- Gebruikt om de invoer uit te lijnen-->
        <div class="table">
            <div>
              <!-- Labels voor inputs maken de pagina beter compatible met schermlezers etc. -->
              <label for="input">Voer een getal in:</label>
              <div>
                <!--
                  HTML5 type "number" is hier handig, ook de "min" en "max" attributen
                  zijn hier wel nuttig
                -->
                <input name="input" id="input" type="number" value="0" min="0" max="10">
              </div>
            </div>
            <div>
              <!-- Eerste cel is leeg-->
              <div></div>
              <!-- Tweede cel bevat alleen de button -->
              <div><input type = "button" value="check" id="checkButton"></div>
            </div>
        </div>

        <!-- De output begint leeg, hier worden later paragrafen aan toegevoegd -->
        <div id="output">
        </div>
        <script>
          // Als de pagina geladen is
          window.addEventListener('load', function(){
            // Haal de button op
            var button = document.getElementById("checkButton");

            // Koppel een event listener voor wanneer er op wordt geklikt
            button.addEventListener('click', function(){
                // haal het invoerveld op
                var inputField = document.getElementById("input");
                // Haal de waarde uit het invoerveld
                var value = inputField.value;

                // Maak alvast een nieuwe paragraaf aan voor de output
                var newParagraph = document.createElement("p");

                // Wat standaardwaarden
                var valueString = "", cssclass="bad";

                // Check of de input geldig is
                if (validate(value)===true)
                {
                  // Stel de waarden in op een positief resultaat
                  valueString = value + " is valid";
                  cssclass = "good";
                } else {
                  // Stel de waarden in op een negatief resultaat
                  valueString = value + " is invalid";
                }
                // Maak een nieuwe text node aan voor de tekst
                var newLine = document.createTextNode(valueString);

                // Koppel de tekst aan de paragraaf
                newParagraph.appendChild(newLine);

                // Geef de nieuwe paragraaf zijn CSS klasse
                newParagraph.setAttribute('class', cssclass);

                // Zoek de div op waar de output naartoe moet
                var output = document.getElementById("output");

                // Voeg de paragraaf toe aan de output
                output.appendChild(newParagraph);
            }, false);
          });

          // Deze functie controleert of voor een waarde geldt 0 <= x <= 10
          function validate(input)
          {
            // Maak een int van de input, indien er tekst is ingevoerd (buggy!)
            input = parseInt(input);

            // Check of de input < 0 of > 10 is
            if (input < 0 || input > 10)
              return false;

            return true;
          }
        </script>
      </body>
    </html>
    « Laatst bewerkt op: november 23, 2015, 10:27:48 pm door gertmenkel »
    ThePirateBay AFK
    Bekijk de vrije en gratis documentaire!