0

How can I get the input field values from the form?

$(document).on('change', 'input[name="documnt"]', function() {
  formParent = $(this).parents("form.reupload-form");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form" method="post" action="{{formAction}}" enctype="multipart/form-data" class="btn btn-warning btn-file reupload-form">
  <input type="file" name="documnt" id="documnt" accept=".jpeg,.png,.pdf,.jpg,.tiff,.tif" />
  <span class="file_error_msg error"></span>
  <input type="hidden" value="1" name="type_of_upload" id="type_of_upload">
  <button type="submit" class="form_submit upload-btn">Upload</button>
</form>
padmaja cherukuri
  • 383
  • 2
  • 14
  • 2
    Firstly, use `closest()`, not `parents()`. Then, assuming you want to get the value in the `change` event handler, use `formParent.find('.input-selector-here').val()`. If that isn't what you meant, please edit the question to be much more clear in your goal. – Rory McCrossan Dec 05 '19 at 09:44
  • Does this answer your question? [jQuery: getting parent of an element](https://stackoverflow.com/questions/25177660/jquery-getting-parent-of-an-element) – Bashar Dec 05 '19 at 09:45
  • Do this `formParent = $(this).closest("form.reupload-form")` – Sourabh Somani Dec 05 '19 at 09:45
  • 1
    Your title asks how to get "parent form" then your question asks how to get "input field values from the form" - please reword the title and question so that you are asking a single, coherent question. – freedomn-m Dec 05 '19 at 09:47
  • 1
    Why do you want to read input from form while change in input values? If you are submitting form then read all input once before submit instead of reading it for every change in input values – Bhushan Kawadkar Dec 05 '19 at 09:51
  • @RoryMcCrossany simple solution .worked for me – padmaja cherukuri Dec 05 '19 at 10:06

1 Answers1

2

You can directly access parent element form only using class as below and with serialize you can get all form input value.

$(document).on('change', 'input[name="documnt"]', function() {
  formParent = $(this).closest(".reupload-form").serialize();
  
  console.log(formParent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form" method="post" action="{{formAction}}" enctype="multipart/form-data" class="btn btn-warning btn-file reupload-form">
  <input type="file" name="documnt" id="documnt" accept=".jpeg,.png,.pdf,.jpg,.tiff,.tif" />
  <span class="file_error_msg error"></span>
  <input type="hidden" value="1" name="type_of_upload" id="type_of_upload">
  <button type="submit" class="form_submit upload-btn">Upload</button>
</form>
Devsi Odedra
  • 5,244
  • 1
  • 23
  • 37