Question

更新：

- 删除了。在alertText前面更新了现在正在使用的jQuery，但仍然无效。

目标是让用户在警报文本字段中键入内容并更新alertText类，当前函数只是尝试更改提交表单按钮上的内部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>

这是我为它开始的jQuery。

$(document).ready(function() {

var changeAlert = document.querySelector(".alertText");

/*
$('#alertForm').submit(function(ev) {
    ev.preventDefault(); 
    this.submit(); 
});*/

$( "#subNow" ).click(function(e) {
    e.preventDefault(); 
    changeAlert.innerHTML = "This is now updated";
});

});

Answer 1

尝试使用用户提交的任何内容更新.alertText ...

尝试在event.preventDefault()事件click中使用.serializeArray()返回input form，Array.prototype.map()，Array.prototype.join()子元素的名称，值{1}}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <title></title>
</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>
    $(document).ready(function() {

      var changeAlert = document.querySelector(".alertText");

      $("#subNow").click(function(e) {
        e.preventDefault();
        var res = $("form").serializeArray().map(function(input) {
          return input.name + ":" + input.value
        }).join(" ");
        changeAlert.innerHTML = res;

      });

    });
  </script>
</body>

</html>

Answer 2

“。alertText” - ＆gt; “alertText”已在问题中修复。

同时更改

$("#subNow").click(function() { ... }

到

$("#subNow").click(function(e) {
    e.preventDefault()
    $(".alertText")[0].innerHTML = "This is now updated"
})

它应该有用。

请参阅this plunker

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

2 个答案: