Как изменить атрибут value в полях с помощью jQuery и отправить?

Question

[Yeldos Adetbekov]

Доброго времени суток. Хотел организовать автокомплит самостоятельно. Так как хотел кастомности. Так вот ввожу в input имя и выполняется ajax запрос на сервер. Если найдено несколько пользователей то вывести список а если такой пользователь единственный то вписать в этот input(Отображаемый текст) Имя + Фамилия, а в value которое будет отправляться на сервер(форма) должен лежать id или username пользователя(идентификатор). В общем это должен быть усложненный input у которого 2 значения:
1) Отображаемый текст
2) Само значение.
Это примерно как:

<select><option value="ID">DISPLAYEDVALUE</option></select>

Я так понял что jquery не удается поменять сам DOM(он лишь может визуально поменять значения, но на сервер посылать не может)
Вот код:

<div class="form-group row">
        <label for="inputResponse" class="col-sm-2 col-form-label">Ответственный</label>
        <div class="col-sm-10">
                <fieldset class="fieldResponse">
                        <input name="response" type="text" class="form-control" id="inputResponse" placeholder="Ответственный" value="1" autocomplete="off">
                        <ul id="response_results" class="list-unstyled"></ul>
                </fieldset>
        </div>
</div>

$('#inputResponse').on("input",function(e){
			$.ajax({
				type: "get",
				url: "{% url 'response_ajax' %}",
				data:{'response': $(e.target).val()},
				// dataType: "json",
				success: function(content){
					$('#response_results').html(content.content);
					if(content.content.exact){
						$(".fieldResponse").prop("disabled",true);
						$("#inputResponse").val(content.content.exact);
						// $("#inputResponse:text").val(content.content.full_name);
						$("#inputResponse").attr("value",content.content.exact);
						//$("#inputResponse").val(1);
						$('#response_results').html("<a href='#' class='clear_response'>стереть</a>");
						$(".clear_response").click(function(){
							$(".fieldResponse").prop("disabled",false);
							$("#inputResponse").val("");
							$("#inputResponse").attr("value","");
							$('#response_results').html("");
						});
					}
				},
			});
		});

Спасибо

Answer 1

[Александр Х]

ну почему же "не удается поменять сам DOM"? jQuery обычно только этим и занимается :)
а на сервер он может их послать одним из вариантов
- либо дополнительным ajax-вызовом (на сервере тогда нужен обработчик, который будет принимать переданные данные и сохранять их куда-то)
- либо надо завернуть select в форму (...) с соответствующими свойствами, и добавить ей (форме) кнопку "отправить" (). опять же, на сервере кто-то должен данные принимать и складывать куда надо.

но вот с тем, чтобы принудительно распахнуть селект из скрипта - тут не всегда все хорошо ( stackoverflow.com/questions/10453393/how-to-open-t... ), и поэтому проще использовать какой-нибудь jQuery.autocomplete, чем воевать с ветрянными мельницами -)

Comments

[Yeldos Adetbekov]

Спасибо, Александр. Проблема оказывается была в том что я добавлял инпуту disabled. И он не посылался на сервер. Это раз. Два то что оказывается у input может быть только одно значение(то что написано). И пришлось сделать по хитрому. Создал дополнительно поле только с дизаблед и скрыл его изначально далее при эйджакс скрывал первое поле с value которое будет отправляться на сервер путем добавления "readonly". А disabled просто отображал. Вот так хитро получилось))) Спасибо что убедили что jquery работает с DOM)