时间戳

首页 > 解决方案 > 一个接一个地显示表单 [JS]

javascript - 一个接一个地显示表单 [JS]

问题描述

我只是在做一个带有 2 个问题的简短表格。我希望第二个出现在第一个问题的提交按钮上。我已经尝试了几件事但不起作用：/每次单击提交按钮时似乎都会重新加载页面。我开始了，所以也许这是一个非常愚蠢的错误。

谢谢 ！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

    <form id="question1">
        <h2>Salamèche est-il de type feu ?</h2>
        <div class="row">
            <div>
                <input type="radio" name="question1" id="oui1" value="oui" >
                <label for="oui1" class="oui">OUI</label>
            </div>
            <div>
                <input type="radio" name="question1" id="non1" value="non">
                <label for="non1" class="non ">NON</label>
            </div>
        </div>
        <input type="submit" value="Submit">
    </form>

    <form id="question2">
        <h2>Tiplouf est-il de type plante ?</h2>
        <div class="row">
            <div>
                <input type="radio" name="question1" id="oui1" value="oui" >
                <label for="oui2" class="oui">OUI</label>
            </div>
            <div>
                <input type="radio" name="question1" id="non1" value="non">
                <label for="non2" class="non ">NON</label>
            </div>
        </div>
        <input type="submit" value="Submit">
    </form>

    <form id="question3">
        <h2>Tiplouf est-il de type plante ?</h2>
        <div class="row">
            <div>
                <input type="radio" name="question1" id="oui1" value="oui" >
                <label for="oui3" class="oui">OUI</label>
            </div>
            <div>
                <input type="radio" name="question1" id="non1" value="non">
                <label for="non3" class="non ">NON</label>
            </div>
        </div>
        <input type="submit" value="Submit">
    </form>

    <script src="js/script.js"></script>

</body>
</html>

Javascript

function changeform(x){
    let nextForm = x + 1;
    for (i=0; i <= x; i++) {
        document.getElementById(i).addEventListener('submit', function() {
            $('question' + i).css('display','none');
            $('question' + nextForm).css('display','block');
        });
    }
}

function checked(x) {
    for (i=0; i <= x; i++) {
        var oui = 'oui'+i;
        var non = 'non'+i;
        console.log(oui);
        $(oui).addEventListener('click', function() {
            $(oui).className = 'cheked';
        });
        $(non).addEventListener('click', function() {
            $(non).className = 'cheked';
        });
    }
}

checked(3);
changeform(3);

标签： javascript

解决方案

submit事件总是重新加载浏览器窗口以停止写入

document.getElementById(i).addEventListener('submit', function(event) {
  event.preventDefault(); // this won't let submit action to reload window
  $('question' + i).css('display','none');
  $('question' + nextForm).css('display','block');
});

推荐阅读