Home > database >  Passing value of number field to a JavaScript function
Passing value of number field to a JavaScript function

Time:12-11

First of all: Good day to you all! Second: I am almost ashamed to ask this, for I think I forget something small. Allright zo here we go:

I have a website on which I can calculate wether a number (specified by the user) is a valid BSN (Social Security Number). This is the HTML:

`

  <script type="text/JavaScript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>

<body>

  <header>
    <h1>BSN CHECKER</h1>
  </header>
  <div >
    <p>Welkom op deze website. Op deze pagina kunt u controleren of een bepaald nummer voldoet aan de 11-proef en of het
      dus een geldig BSN is. Allereerst wordt uitgelegd hoe de 11-proef gedaan wordt. Hierna kunt u uw eigen getal
      invoeren en kijken of het voldoet aan de 11-proef.</p>
    <h2>De berekening</h2>
    <p>
      Wat is de elfproef eigenlijk? De elfproef is een rekenkundige methode die wordt uitgevoerd op een negen- of
      tiencijferig nummer. In de berekening worden aan de afzondelijke getallen gewichten gekoppeld. Het getal en het
      gewicht worden met elkaar vermenigdvuldigd en daarna bij de andere getallen opgeteld. Het totaal wordt gedeel door
      11. Hier moet een geheel getal uitkomen (een integer). Tijd voor een voorbeeld. We gaan uit van het volgende
      nummer: 415195895.
    </p>
    <div >
      x = ((9*4) (8*1) (7*5) (6*1) (5*9) (4*5) (3*8) (2*9) (-1*5))/11<br>
      x = (36 8 35 6 45 20 24 18 -5)/11<br>
      x = 187/11<br>
      x = 17
    </div>
    <p>Uit bovenstaande berekening komt een geheel getal. Het nummer is dus een geldig BSN. Laten we de berekening eens
      doen met een ander nummer: 987654321</p>
    <div >
      x = ((9*9) (8*8) (7*7) (6*6) (5*5) (4*4) (3*3) (2*2) (-1*1))/11<br>
      x = (81 64 49 36 25 16 9 4 -1)/11<br>
      x = 283/11<br>
      x = 25,72
    </div>
    <p>Uit bovenstaande berekening komt een gebroken getal (decimaal). Dit is dus geen geldig BSN.</p>
    <h2>Doe de check</h2>
    <p>Voer in onderstaand veld een nummer in van 9 cijfers lang. Klik hierna op de knop <em>Voer elfproef uit</em>.
      Vervolgens verschijnt onder de knop of uw getal wel geen geldig BSN is.</p>
    <form>
      <input id="nummer" type="number" maxlength="9" minlength="9"> <br>
      <input id="knop" type="button" value="Voer elfproef uit">
    </form>
    <p id="bsn"></p>
  </div>
  <footer>
    <p id="copyright">&#xA9; Freddy Meijer</p>
  </footer>
  <script src="js/bsn_check.js" type="text/JavaScript"></script>
</body>

So in the form I have an input for a 9 digit number. When I push the button the next JavaScript should be executed:

`

function bsn_check(bsn) {
    var getal0 = parseInt(bsn.toString().slice(0, 1));
    var getal1 = parseInt(bsn.toString().slice(1, 2));
    var getal2 = parseInt(bsn.toString().slice(2, 3));
    var getal3 = parseInt(bsn.toString().slice(3, 4));
    var getal4 = parseInt(bsn.toString().slice(4, 5));
    var getal5 = parseInt(bsn.toString().slice(5, 6));
    var getal6 = parseInt(bsn.toString().slice(6, 7));
    var getal7 = parseInt(bsn.toString().slice(7, 8));
    var getal8 = parseInt(bsn.toString().slice(8));

    var calc_bsn = ((9 * getal0)   (8 * getal1)   (7 * getal2)   (6 * getal3)   (5 * getal4)   (4 * getal5)   (3 * getal6)   (2 * getal7)   (-1 * getal8)) / 11;
    if (Number.isInteger(calc_bsn)) {
        var result = "Het door u ingevoerde nummer is een geldig BSN nummer.";
    } else {
        var result = "Het door u ingevoerde nummer is geen geldig BSN nummer.";
    }
    return result;
}
document.getElementById("bsn").innerHTML = bsn_check(892808354);

