按下提交按钮后，我的表单数据将被清除

Question

https://ghostbin.com/paste/7mkdg

我有这个代码，但是在按下计算按钮时，它会非常快速地清除所有数据并且结果不会显示。我可以在地址栏和输出框（readonly one）中看到它，但它会在不到一秒的时间内消失。

＆＃13;

＆＃13;

// Delete users for ADMIN with GET 
document.addEventListener("click", function(e) {

  if (e.target.classList.contains("btnDeleteUser")) {
    /// get users based on id
    sUserId = e.target.getAttribute("data-userId");
    //console.log(sUserId);

    // You need to pass a function who receives the param from your function getAjax.
    // The function getAjax will call a callback, in this case, the function we are passing.  
    // Therefore, when the getAjax function calls: callback( ajDataFromServer ); 
    // 'fromServer' will be the passed value 'ajDataFromServer'.

    getAjax("api_delete_user.php?id=" + sUserId, function(fromServer) {
      deleteUser(fromServer, e);
    });
  }
});

function deleteUser(ajUserDataFromServer, e) {
  if (ajUserDataFromServer.status == "ok") {
    //console.log( "USER DELETED FROM THE DATABASE" );
    e.target.parentNode.removeChild(e.target.parentNode);
  } else {
    //console.log("USER NOT DELETED FROM THE DATABASE");
    showErrorMessage("Deleting User Failed - Try again");

  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

• 将您的按钮更改为input type button，以避免提交表单。

<input onClick='calcGravAccel()' type='button' class="btn btn-primary" value='Calculate Gravitational Acceleration'></input>

• 或删除表单元素。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <section id="main-section">
            <div class="dark-overlay">
                <div class="team-inner">
                    <div class="container">
                        <div class="row">
                            <div class="col-6">
                                <form class="" name="calcGravAcceleration">
                                    <div class="form-group b">
                                        <label for="inputAngVelocity1">Angular Velocity</label>
                                        <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputRadius1">Radius</label>
                                        <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle">
                                    </div>
                                    <div class="form-group">
                                        <label>Gravitational Acceleration</label>
                                        <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly>
                                    </div>

                                    <input onClick='calcGravAccel()' type='button' class="btn btn-primary" value='Calculate Gravitational Acceleration'></input>
                                </form>
                            </div>
                            <div class="col-6">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <script>
            function calcGravAccel(e){
                var angVel = document.getElementById("inputAngVelocity1").value;
                var radius = document.getElementById("inputRadius1").value;

                var squaredAngVel = Math.pow(angVel, 2);

                var gravityAccel = squaredAngVel*radius;

                var result = document.getElementById("gravAccelResult");

                result.value="" + gravityAccel;

            }
        </script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该将按钮的类型指定为type="button"。按钮的默认类型是submit，这会导致您在单击时提交表单，而这又会刷新页面。改为：

<button type="button" onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button>

Answer 3

如果<button>上有<form>，则该按钮的默认行为是提交表单。如果您不想要，则需要阻止该默认行为。获取单击处理程序的event参数，并调用preventDefault方法。由于您具有内联事件处理程序，因此您必须稍微修改它们以传递事件参数。如果您使用javascript来分配那些处理程序，那么您就不必这样做了。

<button onclick="calcGravAccel(event)" class="btn btn-primary">Calculate Gravitational Acceleration</button>

...

<script>
    function calcGravAccel(event){
        event.preventDefault();
        var angVel = document.getElementById("inputAngVelocity1").value;
        var radius = document.getElementById("inputRadius1").value;

        var squaredAngVel = Math.pow(angVel, 2);

        var gravityAccel = squaredAngVel*radius;

        var result = document.getElementById("gravAccelResult");

        result.value="" + gravityAccel;

    }
</script>

Answer 4

function calcGravAccel(){
                var angVel = document.getElementById("inputAngVelocity1").value;
                var radius = document.getElementById("inputRadius1").value;

                var squaredAngVel = Math.pow(angVel, 2);

                var gravityAccel = squaredAngVel*radius;

                 document.getElementById("gravAccelResult").value = gravityAccel;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <section id="main-section">
            <div class="dark-overlay">
                <div class="team-inner">
                    <div class="container">
                        <div class="row">
                            <div class="col-6">
                                <form class="" name="calcGravAcceleration">
                                    <div class="form-group b">
                                        <label for="inputAngVelocity1">Angular Velocity</label>
                                        <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputRadius1">Radius</label>
                                        <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle">
                                    </div>
                                    <div class="form-group">
                                        <label>Gravitational Acceleration</label>
                                        <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly>
                                    </div>

                                   
                                </form>
                                 <button onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <script>
           
                

            
        </script>

Answer 5

如果您不希望表单提交，只需将retun添加到函数调用并在函数中返回false

function calcGravAccel() {
  var angVel = document.getElementById("inputAngVelocity1").value;
  var radius = document.getElementById("inputRadius1").value;
  var squaredAngVel = Math.pow(angVel, 2);
  var gravityAccel = squaredAngVel * radius;
  var result = document.getElementById("gravAccelResult");
  result.value = "" + gravityAccel;
  return false;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--SECTION-->
<section id="main-section">
  <div class="dark-overlay">
    <div class="team-inner">
      <div class="container">
        <div class="row">
          <div class="col-6">
            <form class="" name="calcGravAcceleration">
              <div class="form-group b">
                <label for="inputAngVelocity1">Angular Velocity</label>
                <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)">
              </div>
              <div class="form-group">
                <label for="inputRadius1">Radius</label>
                <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle">
              </div>
              <div class="form-group">
                <label>Gravitational Acceleration</label>
                <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly>
              </div>

              <button onclick="return calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button>
            </form>
          </div>
          <div class="col-6">

          </div>
        </div>
      </div>
    </div>
  </div>
</section>