JavaScript 輸入類型=提交不起作用

Question

我試圖通過表單輸入，當我提交按鈕時，它不起作用。 請幫我解決這個問題。 我想顯示從表單中獲取的輸入並將其顯示在底部的跨度標簽中。

下面是我的 HTML 和 JavaScript：

 // Variables are being declared. var sRecipientName; var sOrganizationName; var sDate; var sURL; var sHostName; function submitDetails() { sRecipientName = document.getElementById("recipient").value; console.log(sRecipientName); sOrganizationName = document.getElementById("organization").value; console.log(sOrganizationName); sDate = document.getElementById("date").value; console.log(sDate); sURL = document.getElementById("URL").value; console.log(sURL); sHostName = document.getElementById("host").value; console.log(sHostName); }

 <section id="pageForm"> <form action="#"> <label for="recipientName">Recipient name:</label> <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" /> <label for="organizationName">Organization name:</label> <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" /> <label for="eventDate">Event Date:</label> <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" /> <label for="websiteURL">URL:</label> <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" /> <label for="hostName">Host name:</label> <input type="text" id="host" name="hostName" placeholder="Host Name" /> <input type="submit" value="Submit" onclick="submitDetails()"> </form> </section> <article id="placeholderContent"> <span id="recipientName">recipientName</span>! <br/> <br/> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span> <br/> <span id="hostName">hostName</span> </article>

Answer 1

首先，您的用例不需要表單。 當您必須將一些數據發布到服務器時，需要<form> ，但在您的情況下，您只想進行一些 DOM 操作，而無需表單即可完成。

我剛剛編寫了一個函數updateDetails() ，它從您的輸入中獲取值並用這些值覆蓋您的 span 的 innerHTML。 在您的提交按鈕上，我已將其從提交更改為普通的<button> ，單擊時我剛剛調用了函數 updateDetails() 來更新跨度。

我附上了一個可以在您的用例中使用的片段

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <section id="pageForm"> <label for="recipientName">Recipient name:</label> <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" /> <label for="organizationName">Organization name:</label> <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" /> <label for="eventDate">Event Date:</label> <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" /> <label for="websiteURL">URL:</label> <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" /> <label for="hostName">Host name:</label> <input type="text" id="host" name="hostName" placeholder="Host Name" /> <button onclick="submitDetails()">Submit</button> </section> <article id="placeholderContent"> <span id="recipientName">recipientName</span>! <br> <br> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span> <br> <span id="hostName">hostName</span> </article> <script> function submitDetails(){ updateDetails("recipient", "recipientName"); updateDetails("organization", "organizationName"); updateDetails("date", "eventDate"); updateDetails("URL", "websiteURL"); updateDetails("host", "hostName"); } function updateDetails(copyId, pasteId){ document.getElementById(pasteId).innerHTML = document.getElementById(copyId).value; } </script> </body> </html>

Answer 2

據我了解，您正在嘗試使用表單中的信息更改占位符文本。 您首先要通過將事件傳遞給提交中的函數（我已將其更改為按鈕）來阻止表單提交的默認行為。

然后，您可能希望將元素的innerHTML 設置為表單的值之一。

 var sRecipientName; var sOrganizationName; var sDate; var sURL; var sHostName; function submitDetails(e) { e.preventDefault(); sRecipientName = document.getElementById("recipient").value; sOrganizationName = document.getElementById("organization").value; sDate = document.getElementById("date").value; sURL = document.getElementById("URL").value; sHostName = document.getElementById("host").value; document.getElementById('recipientName').innerHTML = sRecipientName; document.getElementById('organizationName').innerHTML = sOrganizationName; document.getElementById('eventDate').innerHTML = sDate; document.getElementById('websiteURL').innerHTML = sURL; document.getElementById('hostName').innerHTML = sHostName; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>My website</title> </head> <body> <section id="pageForm"> <form action="#"> <label for="recipientName">Recipient name:</label> <input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" /> <label for="organizationName">Organization name:</label> <input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" /> <label for="eventDate">Event Date:</label> <input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" /> <label for="websiteURL">URL:</label> <input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" /> <label for="hostName">Host name:</label> <input type="text" id="host" name="hostName" placeholder="Host Name" /> <button type="submit" onclick="submitDetails(event)">Submit</button> </form> </section> <article id="placeholderContent"> <span id="recipientName"></span> <br /> <br /> <span id="organizationName"></span> <span id="eventDate"></span> <span id="websiteURL"></span> <br /> <span id="hostName"></span> </article> <script src="script.js"></script> </body> </html>

Answer 3

確保您沒有使用console.log() 。 首先刪除它。

然后，您必須添加一個事件偵聽器，該事件偵聽器在提交表單時起作用並防止默認事件。

例子：

<input value="I am" id="val1" >
<span id="output">

//JavaScript codes
 let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;

但請確保這些代碼在響應提交事件的功能中

JavaScript 輸入類型=提交不起作用

問題描述

3 個解決方案

解決方案1
3 2020-08-28 19:25:44

解決方案2
0 已采納 2020-08-28 19:23:19

解決方案3
0 2020-08-28 19:28:55

JavaScript 輸入類型=提交不起作用

問題描述

3 個解決方案

解決方案1 3 2020-08-28 19:25:44

解決方案2 0 已采納 2020-08-28 19:23:19

解決方案3 0 2020-08-28 19:28:55

解決方案1
3 2020-08-28 19:25:44

解決方案2
0 已采納 2020-08-28 19:23:19

解決方案3
0 2020-08-28 19:28:55