Кнопка перенаправления на другую страницу

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, но я понятия не имею, почему он перенаправляется, когда у меня уже есть кнопка отправки.

Мой конечный результат, который я ищу, для кнопки More ..., чтобы добавить еще 4 текстовых поля в форму. Я делаю это редактирование html с кодом jquery.

Как я могу исправить эту проблему и правильно настроить приложение?

источник

2015-08-25 jros

Возможный дубликат [Как предотвратить кнопки от отправки форм] (http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) –

Если вы не указали тег <button> на явный атрибут типа, тип по умолчанию «отправить». Дайте ему type="button", чтобы переопределить это значение по умолчанию.

A <button> с явным или неявным типом «submit» действует точно так же, как тег «submit» <input>.

источник

2015-08-25 00:48:28 Pointy

Спасибо! Я понятия не имел, что это так ... – jros

Поведение кнопки по умолчанию - отправить. Вам необходимо переопределить это, установив кнопку type = "button" или положив return false; после showAllAnswers(); в событие onclick.

источник

2015-08-25 00:51:33 DylanB

Кнопка перенаправления на другую страницу

ответ

Смежные вопросы