Button redirecting to a different page

Question

html

<body>
    <div class="mainWrapper">
        <div class="newWrapper">

            <form id="newform" method="post" action="new.php">
                <div class="textboxContainer">
                    <input id="question" type="text" name="question" placeholder="Question..." /><br /><br />
                    <input type="text" name="ans1text" placeholder="Answer 1..." value=""/><br />
                    <input type="text" name="ans2text" placeholder="Answer 2..." value=""/><br />
                    <input type="text" name="ans3text" placeholder="Answer 3..." value=""/><br />
                    <input type="text" name="ans4text" placeholder="Answer 4..." value=""/><br />
                </div><br /><br />

                <div class="doubleButtonContainer">
                <button class="moreAnswersButton" href="javascript:void(0)" name="more_answers" onclick="showAllAnswers()">More...</button>
                <input type="submit" class="button" name="submit" value="Finish" /><br />
               </div>

            </form>

        </div>

    </div>
</body>
</html>

jQuery

function showAllAnswers()
{
    console.log("WHAT IS GOING ON?????");
    $(".textboxContainer").append("<input type='text' name='ans5text' placeholder='Answer 5...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans6text' placeholder='Answer 6...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans7text' placeholder='Answer 7...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans8text' placeholder='Answer 8...' value=''/><br />");
    $(".moreAnswersButton").remove();
}

For some reason, the <button> is redirecting to another page. I feel like it might have something to do with it being inside an HTML post form, but I have no idea why it is redirecting when I already have a submit button assigned.

My end result that I'm looking for is for the More... button to add 4 more text boxes to the form. I do this html editing with the jquery code.

How can I fix this issue and make my app work properly?

possible duplicate of [How to prevent buttons from submitting forms](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Alexei Levenkov, Aug 25 '15 at 00:50

score 2 · Accepted Answer · answered Aug 25 '15 at 00:48

2

If you don't give a <button> tag an explicit "type" attribute, the type defaults to "submit". Give it type="button" to override that default.

A <button> with explicit or implicit type "submit" acts exactly like a "submit" <input> tag.

answered Aug 25 '15 at 00:48

Pointy

405,095
59
585
614

score 1 · Answer 2 · answered Aug 25 '15 at 00:51

1

Default button behaviour is to submit. You need to override that either by setting the button type = "button" or putting return false; after showAllAnswers(); in the onclick event.

answered Aug 25 '15 at 00:51

DylanB

431
3
16

Button redirecting to a different page

2 Answers2