Muscardinus

Radio Box 본문

FrontEnd/Basic Skills

Radio Box

Muscardinus 2022. 3. 17. 00:45
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Radio Box</title>
</head>

<body>
    <form>
        <p>연락 수단을 선택해주세요!</p>
        <div>
            <input type="radio" id="contactMethod1" name="contact" value="email" />
            <label for="contactMethod1">Email</label>
            <input type="radio" id="contactMethod2" name="contact" value="phone" />
            <label for="contactMethod2">Phone</label>
            <input type="radio" id="contactMethod3" name="contact" value="email" />
            <label for="contactMethod3">Email</label>
        </div>
        <p>배송 방법을 선택해주세요!</p>
        <div>
            <input type="radio" id="deliveryMethod1" name="delivery" value="ship" />
            <label for="deliveryMethod1">Ship</label>
            <input type="radio" id="deliveryMethod2" name="delivery" value="plane" />
            <label for="deliveryMethod2">Plane</label>
            <input type="radio" id="deliveryMethod3" name="delivery" value="car" />
            <label for="deliveryMethod3">Car</label>
        </div>
        <div class="SubmitButtonContainer">
            <button type="submit">확인</button>
        </div>
    </form>
    <span class="CurrentItem"></span>
    <script src="./index.js"></script>
</body>

</html>

 

const $currentItem = document.querySelector('.CurrentItem');
const $formTag = document.querySelector('form');

// Write JS code here!

const formMap = {
    contact: "연락 수단",
    delivery: "배송 수단",
}

$formTag.addEventListener("submit", (e) => {
    e.preventDefault();

    const formRecords = Array.from(new FormData($formTag));
    if (Object.keys(formMap).length !== formRecords.length) {
        $currentItem.innerHTML = "폼을 모두 작성해주세요.";
        return;
    }

    $currentItem.innerHTML = formRecords.map(
        (record) => `${formMap[record[0]]}: ${record[1]}`
    ).join("<br />");
});
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Modal Window  (0) 2022.03.19
Rating UI  (0) 2022.03.19
Dropdown Menu  (0) 2022.03.13
Auto Complete  (0) 2022.03.13
Search bar  (0) 2022.02.09
'FrontEnd/Basic Skills' Related Articles more
Comments