` You see a number in the last rule of the javascript. That number should be the number of the user. Can some one give me a hint on what I am missing? Do need JQuery for example? I am not very familiar whit that.

Thanks in advance!

I tried to work with JQuery but got lost in selectors. It didn't work (I made mistakes for sure). I try to pass a number from my form to my JavaScript function.

CodePudding user response:

No need for jQuery. Simply select the number input:

const numberInput = document.getElementById("nummer")

and then call your function with the input value:

bsn_check(numberInput.value)

You can even do everything inside your HTML:

<input
    id="knop"
    type="button"
    value="Voer elfproef uit"
    onclick="document.getElementById('bsn').innerHTML = bsn_check(document.getElementById('nummer').value);">

CodePudding user response:

may be that...

const formBSN = document.querySelector('#form-bsn')
  ;
formBSN.onsubmit = e =>
  {
  e.preventDefault(); 

  let calc_bsn = [...formBSN.nummer.value].map(Number)
    .reduce( (sum,n,i) => sum  = (i<8) ? (9-i)*n : -n ,0) / 11
  , isBSN = Number.isInteger(calc_bsn)
    ;
  formBSN.bsn.textContent = `Het door u ingevoerde nummer is ${isBSN?'':'g'}een geldig BSN nummer.`

  formBSN.bsn.classList.toggle('BSN_OK', isBSN)
  }
formBSN.oninput =_=> { formBSN.bsn.textContent = '' }
input {
  width         : 10em;
  padding-left  : 1em;
  display       : block;
  margin-bottom : .7em;
  }
output {
  display    : block;
  margin-top : .7em;
  min-height : 2em;
  color      : orangered;
  }
output.BSN_OK {
  color : green;
  }
<header>
    <h1>BSN CHECKER</h1>
  </header>
  <div >
    <p>Welkom op deze website. Op deze pagina kunt u controleren of een bepaald nummer voldoet aan de 11-proef en of het
      dus een geldig BSN is. Allereerst wordt uitgelegd hoe de 11-proef gedaan wordt. Hierna kunt u uw eigen getal
      invoeren en kijken of het voldoet aan de 11-proef.</p>
    <h2>De berekening</h2>
    <p>
      Wat is de elfproef eigenlijk? De elfproef is een rekenkundige methode die wordt uitgevoerd op een negen- of
      tiencijferig nummer. In de berekening worden aan de afzondelijke getallen gewichten gekoppeld. Het getal en het
      gewicht worden met elkaar vermenigdvuldigd en daarna bij de andere getallen opgeteld. Het totaal wordt gedeel door
      11. Hier moet een geheel getal uitkomen (een integer). Tijd voor een voorbeeld. We gaan uit van het volgende
      nummer: <b>415195895</b>.
    </p>
    <div >
      x = ((9*<b>4</b>) (8*<b>1</b>) (7*<b>5</b>) (6*<b>1</b>) (5*<b>9</b>) (4*<b>5</b>) (3*<b>8</b>) (2*<b>9</b>) (-1*<b>5</b>))/11<br>
      x = (36 8 35 6 45 20 24 18 -5)/11<br>
      x = 187/11<br>
      x = <b>17</b>
    </div>
    <p>Uit bovenstaande berekening komt een geheel getal. Het nummer is dus een geldig BSN. Laten we de berekening eens
      doen met een ander nummer: 987654321</p>
    <div >
      x = ((9*9) (8*8) (7*7) (6*6) (5*5) (4*4) (3*3) (2*2) (-1*1))/11<br>
      x = (81 64 49 36 25 16 9 4 -1)/11<br>
      x = 283/11<br>
      x = 25,72
    </div>
    <p>Uit bovenstaande berekening komt een gebroken getal (decimaal). Dit is dus geen geldig BSN.</p>
    <h2>Doe de check</h2>
    <p>Voer in onderstaand veld een nummer in van 9 cijfers lang. Klik hierna op de knop <em>Voer elfproef uit</em>.
      Vervolgens verschijnt onder de knop of uw getal wel geen geldig BSN is.</p>

  <form id="form-bsn">                     
    <input name="nummer" type="number" max="999999999" min="100000000" required placeholder="9 cijfers lang">
    <button>Voer elfproef uit</button>
    <output name="bsn"></output>
  </form>
</div>
<footer>
  <p id="copyright">&#xA9; StackOverflow - Mister Jojo </p>
</footer>

  • Related