从键盘输入时提交按钮刷新整个页面

Question

我有这个表单，我从用户那里获取输入并将其以相同的表单（在 td 内）插入到 table，我是用 js 完成的。问题是每当我单击输入（使用鼠标）时它工作正常，但是当我使用键盘输入时它会刷新整个页面。代码有什么问题？我该如何克服？

<form action="">
   LOAN AMOUNT:<input type="text" name="amount" id="amount"/>
   <input type="button" value="Enter" id="enter"/>
   <div class="CSSTableGenerator">
      <table>
         <tr>
            <th></th>
            <td></td>
         </tr>
      </table>
   </div>
</form>

Answer 1

句柄onsubmit

像这样

<form action="" onsubmit="return false;">

Answer 2

您使用的是输入类型按钮，因此点击事件可以正常工作，但是当您点击回车键时，会发生表单提交事件，因为您的页面会重新加载

你需要处理提交事件而不是点击事件

在您的 html

中进行以下更改

    <form action="" id="myform" >

   <input type="submit" value="Enter" id="enter"/>

在你的 js 中关注

  $(document).ready(function() {
        $("#myform").submit(function() { // handle submit instead of click 
            var p = document.getElementById("amount").value;
            var interest = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            var year = [5, 10, 15, 20, 25, 30];
            var r;
            var SI;
            var id;
            for (x = 0; x < interest.length; x++) {
                r = interest[x];
                id = x + 1;
                for (y = 0; y < year.length; y++) {
                    n = year[y];
                    SI = (p * n * r) / 100;

                    console.log(SI)
                    document.getElementById(n + "_year_" + id).innerHTML = SI;
                }
                console.log(p)
                console.log(r)
               document.getElementById("loan" + id).innerHTML = p;
                document.getElementById("interest" + id).innerHTML = r + "%";
            }
            return false;
        });
    });

工作fiddle

从键盘输入时提交按钮刷新整个页面

Submit button refreshes the entire page while enter from keyboard

javascript

html

forms

input

form-submit