我在同一页面上使用了以下简单表单两次...
<form>
<div class="input-group input-group-lg mb-3 p-2 bg-warning rounded">
<input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2" id="mycompany">
<div class="input-group-append">
<button class="btn btn-primary btn-lg" type="button" id="mybutton">Get started!</button>
</div>
</div>
</form>
以下 JavaScript 获取文本输入并使用它为我们发送给用户的 URL 形成 URL 参数...
<script>
document.getElementById('mybutton').addEventListener(
"click", function(){
const inputValue = document.getElementById('mycompany').value;
window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
}
)
</script>
我学到了这么多。 它适用于第一个表单实例 - 但不是第二个。
问题是,我如何确保任一个的小形式都能产生相同的效果?
文本输入和按钮的 id 是否需要唯一?
而且,无论哪种方式,同一个 JavaScript 函数如何处理无论提交的表单的窗口打开情况?
最佳答案
The id global attribute defines a unique identifier (ID) which must be unique in the whole document
- > Option 1 Js Fiddle .更改 ID,使它们在文档中变得唯一(示例 id="mybutton1",id="mybutton2"与“mycompany”相同) 并分别为每个按钮添加事件监听器。将回调函数定义为全局函数并在每个按钮上调用它。
function newWindow(inputArea) { //pass input field ID as argument
const inputValue = document.getElementById(inputArea).value;
window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputValue));
}
document.getElementById('mybutton1').addEventListener('click', newWindow.bind(this, 'mycompany1', false));
document.getElementById('mybutton2').addEventListener('click', newWindow.bind(this, 'mycompany2', false));
- > Option 2 Js fiddle .用类替换 ID 并循环遍历表单。
<form>
<div class="input-group input-group-lg mb-3 p-2 bg-warning rounded form">
<input type="text" class="form-control" placeholder="My company name" aria-label="My company name" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary btn-lg mybutton" type="button">Get started!</button>
</div>
</div></form>
//get DOM elements and return an array
let form = [].slice.call(document.querySelectorAll('.form'));
//loop through each form
form.forEach(e => {
function openWindow() {
let inputField = e.querySelector('.form-control').value;
window.open("https://airtable.com/myformidgoeshere?prefill_Company=" + encodeURIComponent(inputField));
}
e.querySelector('.mybutton').addEventListener("click", openWindow)
})
关于javascript - 如何从两个相同的网络表单中的任何一个提交?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52669511/