Как изменить значение value(тега input) внутри функции Ajax?

Question

[Mairou]

Дорогие Хабровчане, 3-ий час ломаю голову, и не только...

Краткий экскурс:

Пользователь вводит значение transaction_amount
Нажимает кнопку, и срабатывет onclick
Затем в функции после некоторой махинации с данных вызывается Ajax
Он отправляет сырые данные, а затем получает обработанные

А потом суть... Полученные данные должны присвоиться в input'ы
С данными все хорошо, но они тупо не присваиваются

Затем должна отправляться форма на сторонний сервер

Проект на Django

Буда крайне благодарен за любую помощь

<script>
          function DataProcessing(market_id) {
            var price = parseInt(document.getElementById('price_' + market_id).value);
            var transaction_amount = parseInt(document.getElementById('transaction_amount_' + market_id).value);
           
            if (isNaN(transaction_amount) || transaction_amount  < 1) {
              return;
            }
            else {

              var m_amount = transaction_amount * price;
              var url = "/market/processing_payment_data/";

              document.getElementById('m_amount_id_' + market_id).value = m_amount;
              document.getElementById('m_orderid_id_' + market_id).value = market_id;
              $.ajax({
                  url: url,
                  type: "POST",
                  data: {m_amount: m_amount, m_orderid: market_id,},
                  
                  beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
                  },
                  success: function(data) {
                   // ВОТ ЭТО НЕ РАБОТАЕТ
                    document.getElementById("m_shop_id_" + market_id).value = data.m_shop;
                    document.getElementById("m_curr_id_" + market_id).value = data.m_curr;
                    document.getElementById("m_desc_id_" + market_id).value = data.m_desc;
                    document.getElementById("m_sign_id_" + market_id).value = data.m_sign;

                  }
              });

          }

        }
</script>

{% for row  in market_table %}

        <form method="GET" action="https://payeer.com/merchant/">
         
          <input type="hidden" name="m_orderid" id ="m_orderid_id_{{row.0}}">
          <input type="hidden" name="m_amount" id ="m_amount_id_{{row.0}}" >

          <input type="hidden" name="m_shop" id ="m_shop_id_{{row.0}}">
          <input type="hidden" name="m_curr" id ="m_curr_id_{{row.0}}">
          <input type="hidden" name="m_desc" id ="m_desc_id_{{row.0}}">
          <input type="hidden" name="m_sign" id ="m_sign_id_{{row.0}}">

          {% csrf_token %}


          <input name="market_id"  type="hidden" value="{{ row.0 }}">
            <div class="card_product">
              <div class="card_product_up">
                <div class="card_product_up_left">
                  <div class="card_product_img">
                  </div>
                </div>
                <div class="card_product_up_right">
                  <div class="card_product_name">
                    {{row.2}}
                  </div>
                  <div class="card_product_info_block">
                    <div class="card_product_info"><a href="/products/{{ row.3 }}/">INFO</a></div>
                  </div>
                </div>
              </div>
              <div class="card_product_down">
                <div class="card_product_down_left">
                  <div class="card_product_Trader_name">
                    Trader Name: {{row.2}}
                  </div>
                  <div class="card_product_Trader_id">
                    <input name="trader_id"  type="hidden" value="{{ row.1 }}">
                    Trader ID: {{row.1}}
                  </div>
                </div>
                <div class="card_product_down_right">
                  <div class="amount_price_block">
                  <div class="card_product_amount">
                    <input name="market_amount"  type="hidden" value="{{ row.4 }}">
                    Amount: {{row.4}}
                  </div>
                  <div class="card_product_price">
                    <input name="price" id ="price_{{row.0}}" type="hidden" value="{{ row.5 }}">
                    Price: {{row.5}}
                  </div>
                </div>
                  <div class="transaction_block">
                  <div class="card_transaction">
                    <input type="number" min="1" required id ="transaction_amount_{{row.0}}" onkeydown="if (event.keyCode == 69 || event.keyCode == 189 || event.keyCode == 187 || event.keyCode == 190 || event.keyCode ==  188 || event.keyCode ==  109 || event.keyCode ==  107 ) return false"  placeholder="Enter amount" max="{{row.4}}" name="transaction_amount">
                    <input name="product_id"  type="hidden" value="{{ row.3 }}">
                    <button type="submit" value="{{ row.0 }}" onclick="DataProcessing(this.value)">BUY</button>
                  </div>
                </div>
                </div>
              </div>
            </div>
        </form>

        {% endfor %}

Answer 1

[Mairou]

Вот решение:

