Html форма с flask - проблема с передачей значений таблицы в файл CSV - PullRequest
0 голосов
/ 17 апреля 2020

Я новичок в python и надеюсь, что кто-то на этом форуме поможет мне решить мою проблему.

В форме. html file У меня есть таблица с именем myTable , в которую можно добавлять / удалять несколько строк. Я пытаюсь добиться того, чтобы собрать все возможные значения для каждой строки, добавленной в эту таблицу, и сохранить ее в файле output.csv.

Требуемый файл output.csv:

requestPhoneNr    requestTopic    requestDescription requestOriginator 
 +615331234       Hello World      This is a test.       John Doe
 +1800324567      Greetings!!!     My test description.   Ana Doe
  ...

Моя проблема: если в myTable добавлено более одной строки (форма. html), только значения для первой строки сохраняются на выходе .csv вместо всех значений из нескольких строк. Может ли кто-нибудь помочь мне понять это правильно? Спасибо!

myform.py

from flask import Flask, render_template, request
import csv


app = Flask(__name__)

@app.route('/')
def myForm():
   return render_template('form.html')

@app.route('/steptwo',methods = ['POST', 'GET'])
def steptwo():
   if request.method == 'POST':

        requestPhoneNr = request.form['requestPhoneNr']
        requestTopic = request.form['requestTopic']
        requestDescription = request.form['requestDescription']
        requestOriginator = request.form['requestOriginator']

        fieldnames = ['requestPhoneNr', 'requestTopic', 'requestDescription', 'requestOriginator']


        with open('output.csv','w') as inFile:
            writer = csv.DictWriter(inFile, fieldnames=fieldnames)

            # writerow() will write a row in your csv file
            writer.writerow({'requestPhoneNr': requestPhoneNr, 'requestTopic': requestTopic, 'requestDescription': requestDescription, 'requestOriginator': requestOriginator})

        return 'Thanks for your input!'



if __name__ == '__main__':
   app.run(debug = True)

форма. html:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <body>

      <form action = "http://localhost:5000/steptwo" method = "POST" id='myForm'>
         <p>ID <input type = "text" name = "id" /></p>
         <p>Name <input type = "text" name = "name" /></p>
         <p>Email <input type = "text" name = "email" /></p>
         <p>Website <input type ="text" name = "website" /></p>
         <p>



<table id="myTable" style="border: 1px solid black">
<th>requestPhoneNr</th><th>requestTopic</th><th>requestDescription</th><th>requestOriginator</th><th></th>
    <tr>
        <td>
            <input type="text" name="requestPhoneNr" class="requestPhoneNr" />
       </td>
        <td>
            <input type="text" name="requestTopic" class="requestTopic" />
        </td>
                <td>
            <input type="text" name="requestDescription" class="requestDescription" />
        </td>
        <td>
            <input type="text" name="requestOriginator" class="requestOriginator" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
</table>
<p>
    <input type="button" value="Insert row">
</p> 
<script>
$('#myTable').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
})
    $('p input[type="button"]').click(function () {
     $('#myTable').append('<tr><td><input type="text" name="requestPhoneNr" class="requestPhoneNr" /></td><td><input type="text" name="requestTopic" class="requestTopic" /></td><td><input type="text" name="requestDescription" class="requestDescription" /></td><td><input type="text" name="requestOriginator" class="requestOriginator" /></td><td><input type="button" value="Delete" /></td></tr>')
});
</script>
</p>

     <p><input type = "submit" value = "submit" /></p>
  </form>
      <script>
$('#myForm').submit((e) => {
    e.preventDefault();

    var items = [];
    $('#myTable tr').each((i, el) => {
        var item = {};

        var inputs = $(el).find("input").each((i, inputEl) => {
            if (inputEl.type != "text") {
                return;
            }

            var name = $(inputEl).attr("name");
            var val = $(inputEl).val();
            item[name] = val;
        });

        items.push(item);
    });

    // remove empty object made from table header
    items = items.filter(i => Object.keys(i).length != 0);

      $.ajax({
        url: e.target.action,
        crossDomain: true,
        method: e.target.method,
        contentType: "application/json",
        data: items,
        headers: {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
        success: function () {
            // TODO: do success behaviors
        }
    });
});
    </script>
       </body>
    </html>

@ Raffy Alcoriza Я пытаюсь включить ваш ответ ниже в мою форму. html. Однако теперь, когда я нажимаю кнопку «Отправить», ничего не происходит. Я зарегистрировался в Web Inspector и получил следующие ошибки:

enter image description here

enter image description here

Будете ли вы могу сказать что я делаю не так? (также я предполагаю, что в myform.py нет никаких изменений) спасибо!

1 Ответ

0 голосов
/ 18 апреля 2020

Вам может потребоваться переопределить кнопку отправки, чтобы получить все строки и скомпилировать их сначала в массив элементов перед отправкой.

$('#myForm').submit((e) => {
    e.preventDefault();

    var items = [];
    $('#myTable tr').each((i, el) => {
        var item = {};

        var inputs = $(el).find("input").each((i, inputEl) => {
            if (inputEl.type != "text") {
                return;
            }

            var name = $(inputEl).attr("name");
            var val = $(inputEl).val();
            item[name] = val;
        });

        items.push(item);
    });

    // remove empty object made from table header
    items = items.filter(i => Object.keys(i).length != 0);

    $.ajax({
        url: e.target.action,
        method: e.target.method,
        contentType: "application/json",
        data: items,
        success: function () {
            // TODO: do success behaviors
        }
    });
});

Обязательно добавьте атрибут name к вашему динамически сгенерированные строки таблицы, как и в предыдущем случае:

$('p input[type="button"]').click(function () {
    $('#myTable').append(`
        <tr>
            <td>
                <input type="text" name="requestPhoneNr" class="requestPhoneNr" />
            </td>
            <td>
                <input type="text" name="requestTopic" class="requestTopic" />
            </td>
            <td>
                <input type="text" name="requestDescription" class="requestDescription" />
            </td>
            <td>
                <input type="text" name="requestOriginator" class="requestOriginator" />
            </td>
            <td>
                <input type="button" value="Delete" />
            </td>
        </tr>`)
});

Наконец, ваше приложение Flask должно получать данные в виде всего списка элементов через response.data.

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