Question

我有一个类似下面的表格

<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>

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

如何仅使用javascript和html做到这一点？

Answer 1

将新打开的窗口的引用存储在变量中，然后将选定的值分配给其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;
}

Answer 2

我没有尝试使用window.open显示弹出窗口，但是在使用CSS show / hide和z-index之前我做了弹出窗口。将表单数据放在弹出div上，然后使该div的类具有较高的z-index。假设z-index：100；将此div默认设置为隐藏，然后具有使其显示的功能。

html

<!doctype html>

<head>

</head>

<body>
    hello hsnsd
    <div id="myMain">
        <button id="showPopupBtn">show popup</button>
    </div>
    <div id="myPopup" class="pop-up" hidden="true">
        <button id="closePopupBtn">CLOSE</button>
    </div>

    <script src="popup.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="popup.css">
</body>
</html>

css

.pop-up {
    position: absolute;
    background-color: rgba(50, 50, 50, 50);
    padding: 50px;
    margin: 3px;
    left: 0px;
    top: 0px;
    z-index: 100;
}

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
}

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

2 个答案: