Question

我正在使用带有chrome扩展名的netbeans（netbeans连接器），我创建了一个像这样的jsp页面：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Form Page</title>
  </head>
  <body>
    <div align = "center">
        <form >
            <table border="0">
                <tbody>
                    <tr>
                        <td>Name : </td>
                        <td><input type="text" name="Name" value="" /></td>
                    </tr>
                    <tr>
                        <td>Password : </td>
                        <td><input type="password" name="Password" value="" /></td>
                    </tr>
                    <tr>
                        <td>Age : </td>
                        <td><input type="text" name="Age" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="reset" value="Reset" style="float: right"/>
                            <input type="submit" value="Submit" style="float: right" onclick="onSubmit()" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>


    <div align = "center">
        <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>


    </div>


<script language = "javascript">
    function onSubmit(){
        var name = document.getElementsByName('Name')[0] ;
        var password = document.getElementsByName('Password')[0] ; 
        var age = document.getElementsByName('Age')[0] ;

        if(age.value >= 50){
            alert('You\'re too old !');
        }

        var table = document.getElementsByTagName('table')[1] ; 
        var body = table.getElementsByTagName('tbody')[0] ;
        var  trNode = document.createElement('tr') ; 
        var thNameNode = document.createElement('td') ; 
        var nameTextNode = document.createTextNode(name.value.toString()) ; 
        thNameNode.appendChild(nameTextNode) ; 
        var thAgeNode = document.createElement('td') ; 
        var ageTextNode = document.createTextNode(age.value) ; 
        thAgeNode.appendChild(ageTextNode) ; 

        trNode.appendChild(thNameNode) ; 
        trNode.appendChild(thAgeNode) ; 

        body.appendChild(trNode) ;
    }
</script>
</body>

函数 onSubmit（）应该动态地在表中添加一行，但是当我在浏览器上运行时，更改会短暂显示并且我会再次重定向到原始页面，这究竟是什么问题

Answer 1

表单已在onSubmit函数上提交，您可以return false阻止它。所以下面应该工作

 function onSubmit(){
    var name = document.getElementsByName('Name')[0] ;
    var password = document.getElementsByName('Password')[0] ; 
    var age = document.getElementsByName('Age')[0] ;

    if(age.value >= 50){
        alert('You\'re too old !');
    }

    var table = document.getElementsByTagName('table')[1] ; 
    var body = table.getElementsByTagName('tbody')[0] ;
    var  trNode = document.createElement('tr') ; 
    var thNameNode = document.createElement('td') ; 
    var nameTextNode = document.createTextNode(name.value.toString()) ; 
    thNameNode.appendChild(nameTextNode) ; 
    var thAgeNode = document.createElement('td') ; 
    var ageTextNode = document.createTextNode(age.value) ; 
    thAgeNode.appendChild(ageTextNode) ; 

    trNode.appendChild(thNameNode) ; 
    trNode.appendChild(thAgeNode) ; 

    body.appendChild(trNode) ;
    return false;
}

Answer 2

你没有多少选择来实现这一目标。

使用type = 'button'代替type= 'submit'
在点击处理程序中使用return false。不要忘记内联事件绑定中的return。例如onclick='return onSubmit()'。 Fiddle here
使用e.preventDefault() Fiddle here

修改html（DOM）后丢失更改

2 个答案: