Javascript 提交表单数据并在新弹出窗口中显示表单数据_Javascript

Javascript 提交表单数据并在新弹出窗口中显示表单数据

javascript

Javascript 提交表单数据并在新弹出窗口中显示表单数据,javascript,Javascript,我有一张如下的表格 <html> <form action="test.html" method="post" onsubmit="target_popup(this)"> <select id="types"> <option value="a" >A</option> <option value="b" >B</option> </select> <select id="

我有一张如下的表格

<html>

<form action="test.html" method="post" onsubmit="target_popup(this)">
<select id="types">
    <option value="a" >A</option>
    <option value="b" >B</option>
</select>

<select id="types1">
        <option value="a" >A</option>
        <option value="b" >B</option>
    </select>

<input type="submit" value="Submit">

</form>
<script>
function target_popup(form) {
    var out1 = document.getElementById('types').value;
    var out2 = document.getElementById('types1').value;
    window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    form.target = 'formpopup';
}
</script>
</html>


A.
B
A.
B
功能目标弹出窗口（表格）{
var out1=document.getElementById（'types'）.value；
var out2=document.getElementById（'types1'）。值；
打开（“”，'formpopup'，'width=400，height=400，可调整大小，滚动条'）；
form.target='formpopup'；
}

提交时，将打开一个新窗口，该窗口当前为空白html。我想将表单数据写入这个html

如何仅使用javascript和html来实现这一点？

我没有尝试使用window.open来显示弹出窗口，但我在使用css show/hide和z-index之前做了弹出窗口。将表单数据放在弹出的div上，然后让该div拥有一个具有高z索引的类。假设z指数为100；将此div默认为隐藏，然后使用一个函数将其显示

html

javascript

let showPopupBtn = document.getElementById('showPopupBtn')
let closePopupBtn = document.getElementById('closePopupBtn')
let myPopup = document.getElementById('myPopup')

showPopupBtn.addEventListener('click', onClick_showPopupBtn, false)
closePopupBtn.addEventListener('click', onClick_closePopupBtn, false)

function onClick_showPopupBtn () {
    myPopup.hidden = false
}

function onClick_closePopupBtn () {
    myPopup.hidden = true
}

将新打开窗口的引用存储在变量中，然后将所选值分配给其

document.body.textContent

<form action="test.html" method="post" onsubmit="target_popup(event)">
    <select id="types">
        <option value="a" >A</option>
        <option value="b" >B</option>
    </select>

    <select id="types1">
            <option value="a" >A</option>
            <option value="b" >B</option>
        </select>
    <input type="submit" value="Submit">
</form>

function target_popup(e) {
    e.preventDefault();
    var out1 = document.getElementById('types').value;
    var out2 = document.getElementById('types1').value;
    const wdw = window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    wdw.document.body.textContent = out1 + ' ' + out2;
}


A.
B
A.
B
功能目标_弹出窗口（e）{
e、 预防默认值（）；
var out1=document.getElementById（'types'）.value；
var out2=document.getElementById（'types1'）。值；
const wdw=window.open（“”，'formpopup'，'width=400，height=400，可调整大小，滚动条'）；
wdw.document.body.textContent=out1+''+out2；
}

let showPopupBtn = document.getElementById('showPopupBtn')
let closePopupBtn = document.getElementById('closePopupBtn')
let myPopup = document.getElementById('myPopup')

showPopupBtn.addEventListener('click', onClick_showPopupBtn, false)
closePopupBtn.addEventListener('click', onClick_closePopupBtn, false)

function onClick_showPopupBtn () {
    myPopup.hidden = false
}

function onClick_closePopupBtn () {
    myPopup.hidden = true
}

<form action="test.html" method="post" onsubmit="target_popup(event)">
    <select id="types">
        <option value="a" >A</option>
        <option value="b" >B</option>
    </select>

    <select id="types1">
            <option value="a" >A</option>
            <option value="b" >B</option>
        </select>
    <input type="submit" value="Submit">
</form>

function target_popup(e) {
    e.preventDefault();
    var out1 = document.getElementById('types').value;
    var out2 = document.getElementById('types1').value;
    const wdw = window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    wdw.document.body.textContent = out1 + ' ' + out2;
}