How to pass variables and FormData with Jquery Ajax? - php

Question

I want to update data of input field with ajax. Being new to Ajax, I've tried this so far. I am passing two variables(i.e, Name and Col to identify the name and id of the input field). So now I am stuck with this. I want to update the value of the input field with name="email_id" and Column name in mysql table "Email". So I passed the two variable so that php can identify the input name. But how do I pass the new data in the field? I have done it in another form with FormData but I need help in this case. And I apologise if I am not being specific, its my first query on stackoverflow.
HTML:
<input type="email" onblur="validate()" value="<?php echo $row['Email']; ?>" id="email_id" data-toggle="tooltip" title="Invalid Email" data-placement="top" data-content="Email must be in the format xyz#abc.com/net/info/org/in" name="email_id" placeholder="E-mail ID eg. max#mymail.com" class="form-control col-sm">
Jquery:
$('input').on("change",function(){
console.log("Clicked");
var Name=$(this).attr('name');
var Col=$(this).attr('id');
console.log(Name);
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name},
success:function(response){
console.log(response);
}
});
});

Answer 1

You can use document.getElementByID().value to grab the value of the input field:
$('input').on("change",function(){
console.log("Clicked");
var Val=document.getElementById('email_id').value;
var Name=$(this).attr('name');
var Col=$(this).attr('id');
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name, "Email":Val},
success:function(response){
console.log(response);
}
});
});