如何使用表单数据附加元素？（查询）

How do I append an element with form data? (Jquery)

提问人：V. Snow 提问时间：7/27/2017 更新时间：7/27/2017 访问量：174

问： 

 <script>

      $(document).ready(function(){
        $('form').submit(function(){
          return false;
        $('table').append(
            `<tr>
              <td>$('#first').val();</td>
              <td>$('#last').val();</td>
             <td>$('#email').val();</td>
              <td>$('#phone').val();</td>
             </tr>`);
          });
   });
 </script>

控制台没有显示任何错误，但是当我单击提交按钮时，没有任何反应。 加载的 Jquery 文件是 Google 的托管库。使用 Chrome。

JavaScript jQuery HTML CSS 客户端

评论

0赞 bowl0stu 7/27/2017
连接变量，然后终止字符串。
0赞 Jarek Kulikowski 7/27/2017
您正在调用 return 之前。我在没有它的情况下运行了您的代码，并且它起作用了。$('table').append(...
0赞 V. Snow 7/27/2017
我移动了返回 false;到块的末尾。但现在它似乎不起作用......它像往常一样提交表单（但我确实看到追加正在发生。

答：

4赞 Lucas Camargo 7/27/2017 #1

当你，之后的代码被忽略，用于避免页面重新加载，并且在显示时，你需要连接你的字符串和你的变量（在本例中是）以显示正确的值，例如：return falsee.preventDefault()$(input).val()

$(document).ready(function(){
    $('form').submit(function(e){
        e.preventDefault();
        $('table').append("<tr><td>"+$('#first').val()+"</td><td>"
                            +$('#last').val()+"</td><td>"
                            +$('#email').val()+"</td><td>"
                            +$('#phone').val()+"</td></tr>");
    });
});

评论

0赞 V. Snow 7/27/2017
所以我以这种方式更新了它，但是，现在我已经将返回表移为 false，表单会像往常一样继续提交;并添加了 e.preventDefault（）;

上一个：如何设置带有供应商前缀的 CSS 值（不是属性名称） |客户端

下一个：无法将属性“class”设置为 undefined