Handling multiple form submit

Question

I'm a newbie learning new stuff. I'm trying to handle two forms, but can't figure out how to handle the second form differently. It uses 1st forms handle no matter what. Here's the code:

<div class="body questionnaire-container">
            <div class="content">
                <h2 id="questionNumero"></h2>
                <p id="question"></p>
                <form class="form" id="question-form">
                    <div>
                        <input type="radio" name="question" id="answerA" value="A">
                        <label class="answerA"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerB" value="B">
                        <label class="answerB"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerC" value="C">
                        <label class="answerC"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerD" value="D">
                        <label class="answerD"></label>
                    </div>
                    <button type="submit" id="submit" class="submit">Next</button>
                </form>
            </div>
            <div class="barre-progression">
                <h2>Progrès</h2>
                <progress class="progression" value="0" max="10">
            </div>
        </div>

        <div class="body weaponquestionnaire-container">
            <div class="content">
                <h2 id="questionNumero"></h2>
                <p id="question"></p>
                <form class="form" id="questionweap-form">
                    <div>
                        <input type="radio" name="question" id="answerA" value="A">
                        <label class="answerA"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerB" value="B">
                        <label class="answerB"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerC" value="C">
                        <label class="answerC"></label>
                    </div>
                    <div>
                        <input type="radio" name="question" id="answerD" value="D">
                        <label class="answerD"></label>
                    </div>
                    <button type="submit" id="chuj" class="questionweap-form">Next</button>
                </form>
            </div>
            <div class="barre-progression">
                <h2>Progrès</h2>
                <progress class="progression" value="0" max="10">
            </div>
        </div>


// Handle Form Submits
$("#question-form").submit(function (e) {
e.preventDefault();
alert( "It's broken again!" );

if (questionNumber != nbQuestionToAnswer) {
    //question 1 to 9: pushing answer in array
    closeAll();
    userAnswer.push($('input[name="question"]:checked').val());
    questionNumber++;
    openQuestionnaire();
} else {
    // question 10: comparing arrays and sending number of good answers
    userAnswer.push($('input[name="question"]:checked').val());
    var nbGoodAnswer = 0;
    for (i = 0; i < nbQuestionToAnswer; i++) {
        if (userAnswer[i] == goodAnswer[i]) {
            nbGoodAnswer++;
        }
    }

    closeAll();
    if (nbGoodAnswer >= nbAnswerNeeded) {
        openResultGood();
    } else {
        openResultBad();
    }
}

return false;
});



$("#questionweap-form").submit(function (e) {
    e.preventDefault();
    alert( "It worked, finally." );

if (questionNumber != nbQuestionToAnswer) {
    //question 1 to 9: pushing answer in array
    closeAll();
    userAnswer.push($('input[name="question"]:checked').val());
    questionNumber++;
    openQuestionnaireWeapon();
} else {
    // question 10: comparing arrays and sending number of good answers
    userAnswer.push($('input[name="question"]:checked').val());
    var nbGoodAnswer = 0;
    for (i = 0; i < nbQuestionToAnswer; i++) {
        if (userAnswer[i] == goodAnswer[i]) {
            nbGoodAnswer++;
        }
    }

    closeAll();
    if (nbGoodAnswer >= nbAnswerNeeded) {
        openResultGood();
    } else {
        openResultBad();
    }
}

return false;
});

It keeps submitting the "question-form", even when trying to submit "questionweap-form"

I've looked for any tips for hours any couldn't find anything, so any help would be appreciated!

You are preventDefault both form submits, so where are you submitting the forms that bypasses those handlers? — Taplar, Mar 18 '19 at 20:11
Neither of those functions do any submitting and your `form` tags aren't set up to submit either. Are you looking for just regular buttons to invoke specific functions here? — Scott Marcus, Mar 18 '19 at 20:12
If you are not actually submitting form data anywhere and instead just want to have a quiz of some sort, don't use `form` elements or `submit` buttons, just use regular buttons and set up appropriate `click` event handlers for each. — Scott Marcus, Mar 18 '19 at 20:13

Handling multiple form submit

0 Answers0