I am working on a form that has several fields. I am passing some requests using ajax to PHP to get values and populate the fields using the jquery .val function. But the problem is when I try submitting it the validation gives error that "Fill the fields".
To solve it you have to go through these steps
- Focus on the field(click or using tab)
- Either enter a character using the keyboard or remove one
The input field is using events, I checked through inspect element these are the events that are attached to it.
- Change
- Click
- Composition End
- Composition Start
- Composition Update
- Focus
Is it possible to simulate the events I mentioned to solve the problem. Like first focusing on the field and then entering a space would do for me.
$.ajax(
{
url:"/wp-content/themes/hello-theme-child-master/custom.php",
type:"POST",
dataType: 'json',
data:
{
email:email,
action:"addnew"
},
success:function(data,status)
{
console.log(data);
$('.am-custom-fields .el-form-item').each(function () {
var label=$(this).find('label').html();
if(label == "Street Address:")
{
console.log("Street Adress is: "+data[0]);
$(this).find('input').val(data[0]);
$(this).trigger({type: 'keypress', which: 13, keyCode: 13});
}
if(label == "City:")
{
console.log("City is: "+data[1]);
$(this).find('input').val(data[1]);
$(this).trigger({type: 'keypress', which: 13, keyCode: 13});
}
if(label == "State:")
{
console.log("State is: "+data[2]);
$(this).find('input').val(data[2]);
$(this).trigger({type: 'keypress', which: 13, keyCode: 13});
}
if(label == "Zip Code:")
{
console.log("Zip code is: "+data[3]);
$(this).find('input').val(data[3]);
$(this).trigger({type: 'keypress', which: 13, keyCode: 13});
}
if(label == "Paypal Email:")
{
console.log("Paypal Email is: "+data[4]);
$(this).find('input').val(data[4]);
$(this).trigger({type: 'keypress', which: 13, keyCode: 13});
}
});
},
error:function(data)
{
console.log("ajax error, json: " + data);
}
}
I tried using keypress trigger to simulate action, but I don't think it worked.
Paypal Email is manually altered. Other fields are populated using .val()
