Сохранить форму опции и передать переменную JS

У меня есть форма с радиокнопками и списками. Я пытаюсь вызвать файл php при нажатии кнопки, чтобы сохранить выбранные параметры в базе данных MySQL. Я хотел бы передать выбранные параметры, а также total_cost, который является переменной JS.

Как я могу передать переменную JS в файл php при нажатии кнопки отправки формы?

<form action = "saveConfig.php" class = "hide-submit" method = "post">

<div class = "btn-configure step2button">
<span class = "pcButtonText">
Save
</span>                                               
</div>


<ul id = "radio" class = "input-list">
  <li>
    <input id = "item-1" name = "config-prod" value = "1.00" type = "radio" onchange = "updateTotal();">
    <label for = "item-1">Item 1 [£1.00]</label>
  </li>
  <li>
    <input id = "item-2" name = "config-prod" value = "12.34" type = "radio" onchange = "updateTotal();">
    <label for = "item-2">Item 2 [£12.34]</label>
  </li>
  <li>
    <input id = "item-3" name = "config-prod" value = "9.99" type = "radio" onchange = "updateTotal();">
    <label for = "item-3">Item 3 [£9.99]</label>
  </li>
</ul>

<select id = "plist" name = "partlist" onchange = "updateTotal();">
  <option value = "99.99">CPU 1</option>
  <option value = "123.00">CPU 2</option>
  <option value = "250.54">CPU 3</option>
</select>



</form>
<br>
Total: <input id = "total" type = "text">

JS:

let buildcost = 25.00;

function updateTotal() {
  let radios = document.getElementsByName('config-prod');
  let select = document.getElementById('plist');
  let partcost = 0;

  for (let i = 0, j = radios.length; i < j; i++) {
    if (radios[i].checked) {
      partcost = parseFloat(radios[i].value);
      break;
    }
  }

  partcost += parseFloat(select.options[select.selectedIndex].value);

  let total_cost = buildcost + partcost;
  document.getElementById('total').value = total_cost.toFixed(2);
}

Я не могу понять, как передать переменную total_cost. Любой совет будет принят во внимание.

Вы должны использовать технологию Ajax для сохранения формы с помощью JS. Узнать больше.

— 30.05.2019 10:05

javascript php html

30.05.2019 09:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

вам нужно будет создать элемент ввода, затем добавить этот элемент в форму, а затем отправить форму.

var inputElement=document.createElement("input");
inputElement.setAttribute("value",total_cost);

var form= document.getElementById("formId");
form.appendChild(inputElement);

30.05.2019 09:51

Ответ принят как подходящий

Используйте это, чтобы сохранить ваши изменения, затем в saveConfig.php получите ваши данные с помощью json_decode($_POST)

<form action = "#" class = "hide-submit">
<div class = "btn-configure step2button">
<span class = "pcButtonText">
Save
</span>                                               
</div>

<ul id = "radio" class = "input-list">
  <li>
    <input id = "item-1" name = "config-prod" value = "1.00" type = "radio" onchange = "updateTotal();">
    <label for = "item-1">Item 1 [£1.00]</label>
  </li>
  <li>
    <input id = "item-2" name = "config-prod" value = "12.34" type = "radio" onchange = "updateTotal();">
    <label for = "item-2">Item 2 [£12.34]</label>
  </li>
  <li>
    <input id = "item-3" name = "config-prod" value = "9.99" type = "radio" onchange = "updateTotal();">
    <label for = "item-3">Item 3 [£9.99]</label>
  </li>
</ul>

<select id = "plist" name = "partlist" onchange = "save();">
  <option value = "99.99">CPU 1</option>
  <option value = "123.00">CPU 2</option>
  <option value = "250.54">CPU 3</option>
</select>
</form>
<br>
Total: <input id = "total" type = "text">

<script>
function save(){
    $.ajax({
        url : 'saveConfig.php',
        type: "POST",
        data: $('#form').serialize(),
        dataType: "JSON",
        success: function(data)
        {
            alert('saved');            
        },
        error: function (jqXHR, textStatus, errorThrown){
            alert(errorThrown);
        }
    });
}
</script>

30.05.2019 10:14

№ 1: вы убрали Total: <input id = "total" type = "text"> из закрывающего </form> тега. держите его внутри тега </form>.

No2: В поле ввода <input id = "total" type = "text"> отсутствует атрибут имени. должно быть так <input id = "total" type = "text" name = "total">

Надеюсь, это сработает

30.05.2019 10:47