如何将文本字段传播到模式对话框？

发布于 2024-12-11 16:03:57 字数 1747 浏览 0 评论 0原文

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

但是，问题是当我在模式对话框中插入 JavaScript 时，模式对话框将停止工作。有什么想法可以解决这个问题吗？非常感谢！

<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <!-- The Modal Dialog  -->
  <div id="modal-from-dom" class="modal hide fade">             
    <div class="modal-body">
        <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
                Peter

                <script type="text/javascript">
                    var linkURL = $('#linkURL').val();
                    //document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
                    document.write(linkURL);
                </script>


                <button type='submit' class='btn'>Add Link</button>
        </form>
    </div>
    </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="static" class="btn">Add Link</button>

    </div>
  </div>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
</body>

原文

I'm trying to 'add a link' functionality to my site. 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: 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.

However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!

<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <!-- The Modal Dialog  -->
  <div id="modal-from-dom" class="modal hide fade">             
    <div class="modal-body">
        <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
                Peter

                <script type="text/javascript">
                    var linkURL = $('#linkURL').val();
                    //document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
                    document.write(linkURL);
                </script>


                <button type='submit' class='btn'>Add Link</button>
        </form>
    </div>
    </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="static" class="btn">Add Link</button>

    </div>
  </div>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
</body>

分享到QQ

分享到微博

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

发布评论

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

偷得浮生 2024-12-18 16:03:57

有一些小问题会阻止您的脚本运行 Arman。

首先，您需要在标头中加载 jquery 和 bootstrap 脚本。浏览器在加载时解释页面，当浏览器点击 $("#linkURL") 的位时，它不知道如何处理它。

第二位是，当用户单击“添加链接”按钮时，您只能知道用户在 LinkURL 框中输入的内容。因此，您只能在此之后真正填充模式框。

鉴于此，您可以利用模型库提供的事件来为您填充此内容。

如果你把这些放在一起，你会得到这样的结果：

<html>
    <head>
        <title>Example</title>
        <script src="scripts/jquery.min.js" type="text/javascript"></script>
        <script src="scripts/bootstrap-modal.js" type="text/javascript"></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>
        <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">
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
    </body>
  </html>

那么你只需要稍微修改一下内容，你应该就可以开始了！

There's a couple of little things preventing your script from working Arman.

The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.

The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.

Given this, you can leverage the Events that the model library presents to populate this for you.

If you put this all together, you get this :

<html>
    <head>
        <title>Example</title>
        <script src="scripts/jquery.min.js" type="text/javascript"></script>
        <script src="scripts/bootstrap-modal.js" type="text/javascript"></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>
        <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">
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
    </body>
  </html>

Then you just need to modify the content a bit, and you should be right to go!

回复收藏 0 原文

~没有更多了~