javascript - 按钮重定向到不同的页面

标签 javascript jquery html forms button

JSFiddle Link

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();
}

出于某种原因,<button>正在重定向到另一个页面。我觉得它可能与它位于 HTML 发布表单中有关,但我不知道为什么当我已经分配了提交按钮时它会重定向。

我正在寻找的最终结果是“更多...”按钮向表单添加另外 4 个文本框。我使用 jquery 代码进行 html 编辑。

如何解决此问题并使我的应用正常运行?

最佳答案

如果你不给<button>标记一个明确的“类型”属性,类型默认为“提交”。给type="button"覆盖默认值。

A <button>显式或隐式类型“提交”的行为与“提交”完全一样<input>标签。

关于javascript - 按钮重定向到不同的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32193892/

相关文章:

javascript - 如何在 Cordova 中使用 Angular 2 (Angular-CLI) 项目中的 JavaScript 文件

javascript - 存储图像的最佳选择是字节还是文件?

javascript - javascript array 和 jquery set 的区别

html - Safari CSS 过渡闪烁

javascript - 如何将交互式 Jupyter notebook 嵌入到 html 中?

javascript - 如何通过 PHP 连接 javascript 和 MySQL?

javascript - 如何让用户输入变量名?

javascript - 使用 jquery 或 javascript 删除 anchor 文本的一部分

javascript - 打字机和设置持续时间

javascript - 您可以更改 html 元素的样式属性的最大数量是多少?