We Keep Coding

Javascript with HTML *and* input field data

I have this script code in a current page I'm working on - it returns the HTML for the document. The alert was just debug to see if this code was running. The current HTML it returns is only the last part of the document, but at least it returns something...
<script type="text/javascript">
function getHtml() {
var html_source = document.createElement("INPUT");
html_source.type = "hidden";
html_source.name = "html_source";
html_source.value = document.documentElement.outerHTML;
document.forms[0].appendChild(html_source);
alert('getHtml(): completed...');
}
</script>
What I need this code to actually do is return the entire page as the HTML string (this page has lots of text fields and other controls), and I need the HTML to actually be marked up with all field data that is currently filled out on the form. I think this would mean that the value fields for all text inputs would be modified to contain what the control currently contains, returning the HTML as a string like above.
Does anyone have code that will do this? The reason I need the HTML like that with all fields filled out is so I can convert the HTML form to a PDF document that already has input field data entered, as if the form was already filled out.
The above script will return the HTML, but if I add data to some of the fields in that section of the HTML document, that data isn't evident in the string that code returns. I need that code to return all the data as well, associated with each field.
I hope this makes sense; basically I'm trying capture to a 100% an HTML document as a string that was already filled out by a user, at the time they click Submit. Once I have that string, I can do whatever I want with it including send it to another browser instance where it would be rendered as already filled out, or more to the point for me, to a PDF file renderer, converting the HTML form into a PDF file that is already filled out.

how to alert filename of uploaded file in squarespace form?

I have a form on a page in SquareSpace that allows an image file to be uploaded:-
https://www.colourourstory.com/uploads (try with dummy data if needed).
I need to add the filename of the uploaded image to a hidden field named "SQF_FILENAME" which already exists.
Any tips on how do I do this please as the value is only available after a successful upload?
Thanks
Jonathan

I can suggest using some jQuery.
For example, you can hook a function to the change event of the input[type="file"] and grab its value. Then all you need to do is set the value to your hidden field.
Here is a short code example:
$('.form-block').on('change', 'input[type="file"]', function() {
console.log($(this));
console.log($(this).val());
const fileName = $(this).val().split('C:\\fakepath\\').pop();
$('input[name="SQF_FILENAME"]').val(fileName);
});
Hope this helps.
Cheers.

JS: Submit or transfer input values to another HTML File?

Description:
I created this workflow: PHP loads content from a database to certain textareas. The user can edit and save content.
I created a HTML template which can be printed directly from the web browser.
So the user clicks on the "Print" button and gets a nice template which can be printed directly from the browser.
Goal:
I want jQuery or JavaScript to load / transfer the content from the input fields to another HTML document on the server, in certain div-classes.
Is this generally possible or a good idea?
Afterwards, this becomes loaded and the print dialogue of the web browser will be opened.
Present Code:
$(document).ready(function() {
$( ".print-button" ).click(function() {
$('html').load("./views/print/template-1.html");
setTimeout(function(){
window.print();
}, 1000);
})
window.onafterprint = function(e){
$(window).off('mousemove', window.onafterprint);
window.location.href = window.location.href;
};
});
So template-1.html should get the data.

First of all I think it would be a good idea to support the build in functionality of the browser. The user should be able to hit Ctrl+P or use the menu to open the print dialog.
My suggestion would be to create a <div> element that is hidden. On some event, like when the <textarea> is changed, update the <div> element with the content. Create a stylesheet for printing where the <div> element is visible and hide elements that are not for printing (like the <textarea>).

As per the description, you have mentioned that you are allowing PHP to load the data in certain text-areas and allows user to update that, so when you update this data, it'll be saving into the database for that particular text-area.
What best you can do here is keep one unique key for that shown data and when you redirect the page bind the unique key along with the page URL, so using that key on the new page where you have the template, you can get the data using select query and you can print the data wherever you want.
Afterwords on print click, the template will have the data filled in and so the user will be able to download/print the template with data, the way you wanted.
Or
If you don't want to use the PHP for getting data on the new document, you can simply pass the data object in localstorage by using below way :
var content= <your data Object>;
localStorage.setItem('print_content', content);
Now before loading the dialogue, get the data from localstorage variable and print it to div or area wherever you want. For getting data from localstorage use below way:
var printData = localStorage.getItem('print_content');
using printData var, you'll be able to get the data and using jQuery syntax you'll be able to append or display the data to div.

how to get name of dynamically generated text input in php

I want to make a page like this
http://agprotective.com.au/invoice/invoice.htm
There someone can add multiple date,site,start time, end time, hours amount by click the button + or can remove the row using - sign button. How can I get the value of that input in php? Normarlly we use $_POST['here-is-the-value-of-name-attribute-of-the-input-tag'];
But in the case http://agprotective.com.au/invoice/invoice.htm , I do not know what will be the value of the name attribute of the tag.
Can anyone tell me how to get the values of the dynamically generated (button generated) input tags and then send them to database.

The correct way to do this is simple:
<input name="myinput[]" />
PHP will then have:
$_POST['myinput'][0], $_POST['myinput'][1]...
The page you linked does it in a stupid manner, if I'm honest.

Open input file with hidden visibility JS

I have an input file with hidden visibility :
<input type="file" id="fileupload" name="upload" style="visibility: hidden;" />
But I want to use it, without showing it. I will trigger the event through a-tag(hyperlink).
There I have:
//that's fine, open file dialog
document.getElementById('fileupload').click();
//can not take the value of file chosen?
var x = document.getElementById('fileupload').value;
console.log(x);
So how can I take the chosen file without displaying the input ? Is this possible?

You only want to display the filename when someone adds a file?
You could add an eventListener to your file to retrieve the filename:
document.getElementById('fileupload').onchange = function(e) {
console.log(e.target.value);
}
But to upload a file you can just add this hidden file field to a form and submit it.

The first question in my mind is why dont you use jQuery, as its easier.
Second, the input will not actually hold the file per se, but a reference to it. The file will be sent via post (or get) and manipulated server side. Maybe I don't understand correctly what you're trying to do.