Jquery automatic change select option

Question

I'm trying to edit this code: https://stackoverflow.com/a/48380888/16910028

I want to change so that it will immediately display, but I got problem with select option. It doesn't update when I select other option.

This is my code

 $(document).ready(function() { $("#my_form input,textarea").stop().keyup(function() { var data = new FormData(); //Form data var form_data = $('#my_form').serializeArray(); $.each(form_data, function(key, input) { data.append(input.name, input.value); }); //File data var file_data = $('input[name="my_images"]')[0].files; for (var i = 0; i < file_data.length; i++) { data.append("my_images[]", file_data[i]); } //Custom data data.append('key', 'value'); $.ajax({ url: "test.php", method: "post", processData: false, contentType: false, data: data, success: function(data) { console.log(data); $('#preview').html(data); }, error: function(e) { //error } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false"> <input id="name" name="name" placeholder="Enter Name" type="text" value=""> <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea> <select name="gender" id="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg" /> </form> <div id="preview"></div>

test.php file

print_r($_POST);
print_r($_FILES);

Is there any way to make it work?

Answer 1

You're only executing the code in response to a keyup event in a textarea or input . You need a listener for the change event of the <select> .

Put all the code in a named function so you can call it from any of these event listeners.

 $("#my_form input, #my_form textarea").keyup(do_ajax_submit); $("#my_form select").change(do_ajax_submit); function do_ajax_submit() { var data = new FormData(); //Form data var form_data = $('#my_form').serializeArray(); $.each(form_data, function(key, input) { data.append(input.name, input.value); }); //File data var file_data = $('input[name="my_images"]')[0].files; for (var i = 0; i < file_data.length; i++) { data.append("my_images[]", file_data[i]); } //Custom data data.append('key', 'value'); $.ajax({ url: "test.php", method: "post", processData: false, contentType: false, data: data, success: function(data) { console.log(data); $('#preview').html(data); }, error: function(e) { //error } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false"> <input id="name" name="name" placeholder="Enter Name" type="text" value=""> <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea> <select name="gender" id="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg" /> </form> <div id="preview"></div>