How to change form action before form submits

Question

I have an html form hooked up to my python backend. The form contains one file upload field.

If the file field is empty on submit, I would like form action to change to “http://localhost:5000/nofile“.

If the file field contains a value on submit, I would like the form action to change to “http://localhost:5000/containsfile“.

Here is what I’ve tried:

 <script>
   function formFunc(){
     if (document.getElementById("file").files.length == 0)
        document.getElementById("mainform").action = "http://localhost:5000/nofiles";
      } else {
        document.getElementById("mainform").action = "http://localhost:5000/containsfiles"
      }
</script>

  <form onclick="formFunc()" name="mainform" method="POST" action=""
     enctype = "multipart/form-data">
     <input type = "file" id="file" name = "file" />
     <input type = "submit"/>
  </form>

I have also tried using the onsubmit() and onclick() functions in my form but it won’t work.

Asked By: Robert

||

Source

Answer 1

You made few basic mistakes:

you forgot some {, } in function
you don’t have id="mainform"

Working code.

from flask import Flask

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    return '''<script>
function formFunc(){
  if (document.getElementById("file").files.length == 0) {
    document.getElementById("mainform").action = "http://localhost:5000/nofiles";
  } else {
    document.getElementById("mainform").action = "http://localhost:5000/containsfiles";
  }
}
</script>

<form onclick="formFunc()" id="mainform" method="POST" action="" enctype="multipart/form-data">
   <input type="file" id="file" name="file" />
   <input type="submit" />
</form>'''

app.run()

Answered By: furas

Answer 2

As for the way you format your function, you can also do it this way to avoid writing {} if you really want to ^^

const formFunc = () => document.getElementById("mainform").action = document.getElementById("file").files.length == 0 ? "http://localhost:5000/nofiles" : "http://localhost:5000/containsfiles";

Answered By: Luka Colic

How to change form action before form submits

Question:

Answers: