2015-08-25 28 views
1

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編輯。

如何解決此問題並使我的應用程序正常工作?

+0

可能重複的[如何防止按鈕提交表單](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) –

回答

2

如果您沒有給<button>標記一個明確的「type」屬性,則類型默認爲「submit」。給它type="button"覆蓋該默認值。

A <button>顯式或隱式類型「提交」的行爲完全像「提交」<input>標記。

+0

謝謝一堆!我不知道這是事實...... – jros

1

默認按鈕行爲是提交。您需要在onclick事件中覆蓋或將return false;設置爲showAllAnswers();之後。

相關問題