UZEIR
@UZEIR
Учусь. Пытаюсь развиваться.

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

<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()
  • Вопрос задан
  • 1597 просмотров
Пригласить эксперта
Ответы на вопрос 5
khipster
@khipster
var formData = new FormData(form);
var request = new XMLHttpRequest();
request.open("POST", "index.php", true);
request.send(formData);
Ответ написан
ImEugene
@ImEugene
Вёрстка+JavaScript
Т.к. вы пользуетесь jQuery, то пример из документации может вам помочь https://api.jquery.com/serialize/
Ответ написан
Комментировать
$('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);
		}
	});

});
Ответ написан
Комментировать
UZEIR
@UZEIR Автор вопроса
Учусь. Пытаюсь развиваться.
я правильно понял, что только для двух форм? этот код
var v = $('.chosen-select').find('option:selected').val();
var t = $('.chosen-select').find('option:selected').text();
Ответ написан
@DenisDangerous
я б сделал так. Всем элементам формы с которых нужно собрать значения присвоил бы класс, к примеру data, и атрибуты name прописал.
А далее
var data={};
$('.data').each(function(id,obj){
var $obj=$(obj);
data[$obj.attr('name')]=$obj.val();
});

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы