Как передать через ajax все значения формы?

Question

[Узаир Ижа]

<form action="" id="form_svois">
  <div class="col-md-12">
      <select name="" class="chosen-select" data-placeholder="Выберите Цвет" multiple="" id="3" style="display: none;">
     <option value="3">Зеленый</option>
    <option value="2">Красный</option>
    <option value="4">Фиолетовый</option>
    <option value="5">Синий</option>
    <option value="6">Оранжевый</option>
    <option value="7">Желтый</option>
    <option value="8">Голубой</option>
    <option value="14">Белый</option>
    <option value="15">Серый</option>
    <option value="16">Черный</option>
    <option value="17">Коричневый</option>
    <option value="18">Красно-коричневый</option>
    <option value="19">Серебристый</option>
    <option value="20">Бежевый</option>
    <option value="21">Салатный</option>
    <option value="22">Бирюзовый</option>
    <option value="23">Желто-коричневый</option>
    <option value="24">Алюминиевый</option>
    <option value="25">Светло-серый</option>
    <option value="26">Ярко-зеленый</option>
    <option value="27">Кремовый</option>
    <option value="28">Стальной</option>
    <option value="29">Вишневый</option>
    <option value="30">Золотисто-коричневый</option>
    <option value="31">золотой</option>
    <option value="32">Шоколадный</option>
    <option value="33">Розовый</option>
    <option value="34">Светло-голубой</option>
    <option value="35">Фисташковый</option>
    <option value="36">Слоновая кость</option>
    <option value="37">Морская волна</option>
    <option value="38">Светло-зеленый</option>
    <option value="39">Сиреневый</option>
    <option value="40">Супербелый</option>
    <option value="41">Фиолетовый</option>
    <option value="42">Темно-зеленый</option>
    <option value="43">Белоснежный</option>
    <option value="44">Светло-бежевая</option>
    <option value="45">Песочный</option>
    <option value="46">Изумрудный</option>
    <option value="47">Перламутровый</option>
    <option value="48">Серебристо-серый</option>
    <option value="49">Золотисто-желтый</option>
    <option value="50">Медный</option>
    <option value="51">Хаки</option>
    <option value="52">Лимонная</option>
    <option value="53">Ярко-желтый</option>
    <option value="54">Темно-красный</option>
    <option value="55">Хром</option>
    <option value="56">Темно-серый</option>
    <option value="57">Бесцветный</option>
    <option value="58">Васильковый</option>
    <option value="59">Охра</option>
    <option value="60">Многоцветный</option>
    <option value="61">Ярко-голубой</option>
    <option value="62">Кофе с молоком</option>
    <option value="63">Терракотовый</option>
    <option value="64">Темно-синий</option>
    <option value="65">Светло-желтый</option>
    <option value="66">Светло-коричневый</option>
    <option value="67">Графитовый</option>
    <option value="68">Дымчатый</option>
    <option value="69">Коричнево-красный</option>
    <option value="70">Персиковый</option>
    <option value="71">Красно-оранжевый</option>
    <option value="72">Зеркальный</option>
    <option value="73">Оливковый</option>
    <option value="74">Бронзовый</option>
    <option value="75">Бордовый</option>
    <option value="76">Малиновый</option>
    <option value="77">Серебристо-зеленый</option>
    <option value="78">Светло-бирюзовый</option>
    <option value="79">Желто-оранжевая</option>
    <option value="80">Бамбуковый</option>
    <option value="81">Какао</option>
    <option value="82">Серо-голубой</option>
    <option value="83">Оранжево-коричневый</option>
    <option value="84">Темно-коричневый</option>
    <option value="85">Серебристо-белый</option>
    <option value="86">Светло-дымчатый</option>
    <option value="87">Дубовый</option>
    <option value="88">Желто-зеленый</option>
    <option value="89">Ярко-красный</option>
    <option value="90">Абрикосовый</option>
    <option value="91">Медовый</option>
    <option value="92">Светло-синий</option>
    <option value="93">Золотисто-оранжевый</option>
    <option value="94">Коралловый</option>
    <option value="95">Желто-бежевый</option>
    <option value="96">Пепельный</option>
    <option value="97">Рубиновый</option>
    <option value="98">Фуксия</option>
    <option value="99">Бело-розовый</option>
    <option value="100">Темно-вишневый</option>
    <option value="101">Темно-молочный</option>
    <option value="102">Антрацитовый</option>
    <option value="103">Светло-розовый</option>
    <option value="104">Светло-коричнево-красный</option>
    <option value="105">Сливовый</option>
    <option value="130">Прозрачный</option>
     </select><div class="chosen-container chosen-container-multi" style="width: 209px;" title="" id="3_chosen"><ul class="chosen-choices"><li class="search-field"><input type="text" value="Выберите Цвет" class="default" autocomplete="off" style="width: 118px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div>
    </div>




 <div class="col-md-12">

 <div class="col-md-6">
 <input type="text" style="border:1px solid" class="form-control" placeholder=" Длина">
 </div>

 <div class="col-md-2">
   <select name="" class="form-control" data-placeholder="Выберите единицу" id="5">
    </select>
 </div>

 </div>

 



 <div class="col-md-12">

 <div class="col-md-6">
 <input type="text" style="border:1px solid" class="form-control" placeholder=" Высота">
 </div>

 <div class="col-md-2">
   <select name="" class="form-control" data-placeholder="Выберите единицу" id="7">
    </select>
 </div>

 </div>

 



    <div class="col-md-12">
     <input type="text" style="border:1px solid" class="form-control" placeholder=" Назначение">
      </div>


   </form>

