Question

我需要传递从表单收集的一些数据，并将其传递给类并进行可视化处理，由于无法获取数据，因此发送数据时遇到了问题

        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>

谢谢

Answer 1

如果我理解您的问题，可以尝试以下代码：

我用了setter和getter； document.forms。有关更多信息，请阅读：

w3schools：setter and getter

w3schools：forms validation

您可以尝试其他信息的另一个链接是：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>

代码段

<!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>

希望这会有所帮助

如何将数据从表单发送到类并进行可视化？

1 个答案: