jquery: submit form and pass values of the variables to Python

Question

I'm trying to pass the values of the form and the values of the from and till variables to the Python. But it turns out to transfer or values of the form or value of variables.

If I post only var a = $('#form').serialize(); then in the python I can freely obtain the value by applying form.projects.data

If I post var a = $('#form').serialize(); and variables from and till that in a python a variable is displayed in the following form: projects=1 and this leads to additional processing.

{% set d_from, d_till = from_till %}

{% block module_scripts %}
    {{ super() }}
    <script>
        var from = '{{ d_from.strftime("%m/%d/%Y") }}';
        var till = '{{ d_till.strftime("%m/%d/%Y") }}';

        $(function my() {
            $("#reservation").daterangepicker({
                "locale": {
                    "format": "DD/MM/YYYY"
                },
                "opens": "right",
                "showDropdowns": true,
                "showWeekNumbers": true
            }, function (start, end, label) {
                from= start.format('MM/DD/YYYY');
                till = end.format('MM/DD/YYYY');
            });
        });

        $( "#go" ).click(function() {
            var a = $('#form').serialize();
            $.post(
                '{{ url_for("reporting_backoffice.download_report") }}', {
                    a:a,
                    d_from: from,
                    d_till: till
                }
            );
        });
    </script>

{% endblock %}

{% block report_block_content %}
        <form id="form">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input type="text" class="form-control pull-right" id="reservation"
                       value="{{ d_from.strftime("%m/%d/%Y") }} - {{ d_till.strftime("%m/%d/%Y") }}">
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                {{ wtf.form_field(form.projects, class="form-control select2") }}

                <button class="btn btn-primary" id="go">{{ _("Download report") }}</button>
            </div>
        </div>

    </form>

Please tell me, maybe there is a more correct and simple way to POST data to the Python?

charlietfl · Accepted Answer · 2017-07-13 16:09:39Z

1

Could manually add the additional items as string by using $.param() to convert the times object

 var formData = $('#form').serialize(),
   times = { d_from: from, d_till: till },
   postDataString = formData  + '&' + $.param(times);

 $.post('{{ url_for("reporting_backoffice.download_report") }}', postDataString );

Demo:

var formData = $('#myForm').serialize(),
   times = { d_from: 'xxxx', d_till: 'yyyy' },
   postDataString = formData  + '&' + $.param(times);
   
console.log(postDataString)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input name="AAA" value="a">
  <input name="BBB" value="b">
</form>

edited Jul 13, 2017 at 16:09

answered Jul 13, 2017 at 15:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniele Dolci · Accepted Answer · 2017-07-13 15:57:16Z

1

$(function() {
  $("#form").on("submit", function() {
    var $this = $(this);
    $.ajax({
      url: '{{ url_for("reporting_backoffice.download_report") }}',
      data: $this.serialize(),
      method: "POST",
      success: function(data) {
        //Here if u have to do something with the response
      }
    });
  })
 });

Now with python you have variables in query string object.

PS: if you don't set attribute "name" on form inputs, $(this).serialize() is useless and no variable is passed to python.

answered Jul 13, 2017 at 15:57

Daniele Dolci

8761 gold badge9 silver badges23 bronze badges

Collectives™ on Stack Overflow

jquery: submit form and pass values of the variables to Python

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related