抱歉，如果这样的问题真的很烦人；我试图在不打扰任何人的情况下解决这个问题，但我是一个初学者，我完全被难住了。这是我到目前为止所拥有的。我想从名为“paymentform”的表单中提取数据并生成一个我可以在 REST 调用中发布的 JSON 列表。我的老板希望我专门用 JavaScript 而不是 jQuery 来做这件事。我该怎么做？
function toggleVisibility(id) {
var e = document.getElementById(id);
if (id == "creditCard") {
document.getElementById("creditCard").checked = true;
document.getElementById("eCheck").checked = false;
if (document.getElementById("cardinfo").style.display == "none") {
document.getElementById("cardinfo").style.display = "block";
document.getElementById("bankinfo").style.display = "none";
document.getElementById("cardnumberid").setAttribute("required", true);
document.getElementById("expdateid").setAttribute("required", true);
document.getElementById("cvvnumberid").setAttribute("required", true);
document.getElementById("accountnameid").removeAttribute("required");
document.getElementById("routingnumberid").removeAttribute("required");
document.getElementById("banknameid").removeAttribute("required");
document.getElementById("accountnumberid").removeAttribute("required");
}
}
if (id == "eCheck") {
document.getElementById("creditCard").checked = false;
document.getElementById("eCheck").checked = true;
if (document.getElementById("bankinfo").style.display == "none") {
document.getElementById("cardinfo").style.display = "none";
document.getElementById("bankinfo").style.display = "block";
document.getElementById("cardnumberid").removeAttribute("required");
document.getElementById("expdateid").removeAttribute("required");
document.getElementById("cvvnumberid").removeAttribute("required");
document.getElementById("accountnameid").setAttribute("required", true);
document.getElementById("routingnumberid").setAttribute("required", true);
document.getElementById("banknameid").setAttribute("required", true);
document.getElementById("accountnumberid").setAttribute("required", true);
}
}
}
function setValue() {
document.getElementById("creditCard").checked = true;
document.getElementById("eCheck").checked = false;
document.getElementById("cardinfo").style.display = "block";
document.getElementById("bankinfo").style.display = "none";
document.getElementById("cardnumberid").setAttribute("required", true);
document.getElementById("expdateid").setAttribute("required", true);
document.getElementById("cvvnumberid").setAttribute("required", true);
document.getElementById("accountnameid").removeAttribute("required");
document.getElementById("routingnumberid").removeAttribute("required");
document.getElementById("banknameid").removeAttribute("required");
document.getElementById("accountnumberid").removeAttribute("required");
}
function submitForm() {
var myForm = document.getElementsByName("paymentform")[0];
}body {
margin-top: 100px;
margin-left: 200px;
margin-right: 350px;
font-family: Helvetica;
font-size: 90%;
}
h1 {
font-family: Helvetica;
font-size: 150%;
}
h2 {
font-family: Helvetica;
font-size: 110%;
}
p {
font-family: Helvetica;
}<!DOCTYPE html>
<html>
<head>
<title>Payment Information</title>
<link rel="stylesheet" type="text/css" href="CreditCardAndECheckTest.css">
<script src="CreditCardAndECheckTest.js"></script>
</head>
<body onload="setValue()">
<h1>Payment Profile</h1>
<hr>
<p>Enter the information for each field listed below.</p>
<h2>Billing Information</h2>
<form name="paymentform" onsubmit="return window.submitForm()" method="post">
First Name:
<input type="text" name="firstname" required> Last Name:
<input type="text" name="lastname" required>
<br>
<br>Company Name:
<input size="83px" type="text" name="companyname" required>
<br>
<br>Address 1:
<input size=T "30px" type="text" name="address1" required>
<br>
<br>Address 2:
<input size="30px" type="text" name="address2" required>
<br>
<br>City:
<input type="text" name="cityname" required> State/Province:
<input type="text" name="statename" required>
<br>
<br>Zip/Postal Code:
<input size="5px" type="text" name="zippostalcode" required> Country:
<input type="text" name="country" required>
<br>
<br>Email:
<input type="text" name="email" required> Phone:
<input type="text" name="phonenumber" required> Fax:
<input type="text" name="faxnumber">
<br>
<h2>Payment Information</h2>
Payment Type
<input id="creditCard" onclick="toggleVisibility('creditCard')" checked type="radio" />Credit Card
<input id="eCheck" onclick="toggleVisibility('eCheck')" type="radio" />Bank Account
<br>
<br>
<div id="cardinfo" style="display:block">
Accepted Methods: American Express, Discover, JCB, Mastercard, Visa
<br>
<br>Card Number:
<input id="cardnumberid" type="text" name="cardnumber" required>
<br>
<br>Expiration Date:
<input id="expdateid" type="text" name="expdate" required>(mmyy)
<br>
<br>CVV (3-digit number on the back of the card, if applicable):
<input id="cvvnumberid" type="text" name="cvvnumber" required>
</div>
<div id="bankinfo" style="display:none">
Name on Account:
<input id="accountnameid" size="30px" type="text" name="accountname" required> Account Type:
<select>
<option value="checking">Checking</option>
<option value="savings">Savings</option>
<option value="businesschecking">Business Checking</option>
</select>
<br>
<br>9-digit Routing Number:
<input id="routingnumberid" type="text" name="routingnumber" required> Account Number:
<input id="accountnumberid" type="text" name="accountnumber" required>
<br>
<br>Bank Name:
<input id="banknameid" size="30px" type="text" name="bankname" required>
</div>
<br>
<center>
<input type="submit" value="Submit">
</center>
</form>
</body>
</html>最佳答案
tl;博士:I've provided a jsBin with a working example of your code
因此，首先，jQuery 的存在是为了规范奇怪的浏览器行为(主要是解决 IE 问题)并提供执行常见操作的快捷方式。多次写出 document.getElementById() 既累人又难以阅读。我添加了这个简单的函数来使特定的操作更容易:
function byId(element) {
return document.getElementById(element);
}
byId('firstname') // <input type="text" id="firstname" required>
我还将您所有的 name 属性更改为 ID。调用 getElementsByNames() 是一种有点古怪的行为，所以我个人会避免它。
最后，这里是如何设置数据以在 POST 请求(或其他)中传递。
function submitForm() {
var cardId = byId("cardinfo");
var payment = {};
var data = {};
if (getCSS(cardId, 'display') == "block") {
payment = {
num: byId("cardnumberid").value,
exp: byId("expdateid").value,
cvv: byId("cvvnumberid").value
};
} else {
payment = {
accountName: byId("accountnameid").value,
routingNum: byId("routingnumberid").value,
bankName: byId("banknameid").value,
accountNum: byId("accountnumberid").value
};
}
data = {
first: byId('firstname').value,
last: byId('lastname').value,
company: byId('companyname').value,
addr1: byId('address1').value,
addr2: byId('address1').value,
city: byId('cityname').value,
state: byId('statename').value,
zip: byId('zippostalcode').value,
country: byId('country').value,
email: byId('email').value,
phone: byId('phonenumber').value,
fax: byId('faxnumber').value,
payment: payment
};
data = JSON.stringify(data);
console.log(data);
// Prevent the form from submitting and refreshing the page
return false;
}
您需要创建要以某种方式发送的对象，然后需要对其调用 JSON.stringify(objectName)。这会将对象变成一个简单的字符串。当您从请求中取回数据时，您通常必须调用 JSON.parse(objectName) 才能操作数据。
哦，额外的功劳:
调用这个不起作用:
if (document.getElementById("bankinfo").style.display == "none") {...
document.getElementById().style 只设置样式。我创建了以下 wee 函数来提供帮助:
function getCSS(element, attr) {
return window.getComputedStyle(element).getPropertyValue(attr);
}
关于javascript - 如何使用 Javascript 而不是 jQuery 从 HTML 表单数据生成 JSON 列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31845125/