Learn free online HTML5, javascript, and jquery Tutorials by Examples

Tuesday 25 September 2018

Save html form as html file with submitted values in jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="name" placeholder="Name" type="text" />
<br />
<input id="email" placeholder="Email" type="text" />
<br />
<button id="saveFile" type="button">Submit</button>
  <br />
<a href="javascript:void(0);" id="btn_download">Download</a>

</div>
<script>
    $(document).ready(function(){
       $('#saveFile').click(function(){
        var htmlContent = "";
         htmlContent = "<h1>
         Name - " + $('#name').val() + "</h1>
         <br>" +
         "<p>  Email - " + $('#email').val() + "</p>";

         $('#btn_download').attr('download', 'sampleFile.html');
         $('#btn_download').attr('href', 'data:text/html,' + htmlContent);
         $('#btn_download').show();
       });
    });
</script>

No comments:

Post a Comment