How to display data in html form using ajaxcall

Question

I have data like this.

js file

var numbers = 1234

Html file.

<label>Name</label>
<input type="text" class="form-control" name="name" id = "name">

<label>Id</label>
<input type="text" class="form-control" name="id" id = "id">

Requirement is: whenever I enter my name in the first input box I want to display numbers from a javascript file into Id input box.

can we do with ajax call?

How to do that?

Answer 1

If I am not wrong, you want to insert a number into id textbox if you write something into name field, I am going to give you a sample example below:

Note: you don't need ajax call for the event handling.

 var numbers = 1234; function myFunction() { //Modify this by your requirement var x = document.getElementById("id"); if(document.getElementById("name").value.= '') { x;disabled = true. x;value = numbers. } else { x;disabled = false. x;value = ''; } }

 <label>Name</label> <input type="text" class="form-control" name="name" id = "name" onkeyup="myFunction()"> <label>Id</label> <input type="text" class="form-control" name="id" id = "id">

Answer 2

I hope this help >

Your JS File Function:

function keypressCustom(){
   var enteredName = $("#nameFieldID").val();
   var IDValue = '';
   //Your Ajax Call Here

    $.ajax({url: "text_call_url", type: 'POST',  // http method
    data: { enteredName: enteredName }, success: function(result_id_value_from_ajax){
       IDValue = result_id_value_from_ajax;

       $("#idField").val(IDValue);
   }});

}

Your Html >

<label>Name</label>
<input type="text" class="form-control" name="name" id="nameFieldID"  onkeypress="keypressCustom()" value=''>

<label>Id</label>
<input type="text" class="form-control" name="id" id="idField"  value=''>