我正在尝试验证我的表单，但我似乎无法捕获我的表单值！不知道现在去哪里。我尝试过jQuery和Javascript的组合。这是我的代码片段。
HTML：
<form action="#" name="application-form" method="post" enctype="multipart/form-data">
<ul>
<li class="input-row">
<label for="app-resume">Resume</label>
<input type="file" id="app-resume" name="resume" />
</li>
<li class="input-row">
<label for="app-name">Full Name</label>
<input type="text" id="app-name" name="fname" />
</li>
<li class="input-row">
<label for="app-pnum">Phone Number</label>
<input type="number" id="app-pnum" name="pnum" />
</li>
<li class="input-row">
<label for="app-email">Email</label>
<input type="email" id="app-email" name="email" />
</li>
<li class="input-row">
<label for="app-info">Additional Information</label>
<textarea type="text" id="app-info" name="info"></textarea>
</li>
</ul>
<div class="btn-mssg-container">
<button type="submit" name="sbt-btn" id="sbt-btn">apply</button>
<p id="sbt-mssg" class="hidden">Thank you for applying.</p>
</div>
</form>
JS：
var myForm = document.forms["application-form"];
myForm.onsubmit = processForm;
function processForm(){
console.log(myForm.fname.value);
}
我也试过了：
function processForm(){
var inName = $("#app-name").val();
console.log(inName);
}
我一无所获！有人请把我从痛苦中解救出来。
答案 0 :(得分：1)
获取表单值的第一次尝试称为 HTMLFormControlsCollection
<小时/> 的 1。参考表格：
var FoRm = document.forms的 .FormID_or_NAME
或
var FoRm = document.forms["的 FormID_or_NAME "]
或
var FoRm = document.forms[0]
如果目标<form>是页面上的第一个或页面上唯一的<form>，那么在括号表示法中使用索引号为零的最后一个将起作用。
var formControlS = FoRm.elements
第2步是您失踪的关键步骤。
<小时/> 第3。现在，您可以在特定<form>下的任何表单控件中引用和获取值：
var foRmC = formControlS.的 FormControlID_or_NAME .value
或
var foRmC = formControlS["的 FormControlID_or_NAME "].value
或
var foRmC = formControlS[0].value
详细信息在演示中进行了评论
由于安全措施，此localStorage功能无法在Stack Snippet中使用。如果您想查看功能齐全的演示，请访问Plunk
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
}
iframe {
display: inline-table;
max-width: 40%;
height: 100vh
}
#app0 {
max-width: 60%;
margin: 0 0 5px 15px;
}
label {
display: inline-block
}
/* Area code - Central Office code */
[type=number] {
width: 5ch
}
/* The last 4 digits - Station code */
label [type=number]:last-of-type {
width: 6ch
}
[type=email] {
width: 26ch
}
.hidden {
opacity: 0
}
#msg {
height: 60px;
overflow-x: hidden;
overflow-y: scroll;
border: 3px inset grey;
padding: 10px;
display: block;
}
</style>
</head>
<body>
<main id='main'>
<!-- On submit, form sends to a real test server
|| The target attribute value is the name of
|| iframe#display. Whenver data is tested thru
|| this server, it will send a response later.
-->
<form action="https://httpbin.org/post" id="app0" method="post" enctype="multipart/form-data" target='display'>
<fieldset id='set0'>
<label for="file0">Resume</label>
<input type="file" id="file0" name="resume">
<br>
<br>
<label for="name0">Full Name</label>
<input type="text" id="name0" name="name">
<br>
<br>
<label>Phone Number
<input type="number" id="area0" name="phone" min='100' max='999'>
<input type="number" id="cent0" name="phone" min='100' max='999'>
<input type="number" id="stat0" name="phone" min='0000' max='9999'>
</label>
<br>
<br>
<label for="mail0">Email</label>
<input type="email" id="mail0" name="mail">
<br>
<br>
<label for="info0">Additional Information</label>
<br>
<textarea id="info0" name="info" cols='28'></textarea>
<br>
</fieldset>
<fieldset id="set1">
<button id='btn' type="button" class=''>Process</button>
<button id='sub' type='submit' class='hidden'>Transfer</button>
</fieldset>
<output id="msg"></output>
</form>
<iframe name='display' src='about:blank' width='60%'></iframe>
</main>
<script>
/* The interface used to refer to form controls
|| is called HTMLFormControlsCollection
*/ // Reference the form
var xApp = document.forms.app0;
/*\\\\\\\\\\/IMPORTANT\//////////
This is the part that was in error
In order to refer to any form controls
of the referenced form, you must
collect them in an array-like object
using the .elements proerty //////*/
var xCon = xApp.elements;
// Then from the .elements reference by id
// A click event on a button--processForm
// is called
xCon.btn.onclick = processForm;
/* This function will gather all form values
|| into an array.
|| Then it stores that array in localStorage
|| Displays the data then hides the "Process"
|| button and reveals the "Transfer" button
*/
function processForm(e) {
var qty = xCon.length;
var data = [];
for (let i = 0; i < qty; i++) {
var formControl = xCon[i].value;
if (formControl !== null || formControl !== undefined || formControl !== "") {
data.push(formControl);
}
}
localStorage.setItem("data", JSON.stringify(data));
var stored = JSON.parse(localStorage.getItem("data"));
appX();
xApp.onsubmit = appX;
function appX(e) {
xCon.msg.value = stored;
xCon.btn.classList.toggle('hidden');
xCon.sub.classList.toggle('hidden');
}
}
/* Once the "Transfer" button is clicked, the
|| data is sent to the test server and the
|| test server responds back. The response is
|| captured and displayed in the iframe to the
|| right
*/
</script>
</body>
</html>