0

I need help in sending data from variable derived in JavaScript to flaks route. I have submit button, on which I have flask route and I am passing variables encloses in {{}}.

One of the variable selectedItem is derived inside JavaScript. I get right value on alert but when route is called it’s coming as None. Am I doing something wrong here? May be html submit is not able to refer to JavaScript variable? If I pass hardcoded value to my route parameter it works fine.

Please help. Thank you

function test_alert(e){ alert("tis is test"+e.value) selectedItem=e.value; }
avani jain
  • 99
  • 1
  • 8

1 Answers1

1

If you want to transfer your javascript variable to your flask route kindly check my answer here:

Why does my data come from request.form when passing it to the backend in Flask, python?

  1. Ajax/Fetch

JavaScript

var your_data = {

/* name */ : /* value */
}


  fetch(`${window.origin}/your_url`, {
    method: "POST",
    credentials: "include",
    body: JSON.stringify(your_data),
    cache: "no-cache",
    headers: new Headers({
      "content-type": "application/json"
    })
  })

Python

@app.route("/your_url", methods = ["post"])
def printer():
  data = request.get_json()
  print(data)
  return "TODO"

However if you want to render a template (like a form submit would do) then you can do this:

A. Doing it inside a hidden form

HTML


<form id="mainform" action="/your_url" method="post">
  <input type="hidden" name="jsvar" id="jsvar" value="" />
  <button type="submit">Click Me</button>
</form>

JavaScript

var form = document.getElementById("mainform")
      var input = document.getElementById("jsvar")
      form.addEventListener('submit', function(e){
        input.value = "your_var"
        form.submit()
      })

Python


@app.route("/test",methods=["POST"]) 
def proposeswap_db_function():
  print("inside function") 
  data = request.form["jsvar"]
  print(data) 
  print('rendering mainmenu') 

  return f"{data}"
Winmari Manzano
  • 456
  • 4
  • 8
  • And yes, afaik html wouldn't pass your JavaScript variables to the flask route. (Unless if you do clever ways such as hidden inputs and etc) – Winmari Manzano Apr 18 '22 at 13:29
  • thanks a lot for quick response. This is giving me my variable in post method call. I see in my debugger endpoint being called with post and my data.127.0.0.1 - - [18/Apr/2022 17:59:28] "{"selectedItem":"28"}POST /proposeswap_db/ HTTP/1.1" 405 -however my actual function is not being called. I have it like below and its not calling my route method..@proposeswap_db.route("/",methods=["POST"]) def proposeswap_db_function(): print("inside function") data = request.get_json() print(data) print('rendering mainmenu') return render_template('mainmenu.html') – avani jain Apr 19 '22 at 00:02
  • I see there is 405 error. "{"selectedItem":"28"}POST /proposeswap_db/ HTTP/1.1" 405 how can I fix this? I need to pass calculated value to my flask route. – avani jain Apr 19 '22 at 00:05
  • 127.0.0.1 - - [19/Apr/2022 08:59:09] "GET / HTTP/1.1" 200 - inside function {'data': 'Hello World'} rendering mainmenu 127.0.0.1 - - [19/Apr/2022 08:59:09] "POST /test HTTP/1.1" 200 - this is what is appearing to me. Do you want to render the html after sending the data? – Winmari Manzano Apr 19 '22 at 01:05
  • I added a method where you can do it like a normal form submit, you can also do it by getting args from the url like 127.0.0.1:5000/?data=123, check the link I provided for more info on how to transfer data from front-end to backend – Winmari Manzano Apr 19 '22 at 01:32