带有下拉菜单的html表单在提交按钮上提交表单

Question

I am trying to create a form. I want my customer to be able to input text into a text field, and then choose a item from a drop down, the drop down is built from a database query which turns this into json and then a selected value of the json is presented in the dropdown. I have attached a image which i hope explains it better. form drawing

Answer 1

I'm not sure that's what you are waiting for, but since you are not answering...

If you want to prevent this : event.preventDefault();

event.preventDefault(); is there just as a band-aid fix. EG It prevents a default behavior. However in your code there is nothing that says the form should be submitted when you click on the button so it should not be submitted. My guess is that you are not using a button, but a submit button instead.

In any case you can use the onsubmit to make check prior to submitting:

onsubmit="validateMyForm()"

and prevent the default behavior if some conditions are not met.

---

You said that those links are here as a place holder. This confused me a lot before reading this so I have to edit my answer once more. Please next time use something a bit more irrelevant like spans, or div.

Yes, you can have input in this drop down, to answer your comment.

---

Secundo, do you have multiple dropdowns ?

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

This part will loop through all elements with the dropdown class and you have only 1 element so why the loop ? Maybe you have multiple dropdowns, so clicking anywhere else on the page will close all your dropdowns.

if (!event.target.matches('.dropbtn'))

What does that matches ? The button. So clicking anywhere except on the button will make the dropdowns close. But do you want to close the drop down when you click on an item of said dropdown?

---

What I'm trying to convey to you with this is that there seems to be flaws in the user experience you are trying to make.

further reading:

• Event Bubbling

• Form input types