jQuery或Javascript获取提交表单数据并更新ID文本_Jquery_Html

jQuery或Javascript获取提交表单数据并更新ID文本

jquery html

jQuery或Javascript获取提交表单数据并更新ID文本,jquery,html,Jquery,Html,更新： -删除了。在文本前面 -更新了当前正在使用的jQuery，但仍然不起作用用户的目标是在alert文本字段中键入一些内容，并更新alertText类，当前的函数只是尝试在单击submit表单的按钮时更改内部html，因为我现在甚至无法让它工作您好，我正在尝试制作一个表单，允许某人在提交时更新p ID文本行。我在理解如何使用jQuery获取提交的文本以更改ID标记的内部html时遇到了一些困难这是我的HTML文档，我正在尝试用用户提交的任何内容更新.alertText <!DO

更新：

-删除了。在文本前面 -更新了当前正在使用的jQuery，但仍然不起作用

用户的目标是在alert文本字段中键入一些内容，并更新alertText类，当前的函数只是尝试在单击submit表单的按钮时更改内部html，因为我现在甚至无法让它工作

您好，我正在尝试制作一个表单，允许某人在提交时更新p ID文本行。我在理解如何使用jQuery获取提交的文本以更改ID标记的内部html时遇到了一些困难

这是我的HTML文档，我正在尝试用用户提交的任何内容更新.alertText

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body id="menuStyle">

       <h1 class="title">Alerts</h1>

 <form id="alertForm">
 Alert:<br>
  <input type="text" name="alertInput" id="alertInpit">
  <br>
  Password:<br>
  <input type="text" name="alertPass" id="alertPass">
  <br><br>
  <input type="submit" value="Submit" id="subNow">
  </form>
  <!-- change me -->
       <p class="alertText"> </p>

   <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

       <script src="js/alert.js"></script>
       </body>
       </html>

正在尝试使用用户提交的内容更新.alertText

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body id="menuStyle">

       <h1 class="title">Alerts</h1>

 <form id="alertForm">
 Alert:<br>
  <input type="text" name="alertInput" id="alertInpit">
  <br>
  Password:<br>
  <input type="text" name="alertPass" id="alertPass">
  <br><br>
  <input type="submit" value="Submit" id="subNow">
  </form>
  <!-- change me -->
       <p class="alertText"> </p>

   <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

       <script src="js/alert.js"></script>
       </body>
       </html>

尝试在

中使用事件.preventDefault（）
单击事件，序列化数组（）
以返回表单
，数组.prototype.map（），数组.prototype.join（），的子元素的名称、值


警报
警觉的：



密码：



































$（文档）.ready（函数（）{
var changeAlert=document.querySelector（“.alertText”）；
$（“#子行”）。单击（函数（e）{
e、 预防默认值（）；
var res=$（“form”）.serializeArray（）.map（函数（输入）{
返回input.name+“：”+input.value
}).加入（“”）；
changeAlert.innerHTML=res；
});
});
“.alertText”->“alertText”已修复
也改变
$("#subNow").click(function() { ... }

到
它应该会起作用
请参见
您只需阻止按钮单击的默认操作。。。类似于$（“#subNow”）。单击（函数（e）{e.preventDefault（）；changeAlert.innerHTML=“现在已更新”；}）
尝试在
处删除
，
同时class属性不应具有，因此
我会尝试一下-谢谢你，效果很好。我可以在上面输入密码吗？我看到它在使用ajax。“我可以在上面输入密码吗？”不确定是否正确解释？“我看到它在使用ajax。”ajax
没有在js
上使用，如果我将
放在不同的网页上，
将jQuery加载到窗口中，例如index.html-它仍然能够更改文本吗？form
是否与“index.html”处于不同的html
文档？尝试动态加载，在窗体打开“index.html”
单击，将
文本设置为窗体值？是index.html和alert.html，其中窗体位于alert.html内。我意识到，即使我让alert.html更新index.html上的文本，它也不会保持更新。每次加载页面时，都会加载默认值p class=“alertText”>等于零。
$("#subNow").click(function(e) {
    e.preventDefault()
    $(".alertText")[0].innerHTML = "This is now updated"
})