<code lang="javascript">
        <script>
          function DataProcessing(market_id) {
            var price = parseInt(document.getElementById('price_' + market_id).value);
            var transaction_amount = parseInt(document.getElementById('transaction_amount_' + market_id).value);
           
            if (isNaN(transaction_amount) || transaction_amount  < 1) {
              return;
            }
            else {

              var m_amount = transaction_amount * price;
              var url = "/market/processing_payment_data/";

              document.getElementById('m_amount_id_' + market_id).value = m_amount;
              document.getElementById('m_orderid_id_' + market_id).value = market_id;
              
              $.ajax({
                  url: url,
                  type: "POST",
                  data: {m_amount: m_amount, m_orderid: market_id},
                  beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
                  },
                  success: function(data) {
                    document.getElementById("m_shop_id_" + market_id).value = data.m_shop;
                    document.getElementById("m_curr_id_" + market_id).value = data.m_curr;
                    document.getElementById("m_desc_id_" + market_id).value = data.m_desc;
                    document.getElementById("m_sign_id_" + market_id).value = data.m_sign;                   
                    document.getElementsByName('form_' + market_id)[0].submit()
                  }
              })
          }
        }
        </script>
        {% for row  in market_table %}
        <form name="form_{{row.0}}" method="POST" action="https://payeer.com/merchant/">

          <!-- ЗНАЧЕНИЯ ПЕРЕМЕННЫХ, КОТОРЫЕ Я ПОЛУЧАЮ С ЭТОЙ СТРАНИЦЫ C ПОМОЩЬЮ JS-->

          <input type="hidden" name="m_orderid" id ="m_orderid_id_{{row.0}}">
          <input type="hidden" name="m_amount" id ="m_amount_id_{{row.0}}" >

          <input type="hidden" name="m_shop" id ="m_shop_id_{{row.0}}">
          <input type="hidden" name="m_curr" id ="m_curr_id_{{row.0}}">
          <input type="hidden" name="m_desc" id ="m_desc_id_{{row.0}}">
          <input type="hidden" name="m_sign" id ="m_sign_id_{{row.0}}">
          {% csrf_token %}


          <input name="market_id"  type="hidden" value="{{ row.0 }}">
            <div class="card_product">
              <div class="card_product_up">
                <div class="card_product_up_left">
                  <div class="card_product_img">
                  </div>
                </div>
                <div class="card_product_up_right">
                  <div class="card_product_name">
                    {{row.2}}
                  </div>
                  <div class="card_product_info_block">
                    <div class="card_product_info"><a href="/products/{{ row.3 }}/">INFO</a></div>
                  </div>
                </div>
              </div>
              <div class="card_product_down">
                <div class="card_product_down_left">
                  <div class="card_product_Trader_name">
                    Trader Name: {{row.2}}
                  </div>
                  <div class="card_product_Trader_id">
                    <input name="trader_id"  type="hidden" value="{{ row.1 }}">
                    Trader ID: {{row.1}}
                  </div>
                </div>
                <div class="card_product_down_right">
                  <div class="amount_price_block">
                  <div class="card_product_amount">
                    <input name="market_amount"  type="hidden" value="{{ row.4 }}">
                    Amount: {{row.4}}
                  </div>
                  <div class="card_product_price">
                    <input name="price" id ="price_{{row.0}}" type="hidden" value="{{ row.5 }}">
                    Price: {{row.5}}
                  </div>
                </div>
                  <div class="transaction_block">
                  <div class="card_transaction">
                    <input type="number" min="1" required id ="transaction_amount_{{row.0}}" onkeydown="if (event.keyCode == 69 || event.keyCode == 189 || event.keyCode == 187 || event.keyCode == 190 || event.keyCode ==  188 || event.keyCode ==  109 || event.keyCode ==  107 ) return false"  placeholder="Enter amount" max="{{row.4}}" name="transaction_amount">
                    <input name="product_id"  type="hidden" value="{{ row.3 }}">
                    <button type="button" value="{{ row.0 }}" onclick="DataProcessing(this.value)">BUY</button>
                  </div>
                </div>
                </div>
              </div>
            </div>
        </form>



        {% endfor %}        

</code>

Answer 2

[Sand]

success: function(data) {
                   alert("А ЭТО ПОКАЖЕТ? " + data.m_shop + ' ' + data.m_curr + ' ' +  data.m_desc + ' ' + data.m_sign);
                   // ВОТ ЭТО НЕ РАБОТАЕТ
                    document.getElementById("m_shop_id_" + market_id).value = data.m_shop;
                    document.getElementById("m_curr_id_" + market_id).value = data.m_curr;
                    document.getElementById("m_desc_id_" + market_id).value = data.m_desc;
                    document.getElementById("m_sign_id_" + market_id).value = data.m_sign;

                 }

Comments

[Mairou]

Да, данные показываются. Но присвоить я их не могу. В этом и проблема

[Sand]

alert(document.getElementById("m_shop_id_" + market_id).value);

Что показывает DEBUG в каком-нибудь firefox-е или chrome-е?

[Mairou]

sand3001, Пустоту

[Sand]

Mairou, DEBUG показывает пустоту, или

alert(document.getElementById("m_shop_id_" + market_id).value);

?

[Mairou]

sand3001, нет, выскакивкет окно и в нем пустота, в консоли ошибок нет

[Sand]

Mairou, Едем дальше
alert("m_shop_id_" + market_id);

[Mairou]

sand3001 А стоп, если вызвать alert в success то пустота, а если вне, то верное значение

[Mairou]

sand3001 Но форма все равно отправляется пустая
Вернее значения формы, которые мы определяли в success пустые

[Sand]

success: function(data) {
                   alert("А ЭТО ПОКАЖЕТ? " + data.m_shop + ' ' + data.m_curr + ' ' +  data.m_desc + ' ' + data.m_sign);
}

Этот алерт пустой вылезает, без текста "А ЭТО ПОКАЖЕТ? " ?

[Mairou]

sand3001, он пустой если его вызвать вне success

[Sand]

Mairou, эмм, все приведённые мною выше алерты должны были быть написанны внутри success)

[Mairou]

sand3001, виноват) . Форма по-прежнему отправляется не полностью заполненная

[Sand]

Mairou, На скриншоте видно: в строке адреса у m_shop пустое значение, у m_curr - тоже пустое, у всех остальных надо полагать тоже, не пустые вот эти:
data: {m_amount: m_amount, m_orderid: market_id,}
Вопрос: какой должен быть запрос к backend-у, и какой он должен быть ответ?

[Mairou]

sand3001, Прикол в том что по задумке m_curr должен быть пустым)
А вот m_shop и остальные нет

[Sand]

Mairou,

$.ajax({
                  url: url,
                  type: "POST",
                  data: {m_amount: m_amount, m_orderid: market_id,},
                  
                  beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
                  },
                  success: function(data) {
                   // ВОТ ЭТО НЕ РАБОТАЕТ
                    document.getElementById("m_shop_id_" + market_id).value = data.m_shop;
                    document.getElementById("m_curr_id_" + market_id).value = data.m_curr;
                    document.getElementById("m_desc_id_" + market_id).value = data.m_desc;
                    document.getElementById("m_sign_id_" + market_id).value = data.m_sign;

                  }
              });

Ваш запрос к бэкенду строится из data: {m_amount: m_amount, m_orderid: market_id,},, правильно?
А где Вы добавляете информацию про m_shop остальные?

[Mairou]

sand3001, ajax делает запрос на мое api где обрабатывается информация, затем ajax получает готовые данные.

[Sand]

Mairou, поправьте меня, если я ошибаюсь,
Ваша api находится тут: "/market/processing_payment_data/"
Запрос к Вашему api имеет вид: "m_amount=11&m_orderid=6" (числа из скриншота)
Метод передачи POST.
Возвращаемые данные можно посмотреть добавив в success

success: function(data) {
                         alert(data);
                 }

Всё так?

[Mairou]

sand3001, Да все верно

[Sand]

И что показывает

success: function(data) {
                         alert(data);
                 }

?

[Sand]

И что показывает

success: function(data) {
                         alert("m_shop_id_" + market_id);
                 }

?

[Mairou]

В первом случае [object Object]
Во втором m_shop_id_3

[Sand]

Mairou,
В общем, проверьте сработает ли:

success: function(data) {
                    document.getElementById("m_shop_id_" + market_id).value = 1;
                    document.getElementById("m_curr_id_" + market_id).value = 2;
                    document.getElementById("m_desc_id_" + market_id).value = 3;
                    document.getElementById("m_sign_id_" + market_id).value = 4;

                  }

Если да, то изучите объект "data", определите какие он возвращает значения и как их извлечь.
Если нет, то убедитесь в том что селекторы типа "document.getElementById("m_shop_id_" + market_id).value" находят нужные элементы. Кроме того, в каком месте Вы смотрите результат, если у input-ов стоит type="hidden"? В исходном коде сгенерированной страницы?

[Mairou]

Сергей Андреев, Когда я выполняю эту команду:

console.log(document.getElementsByName('form_' + market_id)[0])

То все значение верны, но форма все равно отправляется не полностью заполненная
Неужели я настолько слеп

[Mairou]

Сергей Андреев, Ах да я модифицировал код, добавив атрибут name в форму
У каждой формы теперь уникальное имя