I want to be able to set the value of a select option and submit a form onl oad through Javascript so I did this:

HTML/Jinja template:

 <form
          id="msmSubmit"
          
          name="msm_submit_form"
          action="{{ url_for('kpiAnaly.index') }}"
          method="post"
        >
          <div style="display: flex">
            <div style="width: 200px">
              <select id="msm_code" name="msm_code">
                {% for m in msm %}
                <option value="all_msm">All</option>
                <option value="{{m}}">{{m}}</option>
                {% endfor %}
              </select>
            </div>
            <div style="margin-bottom: 20px">
              <button type="submit" >Go</button>
            </div>
          </div>
        </form>

Javascript:

let form = document.getElementById("msmSubmit");
function handleForm(event) {
  event.preventDefault();
}
function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}
function onl oadSubmit() {
  //set the value of the select option 
  selectElement("msm_code", "bob");
  //submit form on load
  document.msm_submit_form.submit();

  //prevent default: I thought this would prevent continuous loading
  form.addEventListener("submit", handleForm);
}
//run function onl oad
window.onload = onl oadSubmit;

But the page refreshes continuously why?

How can I send this code onl oad automatically without continuous refreshing?

Thank you for your time in advance.

CodePudding user response：

But the page refreshes continuously why?

1. You have an event handler which submits the form when the page loads.
2. Submitting a form makes an HTTP request and navigates to the result.
3. The result appears to be the same page
4. … which loads. Go to 1.

//prevent default: I thought this would prevent continuous loading
form.addEventListener("submit", handleForm);

Your code hooks into the submit event handler so when the form is submitted a JS function runs. That function does nothing except prevent the normal behaviour of the submission. So the result is exactly like the submit button isn't clicked. Not only would it prevent navigation, but also the HTTP request sending data to the server in the first place.

That said, calling the submit() method bypasses the submit event so it has no effect (but if it had an effect it would stop the form from doing everything and not just the bit you don't want).

Change the design of your application. You are making things unnecessarily complex.

This is what you are trying to do:

1. Browser makes HTTP request to server
2. Server returns HTML document
3. HTML document includes JS that picks a preselected value from a select element and triggers a new HTTP request to the server
4. HTTP does something with that value

The user doesn't make any decisions after step 1 so you don't need to get additional data from the user at step 3.

Just do something with the value "bob" at step 1 when the initial HTTP request is received.

CodePudding user response：

I think you should either use the onsubmit attribute inside the form tag or the onclick attribute in the button tag and add the page not loading in the javascript code.

For example:

Html code:

<form onsubmit="clickBtn()">
   <input type="text" name="name">
   <button>Go!</button>
</form>

javascript cose:

<script>
   function clickBtn() {
       event.preventDefault();
    }
</script>