jQuery Tips — Form Values, Select, and Request Headers

Despite its age, jQuery is still a popular library for manipulating the DOM.

In this article, we’ll look at some tips for working with jQuery.

Get Form Input Field Values Using jQuery

We can get the form fields and their values with various methods.

One way is to call submit and then get all the input fields.

For example, we can write:

$('form').submit(() => {
  const inputs = $('form :input');
  const values = {};
  inputs.each(function() {
    values[this.name] = $(this).val();
  });
});

We get the form element and call the submit method on it,

Then we loop through the inputs and call each to loop through their values.

In the each callback, we get the form name of the field with this.name and the inputted value with $(this).val() .

jQuery also has the serializeArray method to let us get the fields as an array.

Then we can use each on it to loop through each field.

For example, we can write:

const values = {};
$.each($('form').serializeArray(), (i, field) => {
  values[field.name] = field.value;
});

We call serializeArray on the form element to convert the fields into an array.

Then we have a callback that gets the field with the field parameter.

We get the name and value properties to get the name and value attributes respectively.

Also, we can call serialize to get the value of each field.

For example, we can write:

$('form').submit(function() {
  const values = $(this).serialize();
});

We get the values from the form element with the serialize method.

Get the Rendered Height of an Element with jQuery

We can get the rendered height of an element with jQuery by using various methods.

To do this, we can write any of the following:

$('#foo').height();
$('#foo').innerHeight();
$('#foo').outerHeight();
$('#foo').outerHeight(true);

height returns the height of the element excluding the margin, padding, or border.

innerHeight gets the height of the div with padding but without the border or margin.

outerHeight returns the height of the element including padding and border.

outerHeight with the argument true returns the height including border, margin, and padding.

Get All Options of a Select Using jQuery

To get all options of a select element using jQuery, we can just use the $ method with the selector to get all our options.

For instance, we can write:

$("select#id option").each(function() {
  //...
});

We get the select element with the ID id ‘s option elements with this selector.

Then we use each to iterate through all of them.

Alternatively, we can use the map method to get the values from the option elements:

$("select#id option").map(function() {
  return $(this).val();
}).get();

We get the value attribute value of each option element with the callback that we have.

get returns the DOM element matched bu the jQuery object.

We can also use find to specifically get the option child elements in the select element.

For example, we can write:

$('select#id').find('option').each(function() {
   console.log($(this).val());
});

We call find to get the option elements that are the child of the select with the ID id .

And we get the value of the option inside the callback.

Convert a jQuery Object into a String

We can convert a jQuery object into a string bu calling the html method.

For example, we can write:

$('<div>').append($('#foo').clone()).html();

to create a div.

Then we append the clone of the element with ID foo into it.

Finally, we get the HTML string representation of the element with ID foo .

Also, we can use the outerHTML property to make our lives easier.

For instance, we can write:

$('#foo').prop('outerHTML');

We get the element with ID foo and call the prop method on it with 'outerHTML' to get the outerHTML property of the element.

Add Request Headers to Request with jQuery

We can add access control request headers to a request with the setRequestHeader method.

For instance, we can write:

$.ajax({
  type: "POST",
  beforeSend(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "/login",
  data: JSON.stringify(request),
  processData: false,
  success(msg) {
    alert('success');
  }
});

We call ajax with the beforeSend method to run code before a request, which includes adding request headers.

It takes a request parameter, which we can call setRequestHeader with.

The first argument is the key and the 2nd is the value.

Conclusion

There are many ways to get the height of an element.

We can add request headers to a request with ajax .

We can also get form values and options in various ways.