Generate a txt report through JavaScript and HTML

Question

I have written HTML \ JavaScript code. The HTML page getting the three details from the end user. Based on the input from the user i want that javascript generate the barcode numbers and download the report as txt file. Here variable "B12" is a Barcode number.

Code is shown here :

const AL = document.getElementById("N1").value;

var to      = Number(document.getElementById("N3").value);
var i       = 1
var barcode = "1" + document.getElementById("N2").value;

while (i < to) {
  const myArray = barcode.split("");
  let B1  = myArray[1] * 8
  let B2  = myArray[2] * 6
  let B3  = myArray[3] * 4
  let B4  = myArray[4] * 2
  let B5  = myArray[5] * 3
  let B6  = myArray[6] * 5
  let B7  = myArray[7] * 9
  let B8  = myArray[8] * 7
  let B9  = B1 + B2 + B3 + B4 + B5 + B6 + B7 + B8
  let B10 = B9 % 11
  let B11 = 11 - B10
  B11 = B11 === 10 ? '0' : B11;
  B11 = B11 === 11 ? '5' : B11;
  rem = barcode.substring(1);
  let B12 = AL + rem + B11 + "IN"
  i++;
  barcode++;
}

<form id="my-form">

  <label for="T1">BARCODE FIRST TWO CHARATER</label><br><br>
  <input type="" text " maxlength="2 " onkeyup="this.value=t his.value.toUpperCase(); " id="N1 " onchange="validity.valid||(value='' ) " required> <br><br>
                                                                                                                                  
   <label for="T2 ">Barode Starting Eight Numbers:</label><br><br>
   <input type="text " pattern="[0-9]{8} " maxlength="8 " onchange="validity.valid||(value='' ) " id="N2 " required ><br><br> 
                                                                                                    
    <label for="T3 ">Number of Barcode (Max 1000):</label><br><br>
<input type="number "  id="N3 " min="1 " max="1000 " onchange="validity.valid||(value='' ) "  required ><br><br>    
                                                                                                                    
<center><button type="submit " name="myButton ">Submit</button></center>
                                                                                                    
</form>

I want that javascript loop generate the report with the variable value "B12" and download as a text file while user click on submit button. Please help in the matter.

