如何在模态对话框中设置输入值?

发布于 2024-12-11 07:06:46 字数 2267 浏览 0 评论 0原文

我正在研究“添加链接”功能。为此,我使用 来自 Twitter Boostrap JS 的模态插件。在主页上只有“链接”字段需要填写,当用户单击“添加链接”按钮时,会弹出一个模式,用户会看到填写 3 个字段的完整表单:链接、标题、标签。但是,我希望链接字段预先填充上一步中的值。这与您在好吃的网站上“保存链接”时发生的情况类似。

感谢乔的帮助(上一个问题 )我可以在模式对话框上打印 linkURL,但重要的是这个 linkURL 是具有 3 个字段(链接、标题、标签)的表单的链接字段的值。知道如何做到这一点吗?

<html>
<head>
  <title>Example</title>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />

  <script type="text/javascript">
            $(document).ready(function()
            {
                $('#modal-from-dom').bind('show',function()
                {
                    $(".modal-body").html($("#linkURL").val());
                });
            });
    </script>
</head>
<body>
  <!-- The Modal Dialog  -->
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
                <a href="#" class="close">&times;</a>
                <h3>Add Link</h3>
            </div>
            <div class="modal-body">
            <!--
            <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>"
        <input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>
            </form>
            -->
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
  <div class="container">
    <div class="wall-post">
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
    </div>
  </div>

</body>

I'm working on 'add a link' functionality. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill 3 fields: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.

Thanks to Joe's help (previous question) I can print the linkURL on the modal dialogue, but it's important that this linkURL is the value of the link field of the form with 3 fields (link, title, tags). Any idea how this can be done?

<html>
<head>
  <title>Example</title>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />

  <script type="text/javascript">
            $(document).ready(function()
            {
                $('#modal-from-dom').bind('show',function()
                {
                    $(".modal-body").html($("#linkURL").val());
                });
            });
    </script>
</head>
<body>
  <!-- The Modal Dialog  -->
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
                <a href="#" class="close">×</a>
                <h3>Add Link</h3>
            </div>
            <div class="modal-body">
            <!--
            <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>"
        <input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>
            </form>
            -->
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
  <div class="container">
    <div class="wall-post">
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
    </div>
  </div>

</body>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

喜你已久 2024-12-18 07:06:47
      $('#modal-from-dom').bind('show',function()
            {
                $(".modal-body #wall-post").val($("#linkURL").val());
            });

或者我错过了什么? :)

      $('#modal-from-dom').bind('show',function()
            {
                $(".modal-body #wall-post").val($("#linkURL").val());
            });

or am i missing something? :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文