Jquery automatic change select option-CodePudding

im trying edit this code: https://stackoverflow.com/a/48380888/16910028

i want all change will imediately display but i got problem with select option. it did not 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?

Thank you!

CodePudding user response：

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>