How can I send data from a form to a class and visualize it?

Question

I need to pass some data collected from a form and pass it to a class and visualize them, I have a problem sending the data, since I can not pick it up

 class F1{ constructor(num,clien,direc,nife,nifd,div,sub,iva){ this.num = num this.clien = clien this.direc = direc this.nife = nife this.nifd = nifd this.div = div this.sub = sub this.iva = iva } }

 <form name="formu" id="formu"> num: <input type="text" name="num" value=""><br><br> clien: <input type="text" name="clien" value=""><br><br> direc: <input type="text" name="direc" value=""><br><br> NIFe: <input type="text" name="nife" value=""><br><br> NIFd: <input type="text" name="nifd" value=""><br><br> div: <input type="text" name="div" value=""><br><br> sub: <input type="text" name="sub" value=""><br><br> iva: <input type="text" name="iva" value=""><br><br> <input type="submit" value="Enviar"> </form>

Thanks

Answer 1

If i understood your question you can try this code:

i used setter and getter; document.forms. for more information you can read:

w3schools: setter and getter

w3schools: forms validation

another link where you can try other information is: https://developer.mozilla.org/

JS

//object userInput
var userInput = {
  num:"",
  clien:"",
  direc:"",
  nife:"",
  nifd:"",
  div:"",
  sub:"",
  iva:"",
  //method set
  set setNum(num){
    this.num=num;
  },
  set setClien(clien){
    this.clien=clien;
  },
  set setDirec(direc){
    this.direc=direc;
  },
  set setNife(nife){
    this.nife=nife;
  },
  set setNifd(nifd){
    this.nifd=nifd;
  },
  set setDiv(div){
    this.div=div;
  },
  set setSub(sub){
    this.sub=sub;
  },
  set setIva(iva){
    this.iva=iva;
  },
  //method get
  get getNum(){
   return this.num;
  },
  get getClien(){
   return this.clien;
  },
  get getDirec(){
   return this.direc;
  },
  get getNife(){
   return this.nife;
  },
  get getNifd(){
   return this.nifd;
  },
  get getDiv(){
   return this.div;
  },
  get getSub(){
   return this.sub;
  },
  get getIva(){
   return this.iva;
  }
};

function myFunction2(){
  const myForm=document.forms["formu"];//form

 //put into object UserInput the user value
  userInput.setNum=myForm["num"].value;
  userInput.setClien=myForm["clien"].value;
  userInput.setDirec=myForm["direc"].value;
  //and so on...

  //print the value present in userInput object
  console.log(userInput.getNum);
  console.log(userInput.getClien);
  console.log(userInput.getDirec);

  return false;
}

HTML

<!DOCTYPE html>
<html>

<body>
  <form name="formu" id="formu" action="" onsubmit="return myFunction2()" method="post">
    num:
    <input type="text" name="num" value=""><br><br>
    clien:
    <input type="text" name="clien" value=""><br><br>
    direc:
    <input type="text" name="direc" value=""><br><br>
    NIFe:
    <input type="text" name="nife" value=""><br><br>
    NIFd:
    <input type="text" name="nifd" value=""><br><br>
    div:
    <input type="text" name="div" value=""><br><br>
    sub:
    <input type="text" name="sub" value=""><br><br>
    iva:
    <input type="text" name="iva" value=""><br><br>
    <input type="submit" value="Enviar">
  </form>
</body>

</html>

Snippet code

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA_Compatible" content="ie=edge"> <title> Form</title> <script> //object userInput var userInput = { num:"", clien:"", direc:"", nife:"", nifd:"", div:"", sub:"", iva:"", //method set set setNum(num){ this.num=num; }, set setClien(clien){ this.clien=clien; }, set setDirec(direc){ this.direc=direc; }, set setNife(nife){ this.nife=nife; }, set setNifd(nifd){ this.nifd=nifd; }, set setDiv(div){ this.div=div; }, set setSub(sub){ this.sub=sub; }, set setIva(iva){ this.iva=iva; }, //method get get getNum(){ return this.num; }, get getClien(){ return this.clien; }, get getDirec(){ return this.direc; }, get getNife(){ return this.nife; }, get getNifd(){ return this.nifd; }, get getDiv(){ return this.div; }, get getSub(){ return this.sub; }, get getIva(){ return this.iva; } }; function myFunction2(){ const myForm=document.forms["formu"];//form //put into object UserInput the user value userInput.setNum=myForm["num"].value; userInput.setClien=myForm["clien"].value; userInput.setDirec=myForm["direc"].value; //and so on... //print the value present in userInput object console.log(userInput.getNum); console.log(userInput.getClien); console.log(userInput.getDirec); return false; } </script> </head> <body> <form name="formu" id="formu" action="" onsubmit="return myFunction2()" method="post"> num: <input type="text" name="num" value=""><br><br> clien: <input type="text" name="clien" value=""><br><br> direc: <input type="text" name="direc" value=""><br><br> NIFe: <input type="text" name="nife" value=""><br><br> NIFd: <input type="text" name="nifd" value=""><br><br> div: <input type="text" name="div" value=""><br><br> sub: <input type="text" name="sub" value=""><br><br> iva: <input type="text" name="iva" value=""><br><br> <input type="submit" value="Enviar" > </form> </body> </html>

Hope this helps

How can I send data from a form to a class and visualize it?

Question

1 answers

solution1
-2 ACCPTED 2019-01-18 00:09:48

How can I send data from a form to a class and visualize it?

Question

1 answers

solution1 -2 ACCPTED 2019-01-18 00:09:48

solution1
-2 ACCPTED 2019-01-18 00:09:48