Bootstrap Modal 引用输入字段值（不工作）

Question

任何可以为这个问题提供任何帮助的人，我将不胜感激，在此先感谢您。

下面是我的引导模式代码。单击提交按钮时，我试图引用模式中的输入字段以检索其值/用户输入。

如您所见，我尝试使用document.getElementById(blogbox).innerHTML。

这是不起作用的，所以我可能会叫错树，所以任何关于再次提取数据的指导都非常感谢。

<div class='modal fade' id=addblog tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='exampleModalLabel'>Add Blog</h4>
      </div>
      <div class='modal-body'>
        <form name='testForm'>
          <div class='form-group'>
            <label for='message-text' class='control-label'>Blog Name:</label>
            <input type='text' class='form-control' id='blogbox'>
          </div>
        </form>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary' onclick=addblog('5','" + "document.getElementById(blogbox).innerHTML" + "')>Add</button>
      </div>
    </div>
  </div>
</div>

Answer 1

好的，为了方便其他人，我已尝试简化您的问题...这是您的 HTML：

<div class='modal fade' id=addblog tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title' id='exampleModalLabel'>Add Blog</h4></div><div class='modal-body'><form name='testForm'><div class='form-group'><label for='message-text' class='control-label'>Blog Name:</label><input type='text' class='form-control' id='blogbox'></div></form></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick=addblog('5','document.getElementById(blogbox).innerHTML')>Add</button></div></div></div></div>

具体来说，您在使用 HTML 按钮的 onclick 属性时遇到了问题。我注意到的第一件事是您这样编写选择器/操作：

'document.getElementById(blogbox).innerHTML'

单引号表示您将此代码评估为字符串而不是执行它。我们想改为执行它。

其次，blogbox 实际上确实需要在一个字符串中，因为它是我们正在搜索的 HTML 元素 id（有关如何正确使用 JS getElementById 方法，请参阅我的源代码）。

document.getElementById('blogbox').innerHTML

最后，innerHTML 不是您要搜索的操作，因为它旨在返回父元素内部的 HTML。相反，请尝试使用 value。

总之，如果您将 onclick 属性更改为：

addblog('5', document.getElementById('blogbox').value)

那么您的代码应该开始按预期执行您的功能。

来源： http://www.w3schools.com/jsref/met_document_getelementbyid.asp