Triggering 400 error on flask server with IF-ELSE in AJAX JQuery

Question

I using a JQuery script to validate my input and when it filled correctly (no none option is used since I put None as one of the selectable option in my html form) like this:

<script>
$('form').on('submit', function(event) {
    if ($("#classroom option:selected").val()=="none"){
        alert("No Class Selected");
        return false;
    } else if ($("#hours option:selected").val()=="none"){
        alert("Hours Is not Selected");
        return false;
    } else {
        $.ajax({
        data : JSON.stringify({
        class_room: JSON.stringify($("#classroom option:selected").val()),
        hours: JSON.stringify($("#hours option:selected").val()),
    });,
        type : 'POST',
        url: "{{ url_for('send') }}",
        dataType: "json",
        contentType: "application/json"
        })
        .done(function(data) {
        alert({{ response }});
        $('form').trigger("reset");
        return true;
        });
    }

    });

</script>

Even the if else is works as expected, but when all condition is not met (else point should be triggered), it return 400 error. However when i remove all if-else statement and not run any checker, The JSON send to the function. I still confused why the else statement couldn't catch the JSON data from form but send a whole html page, since when i debug it with my browser, the header is Content-Type:application/x-www-form-urlencoded and not the json one (when i check the request on my browser it was a form classroom=A&hours=3 and not the json-ed {"class":"A","hours":"3"}).

Any help is appreciated

Small Update

I feel the culprit maybe came from the form declaration on the HTML

<form action="{{ url_for('send') }}" method="post" id="xxx" name="updater" role="form">
<input type="submit" value="Submit" class="btn btn-info">
<label for="classroom">Select Class</label>
                    <select form="xxx" class="form-control" id="clasroom" placeholder="Select Class" name="classroom">
                        <option value="none" selected>NONE</option>
                        <option value="A">A</option>
...
                    </select>
</form>

when i remove the Jinja's {{ url_for('send') }} and change it into #, it not trigger the submit button, but when keep that Jinja, it trigger 400 error after send.

and my Flask server has been declared that it received post:

@app.route("/update_class/",methods=['GET', 'POST'])
def send():
    if request.method=="POST":
        json_data = request.get_json()

Answer 1

Seems like it's a syntax problem. Please try this code, I removed the ; in your else condition

<script>
$('form').on('submit', function(event) {
    if ($("#classroom option:selected").val()=="none"){
        alert("No Class Selected");
        return false;
    } else if ($("#hours option:selected").val()=="none"){
        alert("Hours Is not Selected");
        return false;
    } else {
        $.ajax({
        data : JSON.stringify({
        class_room: JSON.stringify($("#classroom option:selected").val()),
        hours: JSON.stringify(=$("#hours option:selected").val()),
    }),
        type : 'POST',
        url: "{{ url_for('send') }}",
        dataType: "json",
        contentType: "application/json"
        })
        .done(function(data) {
        alert({{ response }});
        $('form').trigger("reset");
        return true;
        });
    }

    });

</script>

UPDATE

your ajax block need an url, it don't get it from the form, you have to specify inside ajx block.