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

Question

如果有人能为这个问题提供任何帮助，我将不胜感激，提前致谢。

下面是我的 bootstrap 模式的代码。单击提交按钮后，我试图引用模式中的输入字段以检索其 value/user 输入。

如您所见，我已尝试使用 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 属性时遇到了问题。我注意到的第一件事是你这样写 selector/actions：

'document.getElementById(blogbox).innerHTML'

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

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

document.getElementById('blogbox').innerHTML

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

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

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

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

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

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

Bootstrap Modal Refering to an input fields value (Not Working)

javascript

html

forms

twitter-bootstrap

input