ВОТ ПРИМЕР КОДА. И у меня есть кнопка сохранить которая не внутри формы, по нажатии которой данные должны передаваться по ajax.

<div id="save">Сохранить</div>

То что находил в гугле, не получалось. Применял Arrayserialize()

Answer 1

[khipster]

var formData = new FormData(form);
var request = new XMLHttpRequest();
request.open("POST", "index.php", true);
request.send(formData);

Comments

[Узаир Ижа]

а как понять, к какой форме? у меня просто там несколько форм.

[khipster]

Узаир Ижа: вместо form укажи свою форму как угодно селектором, через id, через name, через массив форм, как хочешь

[Узаир Ижа]

khipster: а можно этот код припоять к такому виду?

function save(){

   //var imglink = $('#imglink');
    var countimg =  $('#countIMG').html();
              var tagsArray = new Array();
$("#svois:checked").each(function(id) {
    tagsArray.push($(this).val());
 })

     $.ajax({
  type: "POST",
  url: "ajaxsave.php",
  data: "category="+$('#ok').val()+"&category1="+$('#ok2').val()+"&brend="+$('#brendid').val()+"&name="+$('#product').val()+"&opis="+$('#opis').val()+"&price="+$('#price').val()+"&img0="+$('#imglink0').html()+"&img1="+$('#imglink1').html()+"&img2="+$('#imglink2').html()+"&img3="+$('#imglink3').html()+"&img4="+$('#imglink4').html()+"&img5="+$('#imglink5').html()+"&img6="+$('#imglink6').html()+"&img7="+$('#imglink7').html()+"&img8="+$('#imglink8').html()+"&img9="+$('#imglink9').html()+"&svois="+tagsArray,
  success: function(html){
     $("#results").html(html);
  }
});
 


};

[khipster]

Узаир Ижа: https://bugs.jquery.com/ticket/9995

[Узаир Ижа]

khipster: не совсем понял

Answer 2

[Евгений Им]

Т.к. вы пользуетесь jQuery, то пример из документации может вам помочь https://api.jquery.com/serialize/

Answer 3

[Антон Щербаков]

$('html').on('click','#save,function() {

	var v = $('.chosen-select').find('option:selected').val();
	var t = $('.chosen-select').find('option:selected').text();

	$.ajax({
		type: 'POST',
		url: 'send_url.php',
		data: {v:v, t:t},
		cache: false,
		dataType: 'json',
		timeout: 15000,
		success: function(r) {
			console.log(r);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log(jqXHR, textStatus, errorThrown);
		}
	});

});

Answer 4

[Узаир Ижа]

я правильно понял, что только для двух форм? этот код
var v = $('.chosen-select').find('option:selected').val();
var t = $('.chosen-select').find('option:selected').text();

Comments

[Антон Щербаков]

В данном случае я описал только выбор цвета.
Если форма сложная, проще ее обработать через .serialize() и уже потом ее разбирать на сервере.
Если простая - то проще и быстрее перехватить нужные параметры и отправить их.

[Узаир Ижа]

Антон Щербаков: она сложная, просто там может генерироваться множества количества форм у которых разные id

[Антон Щербаков]

Узаир Ижа: Соберите форму правильно, обработайте ее .serialize(). А после разбирайте на сервере.

Answer 5

[Denis Popov]

я б сделал так. Всем элементам формы с которых нужно собрать значения присвоил бы класс, к примеру data, и атрибуты name прописал.
А далее

var data={};
$('.data').each(function(id,obj){
var $obj=$(obj);
data[$obj.attr('name')]=$obj.val();
});

в итоге имеем переменную data со всеми значениями в виде свойств объекта, а далее уже переводим в json и отсылаем

Comments

[Узаир Ижа]

Что значит перевести в json? я просто первоклашка в ajax/