Очень часто нужно собрать все значения из полей input и отправить PHP-обработчику. Можно использовать много раз функцию val(). Если количество полей будет больше 20, то вам придётся 20 раз использовать val(). Это неудобно! На помощь придёт функция serialize(). Она сама сформирует часть строки с параметрами. Вам нужно будет указать обработчик и пристыковать передаваемые параметры.

<style>
  form { margin:10px; border: 1px solid gray; }
  input { margin:5px; border: 1px solid gray; }
</style>  
<form name="test" method="get" action="api.php">
	<input type="text" name="title" value="" placeholder="Введите название"><br>
	<input type="text" name="text" value="" placeholder="Введите текст"><br>
	<input type="text" name="cat" value="" placeholder="Введите категорию"><br>
	<input type="submit" name="send" value="Отправить">
	<input type="reset" value="Очистить">
</form>

var values = $("form").serialize();
console.log(values);
// вывод: "title=title&text=other+text&cat=category"
url = 'api/index.php?' + values;

Есть один недостаток. Вы не сможете что-то изменить в строке "title=title&text=other+text&cat=category". Изменить данные можно, но это придется использовать: регулярные выражения, функцию replace. Это неудобно. Я предлагаю вам функцию serializeArray(). serializeArray() собирает все данные в массив, а не в строку. Данные в массив попадают в виде объектов.

var values = $("form").serializeArray();
console.log(values);
/* вывод
[Object { name="title", value="title"}, 
 Object { name="text", value="other text"}, 
 Object { name="cat", value="category"}]*/

После применения функции в переменной values находится массив объектов. Обратите внимание на то, что ключом в каждом объекте является свойство name. Если у элементов input не будет атрибута name, то функция serializeArray() не сработает. Теперь у вас есть возможность обратиться к элементу массива и изменить его свойство. Есть еще одна крутая функция serializeObject(). Я взял её из интернета.

$.fn.serializeObject = function()
{
 var o = {};
 var a = this.serializeArray();
 $.each(a, function() {
     if (o[this.name] !== undefined) {
         if (!o[this.name].push) {
             o[this.name] = [o[this.name]];
         }
         o[this.name].push(this.value || '');
     } else {
         o[this.name] = this.value || '';
     }
 });
 return o;
};

var values = $("form").serializeObject();
console.log(values);
// вывод: Object { title="title", text="other text", cat="category"}

Обратите внимание что создаётся объект с ключами и значениями. Это очень удобно. Вы можете изменить любое значение налету values.cat = 'javascript'. В предыдущей функции serializeArray() для того чтобы изменить значения у элемента массива нужно было бы обращаться к элементу массива по ключу (индексу) v[0].name = 'javacript';. Это неудобно. В данном примере изменить значение объекта очень просто и удобно values.cat = 'jquery'. Следите за тем чтобы у input свойства name не повторялись.

Вы можете выбирать значение из каждого поля по селектору или id. Смотрите статью как получить поменять значение элемента val() jquery.