Как получить значение с переменной id в jquery?

Question

function addDictToCookie(id) {
    var name = $("#" + id + "input[id = material_name]").val();
    var unit = $("#" + id + "select[id = material_unit] :selected").text();
    var count = $("#" + id + "input[id = material_count]").val();
    var dict = { "name": name, "unit": unit, "count": count }
    Cookies.set('new', dict, { expires: 0.001 })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="GET" id="{{material.Id}}">
    <div class="col-sm-5 topbox_insidebox_insideblocks">
        <input type="text" name=Material value="{{material.Id}}" class="in" readonly id="material_name">
    </div>
    <div class="col-sm-2 topbox_insidebox_insideblocks">
        <select id="material_unit">
            <option value="{{material.Volume}}">m^3</option>
        </select>
    </div>
    <div class="col-sm-5 topbox_insidebox_insideblocks">
        <input type="text" name=Value value="{{material.Volume}}" class="in" readonly id="material_count">
    </div>
    <button type="submit" class="btn btn-white topbox_button" id="addToCart" onclick="addDictToCookie('{{material.Id}}')"> Add</button>
</form>

Я использую переменную django для тега <form>. Теперь я хочу получить значение ввода, но определил var эта функция null.

Как решить эту проблему?

Answer 1

Очень маленькая ошибка в вышеприведенном коде - применить пробел после объединения ID

Неверный код:

$("#" + id + "input[id = material_name]").val();

Правильный код:

$("#" + id + " input[id = material_name]").val();

Пример: Идентификатор формы: myForm

Если вы не примените пробел, jQuery попытается

Неверный код:

$("#myForminput[id = material_name]").val();

В приведенном выше примере идентификатор myForminput недоступен в html, поэтому он всегда будет возвращать undefined

Правильный код:

$("#myForm input[id = material_name]").val();

В приведенном ниже примере я просто удаляю код django, чтобы вы могли получить ясное представление:

function addDictToCookie(id) {
    var name = $("#" + id + " input[id = material_name]").val();
    var unit = $("#" + id + " select[id = material_unit] :selected").text();
    var count = $("#" + id + " input[id = material_count]").val();
    var dict = { "name": name, "unit": unit, "count": count }
    
	console.log(dict)	
  
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
    <div class="col-sm-5 topbox_insidebox_insideblocks">
        <input type="text" name=Material value="Something" class="in" readonly id="material_name">
    </div>
    <div class="col-sm-2 topbox_insidebox_insideblocks">
        <select id="material_unit">
            <option value="Some Value">Some Value</option>
        </select>
    </div>
    <div class="col-sm-5 topbox_insidebox_insideblocks">
        <input type="text" name=Value value="123" class="in" readonly id="material_count">
    </div>
    <button type="submit" class="btn btn-white topbox_button" id="addToCart" onclick="return addDictToCookie('myForm')"> Add</button>
</form>