Formularz w js i zdarzenia

Question

Witam , mam problem, ponieważ nie wiem jak pokazać dane wpisane przez użytkownika w formularzu na osobnej stronie, żeby się wyświetlało np.

Jan Nowak

nowak@jan.pl

tel: 123456789, itd.

Oto wycinki mojego kodu formularza 

    <style>
        fieldset{
            padding: 20px;
            margin: 20px;
            border-radius: 5px;
        }
        legend{
            background-color: black;
            color: white;
            padding: 3px 6px;
            border-radius: 5px;
        }
        textarea{
            padding: 10px;
            line-height: 1.5;
            border-radius: 5px;
            border: 1px solid lightslategray;
            box-shadow: 1px 1px 1px #999;
        }
    </style>

    <form id="myForm" method="POST" onsubmit="event.preventDefault(); openWindow()">
        <fieldset>
            <legend>Dane osobowe</legend>
            <label for="name">Imię:</label>
            <input type="text" name="name" id="name" value=""/><br>
            <label for="surname">Nazwisko:</label>
            <input type="text" name="surname" id="surname" value=""/>
        </fieldset>

        <fieldset>
            <legend>Email</legend>
            <label for="email">E-mail:</label>
            <input type="email" name="email" id="email" value=""/>
        </fieldset>

        <fieldset>
            <legend>Numer telefonu</legend>
            <label for="phone">Podaj numer telefonu:</label>
            <input type="tel" id="tel" name="tel" value="" maxlength="20"
            placeholder="+48 111 222 333"/>
        </fieldset>

        <fieldset>
            <legend>Wyślij</legend>
            <button type="submit" id="submit">Wyślij</button>
        </fieldset>
    </form>
    <script>
        const form = document.myForm.value; 
        document.getElementById("myId").innerHTML = form;
        <div id="myId"></div>    
    </script>

i skryptu tej strony na której mają być wyświetlane informacje ( po kliknięciu przycisku "wyślij" w formularzu ), dodam, że na tej stronie jest przycisk który otwiera nowe okno z tym właśnie formularzem

<input type="button" id="form" value="Wypełnij dane"/>

<script>
    document.getElementById("form").addEventListener('click', openWindow);

function openWindow() {
    const form = window.open( "formularz-zadanie.html", "", 
    "width=900, height=900, top=50, left=50" );
    form.addEventListener('submit', function(e) {

    });

    form.opener.document.write("");
}
</script>

 

Answer 1

Masz dostęp do okna, które otworzyło formularz (form.opener). Wystarczy zatem dobrać się do jakiegoś elementu w tym oknie i podstawić mu odpowiednią zawartość:

form.opener.document.querySelector( '#jakisElement' ).textContent = 'jakaś wartość';

Analogicznie możesz się dobierać do pól formularza i samego formularza w nowootwartym oknie:

form.querySelector( 'input' )

PS dzielenie formularza na sekcje – zwłaszcza zawierające po jednym polu – przy pomocy fieldset jest średnio przydatne z punktu widzenia dostępności. Ten znacznik lepiej zostawić do grup pól radio/checkbox.