get value of form with submit without refreshing the page

Question

I will explain my problem: I have a form and I want to click on submit to display a div (in the same page) and run a java script function without refreshing the page

<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>

Here it shows how to prevent form from submitting, https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted you only have to get your values and do whatever inside the js function. — Dula wnRp, Apr 14 '18 at 10:45

score 0 · Accepted Answer · answered Apr 14 '18 at 10:40

Add type="button" to the button, you don't do this it will trigger a submit.

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

If you mean by clicking this:

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

You have to change that into a button also

zareb Northman · Answer 2 · 2018-04-14T12:04:33.447

0

If I do understand this correctly, you want to NOT refresh the page when you click on submit.

Add a listener on your submit button, and, using jQuery

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

Or, vanilla javascript :

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

this should do the trick !

edited Apr 14 '18 at 12:04

answered Apr 14 '18 at 11:01

zareb Northman

1
6

looks like the OP is looking for a standard javascript solution – Rotimi Apr 14 '18 at 11:28
`document.getElementById('mySubmitButton').addEventListener('click', function(e){ e.preventDefault(); document.getElementById('myDiv').classList.add('isVisible'); });` this should do the trick ! – zareb Northman Apr 14 '18 at 12:00
i am not the OP ;) – Rotimi Apr 14 '18 at 12:01
True ! I'm still new to the comment section – zareb Northman Apr 14 '18 at 12:03
you have to create a class .isVisible and style it to display block for this to work. You can also provide us with the errors you get in your console :) – zareb Northman Apr 18 '18 at 08:35

score 0 · Answer 3 · answered Apr 14 '18 at 12:12

0

Try this:

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

answered Apr 14 '18 at 12:12

Sanjay

540
2
13
29

get value of form with submit without refreshing the page

3 Answers3