如何在非提交按钮单击表单后限制页面重新加载？

我试图做一个HTML表单上的按钮添加元素的形式：如何在非提交按钮单击表单后限制页面重新加载？

function createRow(){ 
 
    var row = document.createElement('div'); 
 
    var input=document.createElement('input'); 
 
    input.setAttribute("type", "Textbox"); 
 
    var time=document.createElement('input'); 
 
    time.setAttribute("type", "Textbox"); 
 
    row.appendChild(input); 
 
    row.appendChild(time); 
 
    return row; 
 
} 
 
function addRow(){ 
 
    console.log("z"); 
 
    var routes = document.getElementById("routes"); 
 
    routes.appendChild(createRow()); 
 
    return false; 
 
}

<form id="routes"> 
 
    <button onclick="addRow()">+</button> 
 
</form>

但每个按钮上单击页面重新加载带有问号添加到URL。我发现一对的想法：

的preventDefault（E）
返回假

，但没有奏效。

请告诉我该怎么办？也有一些条件：

这不是提交按钮，以后
它必须保持尽可能简单，这将增加，界面不是项目的主要焦点

来源

2017-03-07 SubZr0

的[我如何可能的复制一个HTML按钮不能重新加载页面]（http://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page） – pvg

button的默认行为是提交。指定type=button，它将覆盖此默认行为。

<button type="button" onclick="addRow()">+</button>

来源

2017-03-07 18:15:29

的onclick函数应该return false。此外addRow()需要return false：

<form id="routes"> 
    <button onclick="return addRow()">+</button> 
</form>

来源

2017-03-07 18:15:58

好，有例如在事件监听器使用的preventDefault的。

function createRow(){ 
 
    var row = document.createElement('div'); 
 
    var input=document.createElement('input'); 
 
    var time=document.createElement('input'); 
 
    input.setAttribute("type", "Textbox"); 
 
    time.setAttribute("type", "Textbox"); 
 
    row.appendChild(input); 
 
    row.appendChild(time); 
 
    return row; 
 
} 
 

 
function addRow(){ 
 
    document.getElementById("routes").appendChild(createRow()); 
 
} 
 

 
document.querySelector("button").addEventListener("click", function(event) 
 
{ 
 
    event.preventDefault(); 
 
    addRow(); 
 
});

<form id="routes"> 
 
    <button>+</button> 
 
</form>

来源

2017-03-07 18:21:33 Profesor08

内部的形式的HTML5按钮元件具有提交的默认类型。如果你给它一个类型“按钮”的一切工作正常

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<form id="routes"> 
    <div><button type="button" onclick="addRow()">+</button></div> 
</form> 
<script type="text/javascript"> 
    function createRow(){ 
     var row = document.createElement('div'); 
     var input=document.createElement('input'); 
     input.setAttribute("type", "Textbox"); 
     var time=document.createElement('input'); 
     time.setAttribute("type", "Textbox"); 
     row.appendChild(input); 
     row.appendChild(time); 
     console.log(row); 
     return row; 
    } 
    function addRow(){ 
     console.log("z"); 
     var routes = document.getElementById("routes"); 
     routes.appendChild(createRow()); 
     return false; 
    } 
</script> 
</body> 
</html>

来源

2017-03-07 18:39:26 jkollin

给按钮id，把preventDefault内$(document).ready(..)功能

$(document).ready(function(){ 
 
\t 
 
\t \t $("#routes_button").click(function(event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t }); 
 
\t }); 
 
\t 
 
\t function createRow(){ 
 
     var row = document.createElement('div'); 
 
     var input=document.createElement('input'); 
 
     input.setAttribute("type", "Textbox"); 
 
     var time=document.createElement('input'); 
 
     time.setAttribute("type", "Textbox"); 
 
     row.appendChild(input); 
 
     row.appendChild(time); 
 
     return row; 
 
    } 
 
    function addRow(){ 
 
     console.log("z"); 
 
     var routes = document.getElementById("routes"); 
 
     routes.appendChild(createRow()); 
 
     return false; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 

 
<form id="routes"> 
 
     <button id="routes_button" onclick="addRow()">+</button> 
 
    </form>

来源

2017-03-07 18:54:01

如何在非提交按钮单击表单后限制页面重新加载？

回答

相关问题