JavaScript: сохранить форму HTML и данные флажка в файл .txt без сервера? - PullRequest
Новая
       2

JavaScript: сохранить форму HTML и данные флажка в файл .txt без сервера?

2 голосов
/ 12 июня 2019

У меня есть HTML-форма с вводом текста и флажков, и я хочу загрузить эти данные формы в текстовый файл при отправке формы.

Я нашел решение для загрузки данных из текстового поля в текстовый файл, но я не знаю, как изменить его для ввода дополнительных текстовых полей и флажков, которые мне требуются.

Вот мой текущий код: 

<html>
    <head>
        <script language="Javascript">
            function download(filename, text) {
                var pom = document.createElement('a');
                pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
                    encodeURIComponent(Notes));
                pom.setAttribute('download', filename);
                pom.style.display = 'none';
                document.body.appendChild(pom);
                pom.click();
                document.body.removeChild(pom);
            }
            function addTextTXT() {
                document.addtext.name.value = document.addtext.name.value + ".txt"
            }
        </script>
    </head>
    <body>
        <form name="addtext" onsubmit="download(this['name'].value, this[’Notes’].value)">
            Notes:<input type="text" name=“Note/Users/karlahaiat/Desktop/Copia de checklist.htmls”><br>
            Initials:<input type="text" name=“Initials”><br>
            <input type="checkbox" name=“check_list[]” value=“Check General Health”>
            <b>Check General Health.</b><br>
            <input type="checkbox" name=“check_list[]” value=“Check Fluid”>
            <b>Check Fluid.</b><br>
            <input type="text" name="name" value="" placeholder="File Name">
            <input type="submit" onClick="addTexttxt();" value="Save As TXT">
        </form>
    </body>
</html>

В приведенной выше форме показаны поля ввода, которые мне нужны в моей форме, однако текстовый файл не будет загружен. Любая помощь в понимании синтаксиса была бы отличной!

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Ваш код довольно близок к рабочему решению - рассмотрите возможность внесения следующих изменений в свой код (как показано во фрагменте ниже):

  • избегайте смешивания " с символом ” в вашей HTML-разметке
  • обеспечить правильные имена полей и избегать атрибута name этой формы: name=“Note/Users/karlahaia..
  • рассмотрите возможность использования addEventListener() для привязки логики событий к вашему HTML, а не использование встроенных onclick, onsubmit и т. Д., Как вы в настоящее время
  • также рассмотрите возможность настройки логики формы после загрузки страницы через событие DOMContentLoaded. Это гарантирует, что элементы формы и ввода, от которых зависит ваш скрипт, присутствуют до того, как ваш скрипт попытается получить к ним доступ 

/* Run script after DOMContentLoaded event to ensure form element is 
present */
document.addEventListener("DOMContentLoaded", function() {
  /* Obtain form element via querySelector */
  const form = document.querySelector('form[name="addtext"]');

  /* Bind listener to forms submit event */
  form.addEventListener("submit", function(event) {
    /* Prevent browsers default submit and page-reload behavior */
    event.preventDefault();

    /* Obtain values from each field in form */
    const notes = form.querySelector('input[name="notes"]').value;
    const initials = form.querySelector('input[name="initials"]').value;
    const checkFluid = form.querySelector('input[name="check-fluid"]').checked;
    const checkHealth = form.querySelector('input[name="check-health"]').checked;
    const filename = form.querySelector('input[name="name"]').value + ".txt";

    /* Compose text file content */
    const text = `
    notes:${notes}
    initials:${initials}
    check health (checkbox):${checkHealth}
    check fluid (checkbox):${checkFluid}
    `;

    /* Create temporary link element and trigger file download  */
    const link = document.createElement("a");
    const href = "data:text/plain;charset=utf-8," + encodeURIComponent(text);
    link.setAttribute("href", href);
    link.setAttribute("download", filename);

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
  });
});
<!-- Ensure that the name attribute does not include invalid characters 
or nested "" which cause confusion-->
<form name="addtext">
  Notes:<input type="text" name="notes" /><br /> Initials:

  <input type="text" name="initials" /><br />

  <input type="checkbox" name="check-health" value="Check General Health" />
  <b>Check General Health.</b><br />

  <input type="checkbox" name="check-fluid" value="Check Fluid" />
  <b>Check Fluid.</b><br />

  <input type="text" name="name" value="" placeholder="File Name" />
  <input type="submit" value="Save As TXT" />
</form>

Надеюсь, это поможет!

0 голосов
/ 12 июня 2019

Замечания:

  1. Каждый действительный документ HTML 5 должен иметь тип документа, упомянутый в самом начале, например: <!DOCTYPE html>

2. Ваш подход хорош, но метод click () для якорей устарел в Firefox. Поэтому мы должны вручную отправить событие click на привязку hiddent, содержащую код URLE нашего TXT-файла.

Цитируется по https://stackoverflow.com/a/1421770/8896148

Метод click предназначен для использования с элементами INPUT типа Кнопка, флажок, радио, сброс или отправить. Геккон не реализует нажмите метод на других элементах, которые могут ожидать ответа щелчки мышью, такие как ссылки (элементы A), и не обязательно событие щелчка других элементов.

DOM не от Gecko могут вести себя по-разному.

  1. Имя функции в onClick="addTexttxt()" было написано с ошибкой. Это addTextTXT(). JavaScript чувствителен к регистру!

  2. Вместо прямого вызова функции download(filename, text) мы должны вместо этого вызвать промежуточную функцию, которая должна собрать все данные из вашей формы и превратить их в красивую текстовую строку. Затем мы передадим эту строку в функцию загрузки, чтобы превратить ее в файл, готовый для загрузки.

  3. В onsubmit="someFunctionCall()" мы должны вернуть false, если мы не хотим отойти от страницы (или перезагрузить ее). Таким образом, мы пошли на передачу значения, возвращаемого someFunctionCall (), добавив возврат перед вызовом: onsubmit="return someFunctionCall()". Таким образом, мы можем решить внутри функции someFunctionCall (), хотим ли мы отойти или нет, вернув true или false.

  4. Текстовые описания для флажка и радио должны быть помещены внутри <label for="idOfTheInput">, чтобы пользователь мог щелкнуть текст, и флажок все еще будет активирован.

Вот обновленная версия 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="Javascript" >

            function download(filename, text){

                var pom = document.createElement('a');
                pom.style.display = 'none';
                document.body.appendChild(pom);

                pom.setAttribute('download', filename);
                pom.setAttribute('href', 'data:text/plain;charset=utf-8,'
                    + encodeURIComponent(text));

                pom.click();
                document.body.removeChild(pom);

            }

            //- SIDE NOTE for addTextTXT()
            //- This function works as it is, but it's a little sketchy using
            //- document.addtext directly inside it. The input we want to check
            //- should be passed as a parameter, if in the future we wish to
            //- extend this code to work with multiple forms in the same page.
            //- It's good for now, though
            
            function addTextTXT(){

                //- You may as well do some field validation here, and rename this
                //- function validate()

                //- Check if the last 4 characters of filename are already ".txt" or ".TXT"
                //- or any other variation of lower-case and upper-case
                if(document.addtext.filename.value.substr(-4).toLowerCase() != ".txt"){
                    //- Append ".txt" if missing
                    document.addtext.filename.value += ".txt"
                }
            }

            //- This function collects all the data present inside the form
            //- formats it accordingly, and passes the entyre text content
            //- to the download() function above
            function downloadData(formElement){

                //- We start with an initially empty file content
                var text = "";

                //- We itterate through all the form's inputs
                for(var i=0; i<formElement.length; i++){
                    var input = formElement[i];
                    //- We discard the submit button and the filename field.
                    //- If you remove this if statement the file will contain
                    //- all the inputs.
                    if(input.type == "text" && input.name != "filename"){
                        //- We append to the file content the name of the fiend
                        //- and it's value in single quotes (i like to quote them
                        //- to spot empty fields or to easily debug them later)
                        //- We append after each value an epty line: \n
                        text += input.name + "='" + input.value + "'\n";
                    }else if(input.type =="checkbox"){
                        text += "[" + (input.checked ? "x" : " ") + "] " + input.name + "\n";
                    }
                }

                //- Now the text variable contains all the info, so we send it
                //- for downloading
                download(formElement.filename, text);


                //- If we wish, we prevent navigation or page reload by returning false
                return false;
            }


        </script>
    </head>
    <body>

        <form name="addtext" onsubmit="return downloadData(this);">

            Notes:<input type="text" name=“Notes” value=""><br>
            Initials:<input type="text" name=“Initials” value=""><br>

            <input type="checkbox" name="Check General Health"> <b>Check General Health.</b><br>
            <input type="checkbox" name="Check Fluid"> <b>Check Fluid.</b><br>

            <input type="text" name="filename" placeholder="File Name">
            <input type="submit" onClick="addTextTXT();" value="Save As TXT">

        </form>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...