How can I get my third party script to correctly function on my website?


#1

When the user fills out my form and clicks on the button “Generate CV”. The HTML form should automatically download as a PDF to the users download folder.

Problem one:

I tried using this third party plugin but can’t get it to function correctly as when I click on the <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> button nothing happens. How can I get this to work?

Inspect errors

Problem two:

How can I get this button <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> to look like <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV"> I did use the same class. However, I think that class information in bootstrap only applies to the <input> tag so how can I get around this issue?

Below is my current code

     <!-- Form-->
     <section class="module bg-gray text-center divider-bottom p-3">
        <div class="container">
           <div class="row">
              <div class="col-md-12">
                 <form id="contact-form" method="post" novalidate>
                    <div class="row">
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <p></p>
                          <div class="text-center">
                             <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                             <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>
                          </div>
                       </div>
                    </div>
                 </form>
                 <!-- Ajax response-->
                 <div class="ajax-response text-center" id="contact-response"></div>
              </div>
           </div>
        </div>
     </section>
     <!-- Form end-->

Here is the location of where I put the third party script.

      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
</html>
</body>

FULL WEBPAGE CODE BELOW IF REQUIRED

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>CV expert | Developed by Liam Docherty</title>
      <!-- Plugins -->
      <link href="assets/css/plugins.min.css" rel="stylesheet">
      <!-- Animate CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600%7cPlayfair+Display:400i" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <!-- CSS -->
      <link href="assets/css/design.css" rel="stylesheet">
   </head>
   <body>
      <!-- GOOGLE AN -->
      <!-- Global Site Tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129603102-1"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());

         gtag('config', 'UA-129603102-1');
      </script>
      <!-- GOOGLE AN end-->
      <!-- Header-->
      <header class="header header-transparent">
         <div class="container-fluid">
            <!-- Brand-->
            <div class="inner-header"><a class="inner-brand" href="index.html">CVE</a></div>
            <!-- Navigation-->
            <div class="inner-navigation collapse">
               <div class="inner-nav">
                  <ul>
                     <li><a href="index.html"><span class="menu-item-span">Home</span></a></li>
                     <li><a href="about.html"><span class="menu-item-span">About Us</span></a></li>
                     <li><a href="services.html"><span class="menu-item-span">Services</span></a></li>
                     <li><a href="portfolio.html"><span class="menu-item-span">CV Maker</span></a></li>
                     <li><a href="contact.html"><span class="menu-item-span">Contact Us</span></a></li>
                  </ul>
               </div>
            </div>
            <div class="extra-nav">
               <ul>
                  <li class="nav-toggle"><a href="#" data-toggle="collapse" data-target=".inner-navigation"><span class="menu-item-span"><i class="ti-menu"></i></span></a></li>
               </ul>
            </div>
         </div>
      </header>
      <!-- Header end-->
      <!-- Wrapper-->
      <div class="wrapper">
         <!-- Hero-->
         <section class="module-cover parallax text-center" data-background="assets/images/apple-computer-desk-41227.jpg" data-overlay="0.85">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <h2>CV Maker</h2>
                     <p>Below represents a CV maker program which converts the form to a word file document.</p>
                  </div>
               </div>
            </div>
         </section>
         <!-- Hero end-->

         <!-- Form-->
         <section class="module bg-gray text-center divider-bottom p-3">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <form id="contact-form" method="post" novalidate>
                        <div class="row">
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <p></p>
                              <div class="text-center">
                                 <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                                 <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">PDF this page!</a>
                              </div>
                           </div>
                        </div>
                     </form>
                     <!-- Ajax response-->
                     <div class="ajax-response text-center" id="contact-response"></div>
                  </div>
               </div>
            </div>
         </section>
         <!-- Form end-->

      <!-- Copyright -->
      <div class="footer-copyright text-center text-black py-3">© Copyright 2018 Handcrafted By Zeplur. All Rights Reserved |
         <a href="terms.pdf">Terms and conditions</a>
      </div>
      <!-- To top button--><a class="scroll-top" href="#top"><i class="fas fa-angle-up"></i></a>
      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
   </body>
</html>

#2

Are you loading the web page from a web server or just opening the html file from your desktop?

The screenshot of your errors contains a lot of file://which suggests you’re just opening an html file from your desktop.


#3

The issue was that it don’t work locally but when uploaded it functions fine.

Thanks for the response.


#4

its never going to work locally.

all the security in the browser is based on http/https and domain origins… you dont have any of that just opening a file from your desktop, only when served from an http server