Insert Data from Form to MySQL database, javascript and flask

Question

I am creating a web app for nearby events, and one of the important features is the option to create events. As of now I have a modal that contains a form. I'm having trouble taking the inputs of the form on submit and adding it to the database, using javascript and a python flask web app.

Here is my html:

    <!-- Modal -->
<div id="eventInput" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Create an Event</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
    <form>
      <div class="modal-body">
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="title" placeholder="Event Name" type="text"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="description" placeholder="Description" type="text"/>
            </div>
            <div class="form-group">
                Start date and time:
                <input autocomplete="off" autofocus class="form-control" name="start" placeholder="Start date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                End date and time:
                <input autocomplete="off" autofocus class="form-control" name="end" placeholder="End date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="place" placeholder="Location Name" type="text"/>
            </div>

            Please use <a href="https://www.google.com/maps">Google Maps</a> to determine the accurate latitude and longitude of your event location
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="lat" placeholder="Location Latitude" type="number"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="long" placeholder="Location Longitude" type="text"/>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create Event</button>
      </div>

    </form>
    </div>

  </div>
</div>

Javascript:

   $(function() {
    $('submit').click(function() {
        var event = {
        'title': document.getElementById('title').value,
        'description': document.getElementById('description').value,
        'start': document.getElementById('start').value,
        'end': document.getElementById('end').value,
        'place': document.getElementById('place').value
       };
        $.ajax({
            url: '/createEvent',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

And python:

# Add Event to database
@app.route('/createEvent', methods=['POST'])
def createvent() :
    title =  request.form['title'];
    description = request.form['description'];
    place = request.form['place'];
    start = request.form['start'];
    end = request.form['end'];
    db.execute("INSERT INTO events (user_id, title, description, place, start, end) VALUES (:user, :title, :description, :place, :start, :end)",
                user=session["user_id"], title=title, description=description, place=place, start=start, end=end)
    return render_template("list.html")

Uncaught ReferenceError: newEvent is not defined at HTMLFormElement.onsubmit — Emilia
– Emilia, Commented Dec 5, 2017 at 20:03
Does it work if you remove the onsubmit="return newEvent()" from the form in the html code? — Luis Orduz
– Luis Orduz, Commented Dec 5, 2017 at 20:21
That makes the error go away, but event still does not save to the database. — Emilia
– Emilia, Commented Dec 5, 2017 at 20:37

Espoir Murhabazi · Accepted Answer · 2017-12-05 20:45:33Z

You need to add an Id to your form and, and remove the onsubmit event and use it only in jquery. all your forms element doesn't have id attribute add them like this :

the html :

<div id="eventInput" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Create an Event</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
    <form  id="target" action="/destination">
      <div class="modal-body">
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="title"   id= "title" placeholder="Event Name" type="text"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="description"  id ="description" placeholder="Description" type="text"/>
            </div>
            <div class="form-group">
                Start date and time:
                <input autocomplete="off" autofocus class="form-control" name="start" id="start" placeholder="Start date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                End date and time:
                <input autocomplete="off" autofocus class="form-control" name="end" id ="end" placeholder="End date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="place" id ="place" placeholder="Location Name" type="text"/>
            </div>

            Please use <a href="https://www.google.com/maps">Google Maps</a> to determine the accurate latitude and longitude of your event location
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="lat" id="lat" placeholder="Location Latitude" type="number"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="long" id="long" placeholder="Location Longitude" type="text"/>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create Event</button>
      </div>

    </form>
    </div>

and your javascript like this :

$( "#target" ).submit(function( event ) {
  event.preventDefault();
  var new_event = {
        'title': document.getElementById('title').value,
        'description': document.getElementById('description').value,
        'start': document.getElementById('start').value,
        'end': document.getElementById('end').value,
        'place': document.getElementById('place').value
       };
       console.log(new_event);


$.ajax({
        url: '/createEvent',
        data: $('form').serialize(),
        type: 'POST',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });

});

Though the action tag does let me go to the page I'd like to end on, unfortunately the event is still not saving.

Collectives™ on Stack Overflow

Insert Data from Form to MySQL database, javascript and flask

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related