从基本表单创建 PDF 确实有效，但是当我在动态表单上使用相同的方法时，它不再起作用

creating pdf from basic form does work but when i use the same method on my dynamic form it doens'nt work anymore

提问人：Thisw 提问时间：11/14/2023 最后编辑：Thisw 更新时间：11/14/2023 访问量：27

问：

已修复，我只是检查控制台广告播放一些所需的 CLASS=HIDDEN/VISIBLE 并将 DISBALED 选项的值更改为“”，因此它现在可以正常工作。OWJA，REOMVE 重复类显示字段和重复的 SDCRIPT 标记。这些字段现在是必填字段，并且需要可见，并且还需要选择选项。 新的工作代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final doc generator</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
    <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
</head>
<body>

    <form id="dynamicForm" onsubmit="generatePDF(); return false;">
        <!--select option thing-->
        <label for="selectOption">Selecteer document type:</label>
        <select id="selectOption" name="selectOption" onchange="showFields()" required>
            <option value="" disabled selected>-- Selecteer Optie --</option>
            <option value="Pakbon">Pakbon</option>
            <option value="Afleverbon">Afleverbon</option>
            <option value="Rma">RMA</option>
        </select>

        <!--define form values-->
        <!--basic form fields-->
        <div id="afleveradresField" class="visible">
            <label for="afleveradres">Afleveradres:</label>
            <input type="text" id="afleveradres" name="afleveradres" required>
        </div>
        <div id="verzenddatumField" class="visible">
            <label for="verzenddatum">Verzenddatum:</label>
            <input type="text" id="verzenddatum" name="verzenddatum" required>
        </div>
        <div id="contactpersoonField" class="visible">
            <label for="contactpersoon">Contactpersoon:</label>
            <input type="text" id="contactpersoon" name="contactpersoon" required>
        </div>
        <div id="telnummerField" class="visible">
            <label for="telnummer">Tel. nummer:</label>
            <input type="text" id="telnummer" name="telnummer" required>
        </div>

        <div id="referentieField" class="visible">
            <label for="referentie">Referentie:</label>
            <input type="text" id="referentie" name="referentie" required>
        </div>

        <div id="bijzonderhedenField" class="visible">
            <label for="bijzonderheden">Bijzonderheden:</label>
            <input type="text" id="bijzonderheden" name="bijzonderheden" required>
        </div>

        <!--special fields-->
        <!--pakbon-->

        <div id="pakbonFields" class="visible">
            <label for="handledBy">Afgehandeld door:</label>
            <input type="text" id="handledBy" name="handledBy" required>
        </div>

        <div id="pakbonAndRmaFields" class="visible">
            <label for="phoneHandler">Telefoonnummer:</label>
            <input type="tel" id="phoneHandler" name="phoneHandler" required>
        </div>

        <!--Afleverbon-->
        <div id="afleverbonAndRmaFields" class="visible">
            <label for="name">Naam:</label>
            <input type="text" id="name"  name="name" required>
        </div>
        <div id="afleverbonFields" class="visible" >
            <label for="date">Datum:</label>
            <input type="date" id="date"  name="date" required >
        </div>

        <!--Rma-->
        <div id="rmaFields" class="visible" >
            <label for="complaintDescription">Klachtomschrijving:</label>
            <input type="text" id="complaintDescription"  name="complaintDescription" required >
        </div>

        <button type="submit">Generate PDF</button>
    </form>

    <!-- <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script> -->
    <!-- <script src="https://rawgit.com/mwilliamson/mammoth.js/master/dist/browser/mammoth.browser.min.js"></script> -->

    <script>
        function generatePDF() {
           
    const form = document.getElementById('dynamicForm');
    const formData = new FormData(form);

    const htmlContent = `
        <h1>${formData.get('selectOption')}</h1>
        <p>Name: ${formData.get('name')}</p>
        <p>Datum: ${formData.get('date')}</p>
    `;

    if (formData.get('selectOption') === 'Afleverbon') {
        alert("Vergeet niet je handtekening in te vullen na het generen van je afleverbon. Gebruik bv. Adobe Acrobat");
    }

    html2pdf().from(htmlContent).save();
}


        

        function showFields() {
            // Get the selected option value
            const selectedOption = document.getElementById('selectOption').value;

            // Hide all fields with id specialFields
            //pakbon
            document.getElementById('pakbonFields').classList.add('hidden');
            document.getElementById('pakbonAndRmaFields').classList.add('hidden');

            //afleverbon
            document.getElementById('afleverbonAndRmaFields').classList.add('hidden');
            document.getElementById('afleverbonFields').classList.add('hidden');

            //rma
            document.getElementById('rmaFields').classList.add('hidden');

            // Show the fields based on the selected option
            if (selectedOption === 'Pakbon') {
                document.getElementById('pakbonFields').classList.remove('hidden');
                document.getElementById('pakbonAndRmaFields').classList.remove('hidden');
            } else if (selectedOption === 'Afleverbon') {
                document.getElementById('afleverbonAndRmaFields').classList.remove('hidden');
                document.getElementById('afleverbonFields').classList.remove('hidden');
            } else if (selectedOption === 'Rma') {
                document.getElementById('pakbonAndRmaFields').classList.remove('hidden');
                document.getElementById('afleverbonAndRmaFields').classList.remove('hidden');
                document.getElementById('rmaFields').classList.remove('hidden');
            }
        }
    </script>
</body>
</html>

问题： 我正在尝试从输入表单创建 pdf。 我在这里阅读了很多相关主题，但我还没有找到答案。 输入表单是基于选择选项的动态表单。 我写了一个小脚本：

<head>
    
    <title>test</title>
    <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
</head>
<body>
    <form id="pdf-form" onsubmit="generatePDF(); return false;">
        <label for="name">Name:</label>
        <input type="text" id="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <br>
        <button type="submit">Generate PDF</button>
    </form>

    <script>
        function generatePDF() {
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;

            const content = `
                <h2>Form Data</h2>
                <p><strong>Name:</strong> ${name}</p>
                <p><strong>Email:</strong> ${email}</p>
            `;

            // Create PDF using html2pdf.js
            html2pdf(content, {
                margin: 10,
                filename: 'output.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
            });
        }
    </script>

当我单击“提交”或“生成 PDF”按钮时，将生成 PDF，但是当我在动态表单上尝试相同的操作时，单击了按钮，但它不会生成 PDF，是的，因为我知道我已经将 required 放入我的输入类型中，我已经填写了所有字段。 这是我当前的动态表单代码，我不知道我做错了什么。

    <title>Final doc generator</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
    <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
</head>
<body>

    <form id="dynamicForm" onsubmit="generatePDF(); return false;">
        <!--select option thing-->
        <label for="selectOption">Selecteer document type:</label>
        <select id="selectOption" name="selectOption" onchange="showFields()" required>
            <option value="SelectOption" disabled selected>-- Selecteer Optie --</option>
            <option value="Pakbon">Pakbon</option>
            <option value="Afleverbon">Afleverbon</option>
            <option value="Rma">RMA</option>
        </select>

        <!--define form values-->
        <!--basic form fields-->
        <div id="afleveradresField" class="visible">
            <label for="afleveradres">Afleveradres:</label>
            <input type="text" id="afleveradres" name="afleveradres" required>
        </div>
        <div id="verzenddatumField" class="visible">
            <label for="verzenddatum">Verzenddatum:</label>
            <input type="text" id="verzenddatum" name="verzenddatum" required>
        </div>
        <div id="contactpersoonField" class="visible">
            <label for="contactpersoon">Contactpersoon:</label>
            <input type="text" id="contactpersoon" name="contactpersoon" required>
        </div>
        <div id="telnummerField" class="visible">
            <label for="telnummer">Tel. nummer:</label>
            <input type="text" id="telnummer" name="telnummer" required>
        </div>

        <div id="referentieField" class="visible">
            <label for="referentie">Referentie:</label>
            <input type="text" id="referentie" name="referentie" required>
        </div>

        <div id="bijzonderhedenField" class="visible">
            <label for="bijzonderheden">Bijzonderheden:</label>
            <input type="text" id="bijzonderheden" name="bijzonderheden" required>
        </div>

        <!--special fields-->
        <!--pakbon-->

        <div id="pakbonFields" class="hidden">
            <label for="handledBy">Afgehandeld door:</label>
            <input type="text" id="handledBy" name="handledBy" required>
        </div>

        <div id="pakbonAndRmaFields" class="hidden">
            <label for="phoneHandler">Telefoonnummer:</label>
            <input type="tel" id="phoneHandler" name="phoneHandler" required>
        </div>

        <!--Afleverbon-->
        <div id="afleverbonAndRmaFields" class="hidden">
            <label for="name">Naam:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div id="afleverbonFields" class="hidden">
            <label for="date">Datum:</label>
            <input type="date" id="date" name="date" required>
        </div>

        <!--Rma-->
        <div id="rmaFields" class="hidden">
            <label for="complaintDescription">Klachtomschrijving:</label>
            <input type="text" id="complaintDescription" name="complaintDescription" required>
        </div>

        <button type="submit">Generate PDF</button>
    </form>

    <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
    <script src="https://rawgit.com/mwilliamson/mammoth.js/master/dist/browser/mammoth.browser.min.js"></script>

    <script>
        function generatePDF() {
            function generatePDF() {
    const form = document.getElementById('dynamicForm');
    const formData = new FormData(form);

    const htmlContent = `
        <h1>${formData.get('selectOption')}</h1>
        <p>Name: ${formData.get('name')}</p>
        <p>Datum: ${formData.get('date')}</p>
    `;

    if (formData.get('selectOption') === 'Afleverbon') {
        alert("Vergeet niet je handtekening in te vullen na het generen van je afleverbon. Gebruik bv. Adobe Acrobat");
    }

    html2pdf().from(htmlContent).save();
}


        }

        function showFields() {
            // Get the selected option value
            const selectedOption = document.getElementById('selectOption').value;

            // Hide all fields with id specialFields
            //pakbon
            document.getElementById('pakbonFields').classList.add('hidden');
            document.getElementById('pakbonAndRmaFields').classList.add('hidden');

            //afleverbon
            document.getElementById('afleverbonAndRmaFields').classList.add('hidden');
            document.getElementById('afleverbonFields').classList.add('hidden');

            //rma
            document.getElementById('rmaFields').classList.add('hidden');

            // Show the fields based on the selected option
            if (selectedOption === 'Pakbon') {
                document.getElementById('pakbonFields').classList.remove('hidden');
                document.getElementById('pakbonAndRmaFields').classList.remove('hidden');
            } else if (selectedOption === 'Afleverbon') {
                document.getElementById('afleverbonAndRmaFields').classList.remove('hidden');
                document.getElementById('afleverbonFields').classList.remove('hidden');
            } else if (selectedOption === 'Rma') {
                document.getElementById('pakbonAndRmaFields').classList.remove('hidden');
                document.getElementById('afleverbonAndRmaFields').classList.remove('hidden');
                document.getElementById('rmaFields').classList.remove('hidden');
            }
        }
    </script>

如果有人能帮助我，我将不胜感激。 谢谢！

JavaScript HTML 表单 函数 PDF

评论

0赞 Ocaso Protal 11/14/2023
控制台中是否有错误消息？
0赞 Thisw 11/14/2023
@OcasoProtal在控制台中，我首先收到一些字段不可聚焦的消息，所以当我将隐藏的类形式更改为可见字段的错误时，我还需要通过一些字段来删除所需的参数。控制台不再给出错误，但我的代码也可以工作。我更改的字段是名称，日期和投诉描述。
1赞 tacoshy 11/14/2023
用大写字母书写是大喊大叫，这被认为是不礼貌的。全部用大写字母书写确实会使文本更难阅读，但它不会引起您期望的关注。它得到的唯一关注来自忽略列表......

答： 暂无答案

上一个：在与其他数据一起提交表单时，带有类型按钮的输入元素的名称-值对是否会在发布请求的正文中传递？

下一个：表单操作值未更新 - Javascript &amp; React