Question

我有一个问题，从我的HTML表单中读取数据，然后使用该数据创建对象。我正在制作一个简单的前端投资组合网站，并在＆＃34; Contact＆＃34;部分我想管理用户使用此表单与我联系。这是代码，所以如果您有任何建议，请告诉我。

这就是我创建HTML表单和JS的方式：

＆＃13;

var users = [];

var createUser = function(){
  var form = document.myForm;
  //getting data
  if(form.name.value == ""){
	alert("Please, enter your name.");
  }else{
	var name = form.name.value;
  }
  if(form.surname.value == ""){
	alert("Please, enter your surname.");
  }else{
	var surname = form.surname.value;
  }
  if(form.email.value == ""){
	alert("Please, enter your email.");
  }else{
	var email = form.email.value;
  }
  if(form.phone.value == ""){
	alert("Please, enter your phone number.");
  }else{
	var phone = form.phone.value;
  }
				
  var radSex = form.radSex;
  var sex;
  for(var i=0; i<radSex.length; i++){
	if(radSex[i].checked){
	  sex = radSex[i].value;
	}
  }
				
  var radAge = form.radAge;
  var age;
  for(var i=0; i<radAge.length; i++){
	if(radAge[i].checked){
	  age = radAge[i].value;
	}
  }	
  var message = form.getElementByClassName("message").value;
  //creating user
  var user = {
	firstName: name,
	lastName: surname,
	email: email,
	phoneNumber: phone,
	sex: sex,
	age: age,
	message: message
  };
  //putting into array
  users.push(user);
				
				
};
function check(){
  alert(users[0]);
};
  //listening for event
var submitBtn = document.getElementById("submitButton");
submitBtn.addEventListener("click", createUser);
submitBtn.addEventListener("click", check);

＆＃13;

<form action="submit" name="myForm">
	<p>
      <input type="text" name="name" value="Name" class="textbox">
    </p>
	<p>
      <input type="text" name="surname" value="Surname" class="textbox">
    </p>
	<p>
      <input type="text" name="email" value="Email Address" class="textbox">    
    </p>
	<p>
      <input type="text" name="phone" value="Phone Number" class="textbox">
    </p>

	<p>Sex:</p>
	<p>	
      <label>Male&nbsp;</label>
	  <input type="radio" name="radSex" value="male" checked="checked">
      <label>&nbsp;&nbsp;Female&nbsp;</label>
	  <input type="radio" name="radSex" value="female">							
	</p>

	<p>Age:</p>
	  <p>
		<label>&lt;25&nbsp;</label> 
		<input type="radio" name="radAge" value="&lt;25" checked="checked">
        <label>&nbsp;&nbsp;25&lt;50&nbsp;</label> 
		<input type="radio" name="radAge" value="25&lt;50">
        <label>&nbsp;50&lt;100</label> 
		<input type="radio" name="radAge" value="50&lt;100">
	  </p>
							
	  <p>
        <textarea class="message">Message</textarea>
      </p>
	  <button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button>
</form>

＆＃13;

Answer 1

let submitButton = document.querySelector("#submitButton");

submitButton.addEventListener("click",function(){
  
  let nameValue = document.querySelector("[name=name]").value;
  let surnameValue = document.querySelector("[name=surname]").value;
  let emailValue = document.querySelector("[name=email]").value;
  let phoneValue = document.querySelector("[name=phone]").value;
  let sexValue = document.querySelector("[name=radSex]").value;
  let ageValue = document.querySelector("[name=radAge]").value;
  let messageValue = document.querySelector(".message").value;
  
  let backObject = {
    "name": nameValue,
    "surname": surnameValue,
    "email": emailValue,
    "phone": phoneValue,
    "sex": sexValue,
    "age": ageValue,
    "message": messageValue
  };
  
  console.log(backObject);
  
});

<form action="submit" name="myForm">
	<p>
      <input type="text" name="name" value="Name" class="textbox">
    </p>
	<p>
      <input type="text" name="surname" value="Surname" class="textbox">
    </p>
	<p>
      <input type="text" name="email" value="Email Address" class="textbox">    
    </p>
	<p>
      <input type="text" name="phone" value="Phone Number" class="textbox">
    </p>

	<p>Sex:</p>
	<p>	
      <label>Male&nbsp;</label>
	  <input type="radio" name="radSex" value="male" checked="checked">
      <label>&nbsp;&nbsp;Female&nbsp;</label>
	  <input type="radio" name="radSex" value="female">							
	</p>

	<p>Age:</p>
	  <p>
		<label>&lt;25&nbsp;</label> 
		<input type="radio" name="radAge" value="&lt;25" checked="checked">
        <label>&nbsp;&nbsp;25&lt;50&nbsp;</label> 
		<input type="radio" name="radAge" value="25&lt;50">
        <label>&nbsp;50&lt;100</label> 
		<input type="radio" name="radAge" value="50&lt;100">
	  </p>
							
	  <p>
        <textarea class="message">Message</textarea>
      </p>
	  <button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button>
</form>

Answer 2

IMO，您应该使用serialize()

$(function () {
   $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
          type: 'post',
          url: 'post.php',
          data: $('form').serialize(),
          success: function () {
            alert('form was submitted');
          }
      });
   });
});

您可以选择一个或多个表单元素。

假设你有一个包含大量字段的大型表单，你可以使用busboy.on('file', function (fieldname, file, filename) { fstream = fs.createWriteStream("/home/vibs/new_stream.txt"); file.pipe(fstream); fstream.on('close', function () { var stat = fs.statSync("/home/vibs/new_stream.txt"); var fileSizeInBytes = stat["size"]; if(fileSizeInBytes>30000000){ fs.unlink("/home/vibs/new_stream.txt"); res.redirect('/error_uploding'); return; } }); });来收集（只有名称的输入）所有字段值一行。

java.lang.NoSuchMethodError: No direct method <init>(Ljava/io/File;)V in class Lcom/leff/midi/MidiFile; or its super classes (declaration of 'com.leff.midi.MidiFile' appears in /system/framework/com.lge.frameworks.jar)

从表单中读取数据，并使用它创建对象

2 个答案: