JavaScript 输入类型=提交不起作用
[英]JavaScript input type=submit is not working
问题描述
I am trying to input through a form and when I submit the button, it is not working.
我试图通过表单输入，当我提交按钮时，它不起作用。 Kindly help me with this.请帮我解决这个问题。 I want to display the input taken from the form and display it in the span tags at the bottom.我想显示从表单中获取的输入并将其显示在底部的跨度标签中。
Below is my HTML and JavaScript:下面是我的 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>
3 个解决方案
解决方案1
3 2020-08-28 19:25:44
First of all there is no need of a form for your use-case.首先，您的用例不需要表单。 A <form> is required when you have to post some data to server, but in your case you just wanted to do some DOM manipulations which you can do without a form.当您必须将一些数据发布到服务器时，需要<form> ，但在您的情况下，您只想进行一些 DOM 操作，而无需表单即可完成。
I have just written a function updateDetails() which takes the values from your inputs and overwrites your span's innerHTML with those values.我刚刚编写了一个函数updateDetails() ，它从您的输入中获取值并用这些值覆盖您的 span 的 innerHTML。 On your submit button, I have changed it from a submit to a plain <button> , and on click I have just called the function updateDetails() to update the spans.在您的提交按钮上，我已将其从提交更改为普通的<button> ，单击时我刚刚调用了函数 updateDetails() 来更新跨度。
I have attached a snippet that will work in your use case我附上了一个可以在您的用例中使用的片段
<!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>
解决方案2
0 已采纳 2020-08-28 19:23:19
From what I understand, you are trying to change the placeholder text with the information from the form.据我了解，您正在尝试使用表单中的信息更改占位符文本。 You would want to first prevent the default behavior of the form submission by passing the event to the function in your submit (which I've changed to a button).您首先要通过将事件传递给提交中的函数（我已将其更改为按钮）来阻止表单提交的默认行为。
You would then want to have something set the innerHTML of the element to one of the values of the form.然后，您可能希望将元素的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>
解决方案3
0 2020-08-28 19:28:55
Make sure you are not using console.log() .确保您没有使用console.log() 。 First remove it.首先删除它。
Then you have to add an eventListener that works if form is submitted and to prevent default events.然后，您必须添加一个事件侦听器，该事件侦听器在提交表单时起作用并防止默认事件。
Example:例子：
<input value="I am" id="val1" >
<span id="output">
//JavaScript codes
let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;
But make sure those codes are in function that responds to the submit event但请确保这些代码在响应提交事件的功能中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.