Question 36139 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

form to target div with file upload – Jquery

I currently have a form in which the results are returned into a targeted div.
It works great. EXCEPT when my form includes an upload ( INPUT TYPE="FILE" NAME="PIC_UPLOAD" ), in which case it simply does not work. Any ideas on what I am missing?
Here is the current (working) code

/* attach a submit handler to the form */
$("#testform").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post and put the results in a div */
  $.post(url, $("#testform").serialize(),
    function(data) {
      var content = data;
      $('#targetdiv').empty().append(content);

    }
  );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="the form">

  <form action="destination_file.html" id="testform">

    <INPUT Type="hidden" NAME="func" VALUE="1004">
    <TEXTAREA NAME="NOTES" ROWS=4 COLS=34></TEXTAREA>
    <input type="submit" value="Submit">

</div>
<hr>
<div id="targetdiv"> results to go here </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, I was able to achieve POST'ing the form, with a file upload and target a div by switching to AJAX. See updated code:

    <script>


    /* attach a submit handler to the form */
    $("#testform").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      var form_data = new FormData($('testform')[0]);
        $.ajax({
            type: 'POST',
            url: 'url_to_file_to_process_upload.php',
            data: form_data,
            processData: false,
            contentType: false,
            dataType: "html",
            success: function (data) {
                $('#targetdiv').html(data);
            },
            error: function (xhr, status) {
                alert("Sorry, there was a problem!");
            },
            complete: function (xhr, status) {
                //$('#targetdiv').slideDown('slow')
            }
        });

    });

</script>


  2. 0

    I would suggest that you just use plain vanilla js instead of using jQuery…

    Let HTML be the thing that describes how things should work and just make js a progressive enhancement. The site should work without js.
    Often the best code is reusable code. so try writing your code a bit like

    async function ajaxify (evt) {
  evt.preventDefault()
  const form = evt.target
  const fd = new FormData(form)
  const res = await fetch(form.action, { method: form.method, body: fd })
  const text = await res.text()
}

$("form").submit(ajaxify)

    No specific js logic is necessary, works for more forms. easy to update, change and manipulate from HTML, and the js/css file can be more static hosted on some CDN

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search