Блог

Я отправляю параметры формы с помощью serialize() метода, но проблема в том, что отправленные параметры видны в адресной строке. Даже я использую POST метод для запроса AJAX.

Вот HTML-код для формы, которую я пытаюсь отправить.

 <form id="addform" method="post">
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputReminder">Reminder Type</label>
      <select id="inputReminder" class="form-control" name="inputReminder">
        <option value="I">Reminder I</option>
        <option value="II">Reminder II</option>
        <option value="III">Reminder III</option>
        <option value="General">General</option>
      </select>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputLetterref">Reminder Reference No.</label>
      <input type="text" class="form-control" id="inputLetterref" name="inputLetterref" placeholder="Reminder Reference No." required>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputLetterdate">Reminder Date</label>
      <input type="text" readonly="readonly" class="form-control sel-date" id="inputLetterdate" name="inputLetterdate" placeholder="Reminder Date" required>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-12">
      <button type="submit" class="btn btn-primary">Add Reminder </button>
    </div>
  </div>

</form>
 

Запрос jQuery AJAX:

 $("#addform").submit(function(event) {
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'submitdetails.php',
    data: $(this).serialize()
  }).done(function(data) {

    $('#result').html(data);

  }).error(function(data) {

    $('#result').html(data);

  });
});
 

Вы можете попробовать:

 $("#addform").submit(function(event){       
   event.preventDefault();
   $.ajax({
      type: 'POST', 
      url : 'submitdetails.php',
      data: $(this).serialize(),
      done: function(data){             
        console.log(data)
        $('#result').html(data);          
      },
      fail: function(data){
         $('#result').html(data);
      }
   })      
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addform" method="post"> 
    <div class="form-row"  id="reminderresult">
         
    </div>
    <div class="form-row">    
    <div class="form-group col-md-12">
      <label for="inputReminder">Reminder Type</label>
      <select id="inputReminder" class="form-control" name="inputReminder">          
          <option value="I">Reminder I</option>                    
          <option value="II">Reminder II</option>                    
          <option value="III">Reminder III</option>
          <option value="General">General</option>
      </select>
    </div>    
  </div>  
    
    <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputLetterref">Reminder Reference No.</label>
      <input type="text" class="form-control" id="inputLetterref" name="inputLetterref" placeholder="Reminder Reference No." required>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputLetterdate">Reminder Date</label>
      <input type="text" readonly="readonly" class="form-control sel-date" id="inputLetterdate" name="inputLetterdate" placeholder="Reminder Date" required>
    </div>
  </div>
    
  <button type="submit" class="btn btn-primary">Add Reminder </button>
</form>