CODEWITHSUNDEEP
javascript
hsnsd
hsnsd

Reputation: 1823

submit a form data and display the form data in a new popup

I have a form like below

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

On submit, a new window is opened which is a blank html currently. I want to write the form data to this html.

How can I do this using javascript and html only?

Upvotes: 0

Views: 1501

Answers (2)

Aaron
Aaron

Reputation: 147

I haven't tried to use window.open to show popups but I did popups before using css show/hide and z-index. put your form data on a your popup div then have that div have a class with a high z-index. lets say z-index: 100; default this div to hidden then have a function to make it shown.

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
}

Upvotes: 0

random
random

Reputation: 7891

Store the reference of new opened window in a variable and then assign the selected values to its 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;
}

Upvotes: 1

Related Questions