Values populated by .val() not passed through validation

Viewed 58

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

  1. Focus on the field(click or using tab)
  2. 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.

  1. Change
  2. Click
  3. Composition End
  4. Composition Start
  5. Composition Update
  6. 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()

Paypal Email is manually altered. Other fields are populated using .val()

0 Answers
Related