從可編輯的H2到輸入獲取數據

Question

我有一個可編輯的h2標簽和一個可編輯的p ta，以及兩個輸入，我正在嘗試從可編輯的h2和p標簽獲取數據並將其分配給輸入。 我該怎么做？ 這是我的代碼：

<!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>

輸入在nav上，可編輯的h2和p在部分上。 請幫忙！

Answer 1

您的代碼似乎在工作，除了一個小錯誤。 在您的JS中，行var title = $('#titled').text(),以逗號（ , ）而不是分號（ ; ）結尾。

您可能還希望使用e.preventDefault(); 在表單提交功能的第一行中，以防止頁面重定向到表單發布目標。 希望這可以幫助！

Answer 2

如Zak所述，您在var title = $('#titled').text()的末尾放置了逗號而不是分號var title = $('#titled').text()

此外， $form.find('input[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