我无法让表单提交在 html / JavaScript 中工作

Question

我已经尝试了很多不同的东西以及搜索和谷歌搜索，但我就是看不出如何编写一些非常基本的代码 work.Trying 让用户提交文本输入。

下面这段代码应该只是将第一段更改为有效。

<HTML>
<CENTER>
<BR>
<H1>Test</H1>
<BR>
<p id="ParaOne"></p>
<BR>
<input type="text" id="TextInput" Value="" onsubmit="Test">

<script>
var CharOne = ["name"]


function Test() {
    document.getElementById("ParaOne").innerHTML = "Working";
}

document.getElementById("ParaOne").innerHTML = "Enter Name:";

</script>

</HTML>

理想情况下，我可以将他们输入的任何内容保存到变量中，然后显示输入的名称，但截至目前，我什么都做不了。甚至没有更新段落以正常工作的基本功能。

Answer 1

您可以使用 javascript 方法 onchange 或 onkeydown 从输入字段触发输入，您不需要提交表单。但如果您只需要我添加示例。我使用 jQuery 而不是 plain javascript 来编写函数，因为现在它们实际上变成了 one-line 函数。

onchange 将等待用户按下回车键或输入元素失去焦点以调用该函数。

onkeydown 将在每次按键时调用该函数。

e.preventDefault()取消元素的默认动作，本例为提交动作，让我们通过代码来决定是否提交。

下面是一些 javascript/jQuery 测试函数和示例 HTML 文件，以便您可以测试最适合您的方法。

编辑： 我添加了一些关于如何将输入字段的当前值存储到变量中的示例

// get the Value of input element directly into a variable
var myVariable = $('#theInput_1').val();

// myVariable will return empty string since the input element is empty
console.log('This is the starting value of the 1st input element: ' + myVariable);


// Function for onkeydown test
function testKeyDown()
{
  // stored in a variable which is not available outside the function
  var myVariable = $('#theInput_1').val();
  $('#paraOne').text(myVariable);
  
  // test output - $('#theInput_1').val() will return empty
console.log('This is the changed value of the 1st input element: ' + myVariable);
}

// Function for onchange test
function testOnChange()
{
  $('#paraTwo').text($('#theInput_2').val());
}

// Function for submit test
$( "#submit" ).on( "click", function(e)
{
  e.preventDefault(); // Prevents default action of submit
  $('#paraThree').text($('#theInput_3').val());
});

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<p id="paraOne">This text will be replaced on success.</p>
<input type="text" id="theInput_1" onkeydown="testKeyDown();" size="50" value="" placeholder="onkeydown test" />

<p id="paraTwo">This text will be replaced on success.</p>
<input type="text" id="theInput_2" onchange="testOnChange();" size="50" value="" placeholder="onchange test" />

<p id="paraThree">This text will be replaced on success.</p>
<form>
<input type="text" id="theInput_3" size="50" value="" placeholder="form submit test" />
<input type="submit" id="submit" value="Submit me" />
</form>

</body>
</html>

Answer 2

文本框没有 onsubmit 事件。您可以在表单上使用该事件（我在您的问题中没有看到）。虽然不是必需的，但我也会添加一个提交按钮，因为这样设计更好。

另外在JavaScript中给ParaOne赋初值也是一种浪费，直接在元素里面输入值即可。

<form onsubmit="Test();">
  <p id="ParaOne">Enter Name:</p>
  <input type="text" id="TextInput">
</form>
<script>
  function Test() {
    document.getElementById("ParaOne").innerHTML = "Working";
  }
</script>

重要提示：虽然上面的代码是你应该如何做的，但我真的不明白这一点。更改 ParaOne 的文本后将立即提交表单，这将重新加载页面，您将再次看到初始值（并且可能认为它不起作用）。它会起作用，但速度非常快，所以没有人会真正看到它，那有什么意义呢？

我无法让表单提交在 html / JavaScript 中工作

I can't get form submit to work in html / JavaScript

html

javascript

text

submit