How to get input data without refreshing data with AJAX?

Question

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 ?

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Jun 20 '22 at 19:11
You don't have to click a button. You can use any event you like to trigger the AJAX request. For instance, you can use `keyup` on the input field. — Barmar, Jun 20 '22 at 19:12
Using event listeners on your input might not be the best option, depending on your actual needs. Using event listeners on your input can mean that every single character will trigger a different server request. So if you do go that route, you will probably want to validate the input to make sure it meets your specific requirements BEFORE the ajax is triggered like validating length, content etc.. — imvain2, Jun 20 '22 at 19:15
Does this answer your question? [How to convert decimal to hexadecimal in JavaScript](https://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hexadecimal-in-javascript) — Twisty, Jun 20 '22 at 19:32

Twisty · Accepted Answer · 2022-06-20T19:38:38.533

0

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>

edited Jun 20 '22 at 19:38

answered Jun 20 '22 at 19:32

Twisty

30,304
2
26
45

Actually I need keyup instead of change because change works when you finish writing. Thats mean you write 123456 you can only see 123456 result but I need 1 result 12 result 123 result 1234 result but thank you I work on it. – Jun 20 '22 at 19:37
@MuratAslan updated answer. `change` and `keyup` events are pretty similar, so easy enough to adjust the callback. – Twisty Jun 20 '22 at 19:44

How to get input data without refreshing data with AJAX?

1 Answers1