讀取數據，並創建對象

Question

我有讀取數據的問題，從我的HTML表單，然後創建一個對象使用該數據。我正在製作一個簡單的前端投資組合網站，在「聯繫」部分，我想管理用戶使用此表單與我聯繫。這裏是代碼，所以如果你有任何建議，請讓我知道。

這是我創建的HTML表單和JS：

var users = []; 
 

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

<form action="submit" name="myForm"> 
 
\t <p> 
 
     <input type="text" name="name" value="Name" class="textbox"> 
 
    </p> 
 
\t <p> 
 
     <input type="text" name="surname" value="Surname" class="textbox"> 
 
    </p> 
 
\t <p> 
 
     <input type="text" name="email" value="Email Address" class="textbox">  
 
    </p> 
 
\t <p> 
 
     <input type="text" name="phone" value="Phone Number" class="textbox"> 
 
    </p> 
 

 
\t <p>Sex:</p> 
 
\t <p> \t 
 
     <label>Male&nbsp;</label> 
 
\t <input type="radio" name="radSex" value="male" checked="checked"> 
 
     <label>&nbsp;&nbsp;Female&nbsp;</label> 
 
\t <input type="radio" name="radSex" value="female"> \t \t \t \t \t \t \t 
 
\t </p> 
 

 
\t <p>Age:</p> 
 
\t <p> 
 
\t \t <label>&lt;25&nbsp;</label> 
 
\t \t <input type="radio" name="radAge" value="&lt;25" checked="checked"> 
 
     <label>&nbsp;&nbsp;25&lt;50&nbsp;</label> 
 
\t \t <input type="radio" name="radAge" value="25&lt;50"> 
 
     <label>&nbsp;50&lt;100</label> 
 
\t \t <input type="radio" name="radAge" value="50&lt;100"> 
 
\t </p> 
 
\t \t \t \t \t \t \t 
 
\t <p> 
 
     <textarea class="message">Message</textarea> 
 
     </p> 
 
\t <button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button> 
 
</form>

Answer 1

海事組織，你應該使用serialize()

$("form").serialize(); 

您可以選擇一個或多個表單元素。

假設您的表單中包含大量字段，您可以使用serialize通過一行代碼收集（僅限名稱輸入）所有字段值。

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

Answer 2

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"> 
 
\t <p> 
 
     <input type="text" name="name" value="Name" class="textbox"> 
 
    </p> 
 
\t <p> 
 
     <input type="text" name="surname" value="Surname" class="textbox"> 
 
    </p> 
 
\t <p> 
 
     <input type="text" name="email" value="Email Address" class="textbox">  
 
    </p> 
 
\t <p> 
 
     <input type="text" name="phone" value="Phone Number" class="textbox"> 
 
    </p> 
 

 
\t <p>Sex:</p> 
 
\t <p> \t 
 
     <label>Male&nbsp;</label> 
 
\t <input type="radio" name="radSex" value="male" checked="checked"> 
 
     <label>&nbsp;&nbsp;Female&nbsp;</label> 
 
\t <input type="radio" name="radSex" value="female"> \t \t \t \t \t \t \t 
 
\t </p> 
 

 
\t <p>Age:</p> 
 
\t <p> 
 
\t \t <label>&lt;25&nbsp;</label> 
 
\t \t <input type="radio" name="radAge" value="&lt;25" checked="checked"> 
 
     <label>&nbsp;&nbsp;25&lt;50&nbsp;</label> 
 
\t \t <input type="radio" name="radAge" value="25&lt;50"> 
 
     <label>&nbsp;50&lt;100</label> 
 
\t \t <input type="radio" name="radAge" value="50&lt;100"> 
 
\t </p> 
 
\t \t \t \t \t \t \t 
 
\t <p> 
 
     <textarea class="message">Message</textarea> 
 
     </p> 
 
\t <button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button> 
 
</form>