How to get input data without refreshing data with AJAX?

June 20, 2022

I have a form. It is include two radio button and one input. Radio buttons are name hexadecimal to decimal and decimal to hexadecimal.

When I write text to input I need to show result without page refreshing.

For example 1 result -> 10 12 result->23 directly showing.

So I make a research I need to use AJAX inside PHP. But all examples working click button. I don’t want to use button.

Can you give me a example post request same page in AJAX ?

>Solution :

Consider the following jQuery example.

$(function() {
  $("#input").keyup(function(event) {
    var input = $(this).val();
    if ($("#dec").is(":checked")) {
      $("#output").val(parseInt(input).toString(16));
    } else {
      $("#output").val(parseInt(input, 16));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <div>
    <input type="text" id="input" value="0" />
  </div>
  <div>
    <input type="radio" value="decToHex" name="select" id="dec" checked="true" />
    <label for="dec">Decimal to Hex</label>
  </div>
  <div>
    <input type="radio" value="hexToDec" name="select" id="hex" />
    <label for="hex">Hex to Decimal</label>
  </div>
  <div>
    <input type="text" id="output" value="0" />
  </div>
</form>