Question

我将解释我的问题：我有一个表单，我想点击提交以显示一个div（在同一页面中）并运行一个java脚本函数而不刷新页面

<form action="#" method="post" name= "form1" id = "form1">
<div class="row_ligne">
  <div class="col-25">
    <label for="fname">Fréquence </label>
  </div>
  <div class="col-75">
    <select id="frequence" name="frequence" onchange="showDiv(this)">
      <option value="yearly">Annuelle</option>
      <option value="monthly">Mensuelle</option>
      <option value="daily">Quotidienne</option>
    </select>
  </div>
</div>

<div class="row_ligne">
      <div class="col-50">

        <input type="submit" id="Backtest" value ="Backtest" name = 
  "Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >

      </div>

     </div>
</form>

<div class="tab_back" id ="id_div_res" style="display:none;">
<button class="tablinks" 
onclick="openOnglet(event,'repartition')">Result</button> </div>

<script>
function open_div_res(){

          document.getElementById("id_div_res").style.display = "block";
          document.getElementById('id_div_res').scrollIntoView();

      }

   </script>

Answer 1

添加type =＆＃34;按钮＆＃34;按钮，你不会这样做会触发提交。

<button type="button" class="tablinks" 
onclick="openOnglet(event,'repartition')">Result</button>

如果你的意思是点击这个：

<input type="submit" id="Backtest" value ="Backtest" name = 
 "Backtest" onclick ="open_div_res(),openOnglet(event, 'repartition');" >

您还必须将其更改为按钮

Answer 2

如果我理解这一点，您不希望在点击提交时刷新页面。

在提交按钮上添加一个监听器，并使用jQuery

$("#mySubmitButton").on("click", function(event){
  event.preventDefault();
  // show the div code
  $("#myDiv").show();
});

或者，vanilla javascript：

document.getElementById('mySubmitButton').addEventListener('click', function(e){ e.preventDefault(); document.getElementById('myDiv').classList.add('isVisible'); });

这应该可以做到！

Answer 3

试试这个：

<form action="#" method="post" name= "form1" id = "form1" onSubmit="return false;">
   //Code here
</form>

在不刷新页面的情况下获取表单的值

3 个答案: