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
我正在尝试创建表单。 我希望我的客户能够将文本输入到文本字段中，然后从下拉列表中选择一个项目，下拉列表是根据数据库查询构建的，该查询将其转换为json，然后将所选的json值显示在 下拉。 我附上了一张图片，我希望能更好地解释它。 表格图
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: