'Span value disappear after click

When user choose an option from the drop-down list, the selected option (text) is displayed in a span (id="myoption") But, after click on submit button, the span value disappear.

My html code:

<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
  <h6 class="m-0 font-weight-bold text-primary">
  Generare heatmap pentru: Current&nbsp;Direction > anul 2017 > perioada:
  <span id="myoption" style="margin-left:230px;"></span>
  </h6>
  </div>

  <form name="add" method="post">
   <select class="form-control dropdown" id="dd" name="select_days" style="width:350px;margin-left:20px;">
    <option value="" disabled selected>Selecteaza o perioada:</option>
   <option value="1,2,3">1 Dec - 3 Dec</option>
   <option value="4,5,6">4 Dec - 6 Dec</option>
   <option value="7,8,9">7 Dec - 9 Dec</option>
   <option value="10,11,12">10 Dec - 12 Dec</option>
   <option value="13,14,15">13 Dec - 15 Dec</option>
   <option value="16,17,18">16 Dec - 18 Dec</option>
   <option value="19,20,21">19 Dec - 21 Dec</option>
   <option value="22,23,24">22 Dec - 24 Dec</option>
   <option value="25,26,27">25 Dec - 27 Dec</option>
   <option value="28,29,30">28 Dec - 30 Dec</option>


  </select>
  <br />
  <input type="submit" class="btn btn-primary" value="Generare Plot" style="margin-left:20px;">
  </form>

The JS code:

    $(document).ready(function () {
      $( ".dropdown" ).change(function() {
        var myopt =  $( "#dd option:selected" ).text();
        $("#myoption").text(myopt);
     });

     $("input.btn btn-primary").click(function(event){
       var xxx = $('span#myoption').text();
       $("#myoption").text(xxx);
       event.preventDefault();
    });
  });

I look forward to any tips.

jquery


Solution 1:[1]

After cliking on submit button the form is getting submitted and it's reloading the page. so instead of form submit you can use Ajax call to submit the form.

it will work when you will change input type to type="button" instaed of type="submit" then create ajax call to submit the form data.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pal.padvi

Related Questions