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?
2 answers
solution1
2 ACCPTED 2015-08-25 00:48:28
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.
solution2
1 2015-08-25 00:51:33
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.