从可编辑的H2到输入获取数据

Question

I have one editable h2 tag and one editable p ta and two inputs and I am trying to get the data from editable h2 and p tags and assign them to the inputs. 我有一个可编辑的h2标签和一个可编辑的p ta，以及两个输入，我正在尝试从可编辑的h2和p标签获取数据并将其分配给输入。 How can I make that? 我该怎么做？ Here is my code: 这是我的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    </head>
    <body class="yin">
                    <nav id="nav">
                <ul class="links">
                    <li><h3 class="heading-title">Publish</h3>

                <p style="font-size: 10px; line-height: 18px; margin-top: -15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
                    <li><h3 class="heading-title sub">cover</h3></li>
                        <input type="button" name="upload" value="Upload" >
                    <li><h3 class="heading-title sub">blurb</h3></li>
                        <textarea name="blurb" id="blurb" placeholder="170 character limit. Keep it short. Keep it sweet." maxlength="170"></textarea>
                    <li><h3 class="heading-title sub">genre</h3></li>
                         <select id="genre" name="genre">
                            <option value="Fantasy">Fantasy</option>
                            <option value="Romance">Romance</option>
                            <option value="Humor">Humor</option>
                            <option value="Adventure">Adventure</option>
                            <option value="Personal">Personal</option>
                            <option value="Horror">Horror</option>
                         </select>
                        <a href="#" class="subscribe">+</a>
                        <a href="#" id="sub-publish" class="publish" onclick="document.getElementById('theSbmit').click()" >Publish</a>

                        <!-- damn contenteditable can't be passed on --><form id="form" method="post">
                        <input type="text" name="title" id="form-title"></input>
    <textarea name="story" id="form-message"></textarea>
    <input type="submit" id="theSubmit" value="submit"></input></form>

                        <!-- save -->

                    <li><h3 class="heading-title">save</h3>
                    <p style="font-size: 10px; line-height: 18px; margin-top: -15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
                    <li><h3 class="heading-title sub">notes</h3></li>
                        <textarea id="notes" placeholder="Reminders and/notes to yourself?"></textarea>
                        <a href="#" class="publish">Save</a>
                 </ul>
            </nav>


    <!-- Main -->
            <section id="main" class="wrapper" style="overflow-x: hidden;">
                <div class="container">

                    <header class="major special">
                        <h2 contenteditable="true" id="titled">Your Title</h2>
                        <p>Chapter 1</p>
                    </header>
                    <article >
                    <p id="storyd" contenteditable="true">Vi accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.</p>

                    </article>

                </div>
            </section>

        <!-- JS -->
    <script type="text/javascript">
var $form = $('form');
$form.submit(function(e) {
    var title = $('#titled').text(),
    var story = $('#storyd').text();

    $form.find('input[name="title"]').val(title);
    $form.find('input[name="story"]').val(story);
return false;


});

        </script>

        </body>
</html>

The inputs are on nav and the editable h2 and p on section. 输入在nav上，可编辑的h2和p在部分上。 Please help! 请帮忙！

Answer 1

Your code appears to be working apart from there is one small mistake. 您的代码似乎在工作，除了一个小错误。 In your JS the line var title = $('#titled').text(), ends with a comma ( , ) rather than a semi-colon ( ; ). 在您的JS中，行var title = $('#titled').text(),以逗号（ , ）而不是分号（ ; ）结尾。

You also may wish to use e.preventDefault(); 您可能还希望使用e.preventDefault(); in the first line of your form submit function to prevent the page redirecting to the form post destination. 在表单提交功能的第一行中，以防止页面重定向到表单发布目标。 Hope this helps! 希望这可以帮助！

Answer 2

As noted by Zak, you have placed a comma instead of a semi-colon at the end of var title = $('#titled').text() 如Zak所述，您在var title = $('#titled').text()的末尾放置了逗号而不是分号var title = $('#titled').text()

Also, $form.find('input[name="story"]').val(story); 此外， $form.find('input[name="story"]').val(story); should be $form.find('textarea[name="story"]').val(story); 应该是$form.find('textarea[name="story"]').val(story);

从可编辑的H2到输入获取数据

问题描述

2 个解决方案

解决方案1
1 2015-09-04 20:02:40

解决方案2
-1 2015-09-04 20:19:08

从可编辑的H2到输入获取数据

问题描述

2 个解决方案

解决方案1 1 2015-09-04 20:02:40

解决方案2 -1 2015-09-04 20:19:08

解决方案1
1 2015-09-04 20:02:40

解决方案2
-1 2015-09-04 20:19:08