Does [this question](https://stackoverflow.com/q/11620698/14469685) answer yours? — Lakshya Raj, Nov 20 '22 at 15:49
Everything seems wrong to me in your code, you mix numeric values with strings, your variables have abstract names, etc. I would have liked to help you, but I don't understand anything about your generation logic, even after some research internet on Bar Codes... — Mister Jojo, Nov 20 '22 at 17:52
@MisterJojo Here my required barcode contains 13 alpha numeric digits(2+9+2). Example : RG777777784IN RG777777798IN. Here first two alphabet is type of article and last two alphabet is country code. Now numeric value having from third to eleventh number. This numeric value having nine digit. Out of nine digit first eight digit having sequence number and last one digit will be generated on calculation shown [here](https://3.bp.blogspot.com/-HqJuTbWN9og/VJjhuwjpanI/AAAAAAAAGGg/0pVvln1hJRg/s1600/calc.png) — Arjun Khandwani, Nov 21 '22 at 01:43
@MisterJojo Also if the ninth numeric value is 10 then it should be change to 0 and if ninth numeric value is 11 then is should be change to 5. For a example : RG777777775IN and RG000044770IN — Arjun Khandwani, Nov 21 '22 at 01:46
@MisterJojo Now i want that user enter the first Alphabet , barcode eight digit and number of barcode required . Based on that value text file download with all that barcode numbers . — Arjun Khandwani, Nov 21 '22 at 03:14
can `12` or `00000012` be a valid `Barode Starting Eight Numbers:` ? — Mister Jojo, Nov 21 '22 at 03:24
@MisterJojo Yes 00000012 is also valid barcode . Therefore I have added 1 before number `var barcode = "1" + document.getElementById("N2").value; ` And then remove it by the below code `rem = barcode.substring(1);` — Arjun Khandwani, Nov 21 '22 at 03:48

score 0 · Accepted Answer · answered Nov 21 '22 at 05:24

Maybe you can try that...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barcode Number Generaot</title>
<style>
  body {
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 18px;
    }
  legend   { font-weight: bold; padding: 0 .8em; }
  fieldset { margin: 1em; width: 15em; }
  label, input, button, pre  { display: block; float: left; clear: both; margin-top: 0.2em; }
  label   { margin-top: 0.7em; font-size: .9em;}
  input   { text-align: center; }
  button  { margin-top: 2em; width: 6em; }
  fieldset button:last-of-type { clear: none; float: right; }
  pre { font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: .8em;}
</style>
</head>
<body>
  <form id="my-form" action="#">
    <fieldset>
      <legend>BarCode</legend>
      <label>1st TWO characters</label> 
      <input name="N1" type="text" autocomplete="off" pattern="[A-Za-z0-9]{2}" required > 
      <label>1st Eight digits:</label> 
      <input name="N2" type="number" min="1" max="99999998" required > 
      <label>Number of Barcode (Max 1000):</label> 
      <input name="N3" type="number" min="1" max="10000" required value="1">
      <button type="reset">clear</button>
      <button type="submit">generate</button>
    </fieldset>
  </form>
  <label>Generated BarCodes:</label>
  <pre id="BC-genered"></pre>
<script>
  const
    CRcode = `\n` // carriage return
  , writeToTextFile = (text, fileName) => 
      {
      let textFile = null;
      const makeTextFile = (text) => 
        {
        const data = new Blob([text], { type: 'text/plain' });
        if (textFile !== null) 
          {
          window.URL.revokeObjectURL(textFile);
          }
        textFile = window.URL.createObjectURL(data);
        return textFile;
        };
      let link = document.createElement('a');
      link.setAttribute('download', fileName);
      link.href = makeTextFile(text);
      link.click();
      }
  , BCgen  = document.querySelector('#BC-genered')
  , myForm = document.querySelector('#my-form')
  , digtsM = [8,6,4,2,3,5,9,7]
    ;
  myForm.N1.oninput = () =>
    {
    myForm.N1.value = myForm.N1.value.toUpperCase();
    if (myForm.N1.value.length > 2)
      myForm.N1.value = myForm.N1.value[0] + myForm.N1.value[2];
    }
  myForm.N3.oninput = () =>
    {
    let N2_max = 99999999 - myForm.N3.valueAsNumber;
    if ( myForm.N2.valueAsNumber > N2_max)
      myForm.N2.valueAsNumber = N2_max;
    myForm.N2.max = N2_max;
    }
  myForm.onreset = () =>
    {
    BCgen.textContent = '';
    }
  myForm.onsubmit = e =>
    {
    e.preventDefault()  // disable submit (no page reloading in this case)
    BCgen.textContent = '';

    let B_1_8_CodeN = myForm.N2.valueAsNumber;

    for (let i=myForm.N3.valueAsNumber; i--;)
      {
      let 
        Bcode = B_1_8_CodeN.toString(10).padStart(8, '0')
      , B11 = 11 - ([...Bcode].map((x,i)=> x *digtsM[i]).reduce((sum,v)=>sum+v) % 11)
        ;
      B11 = (B11 === 10) ? 0 : ( B11 === 11) ? 5 : B11;

      BCgen.textContent += myForm.N1.value
                                + Bcode
                                + B11
                                + 'IN'
                                + CRcode; 
      B_1_8_CodeN++;         
      }
    writeToTextFile(BCgen.textContent, `${myForm.N3.value}_Barcodes_${myForm.N1.value}_${myForm.N2.value}.txt`);            
    }
</script>
</body>
</html>

Generate a txt report through JavaScript and HTML

1 Answers1