通過提交獲取表單的價值而無需刷新頁面

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 =“ button”添加到按鈕，不執行此操作將觸發提交。

<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();
});

或者，香草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>