CODEWITHSUNDEEP
javascriptjqueryhtml
padmaja cherukuri
padmaja cherukuri

Reputation: 413

How to get Form Elements in JQuery

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>

Upvotes: 0

Views: 71

Answers (1)

Devsi Odedra
Devsi Odedra

Reputation: 5322

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>

Upvotes: 2

Related Questions