从模态输入字段中获取文本并将其放入表格中答案

【问题标题】：Taking Text from a modal input field and placing it into a table从模态输入字段中获取文本并将其放入表格中
【发布时间】：2014-03-05 02:16:44
【问题描述】：

好吧，我是网页设计新手。我正在尝试从模式中获取一个输入字段，并将该值添加到主页上的一个表中并且努力这样做。我尝试为此编写脚本失败，因为我没有看到任何结果。

这是尝试：我在我的模式中找到了这个输入字段（直接取自引导程序）。我给它分配了 id="addHousemate"

<input type="text" class="form-control"  id="addHousemate" placeholder="Housemate's Name">

这是我希望提交的按钮。

<input type="button" class="btn btn-primary" name ="addHousemate">Submit</button>

最后，这是我希望添加输入的 tbody。

<tbody>
   <div id="housemateTable"></div>
</tbody>

现在我写一个jquery函数的尝试如下：

jQuery(function($){
  $('input[name="add"]').click(function() {
    value = $('input[name="addHousemate"]').val();
            $('td tr:last').after("<tr><td>" + value + "</td></tr>");
            $('input[name="addHousemate"]').val("");
   });
});

但是我没有得到任何结果。我还使用 jquery append 进行了查找，但仍然没有找到任何地方。请帮忙！

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
  <script  language="javascript" type="text/JavaScript" src="js/jquery-1.11.0.min.js"></script>   
  <script  language="javascript" type="text/JavaScript" src="js/submit.js"></script>

<div class="container">
<div class="row">
  <div class="col-md-8">
    <div class="col-md-4">
      <div class= "table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>People of the House</th>
            </tr>
          </thead>
          <tbody>
             <div id="housemateTable"></div>
          </tbody>
        </table>
            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              Add a Housemate
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addHousemate" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add a Housemate</h4>
                  </div>
                  <div class="modal-body">
                    <form role ="form">
                      <div class="form-group">
                        <input type="text" class="form-control" id="addHousemate" name"addHousemate" placeholder="Housemate's Name">
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="button" class="btn btn-primary" name ="add" value="add">
                  </div>
                </div>
              </div>
            </div>             
      </div>
    </div>

【问题讨论】：

标签： javascript jquery html button input

【解决方案1】：

首先要注意的是，您对输入元素使用选择器的方式存在问题。您可能希望从实际保存输入文本的第一个输入元素中检索值，而不是从只是一个按钮的第二个输入元素中获取值。

所以，我会调整：

$('input[name="addHousemate"]').val();

到

$('input[id="addHousemate"]').val();

另外，你设置事件监听器的方式有问题：

$('input[name="add"]').click(function() {

请注意，没有名称为“add”的输入元素。我相信你的意思是：

$('button[name="addHousemate"]').click(function() {

通过查看第二个输入元素的关闭标签：

Submit</button>

，我假设您要使用的第二个输入元素是“按钮”而不是“输入”。

所以，最后，jQuery 代码如下所示：

$('button[name="addHousemate"]').click(function() {
    var value = $('input[id="addHousemate"]').val();
    $('tr td:last').after("<tr><td>" + value + "</td></tr>");
    $('input[id="addHousemate"]').val('');
});

查看工作代码：

http://jsfiddle.net/yp9V6/

享受网页设计工作！

【讨论】：

谢谢先生！这非常有效。并感谢您用外行的方式解释它。
不过，只是一个小问题，也许只是进一步的理解。它怎么知道进入那个特定的表？如果我在一个页面上有多个表格怎么办？

【解决方案2】：

问题可能源于在选择器中使用 :last 而不是 :last-child

我会使用完整的语法 (.on()) 来检测提交，并使用提交而不是点击。然后从输入中获取值并使用.html 将其添加到最后一行。

$(document).ready(function()
{

    $('input[name="addHousemate"]').on('submit',function()
    {
        var thisvalue = $('input#addHousemate').val();
        $('tr:last-child td').html(thisvalue);
    });

});

您为希望输出的位置提供的代码是否与您提供的代码有很大不同？

【讨论】：

即使在进行了这些更改之后，单击模式中的提交按钮仍然没有任何结果。有什么建议吗？
请注意我对此的经验仍然很少，但我认为我可能在插入表格时出错了？我不知道我什至如何参考输入表。（至于你的问题，这都位于 2 个文件中，一个 index.html 和一个 submit.js）
啊我错过了它是一个按钮而不是input type='submit'，所以不需要 e.preventDefault 因为它没有默认操作。我自己不是专家，但我担心这里可能没有足够的信息/上下文来提供具体答案
这可能与您给按钮的name 和您给文本框的id 冲突，因为它们是相同的？

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：