保存选项表格并传递JS变量

Question

I have a form that has radiobuttons and listboxes. I am trying to call a php file on button press to save the selected options into a MySQL database. I would like to pass the selected options as well as the total_cost, which is a JS variable.

How can I pass the JS variable to the php file when the form submit button is pressed?

<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);
}

I cannot figure out how to pass the variable total_cost. Any advice would be appreciated.

Answer 1

you will have to create an input element then append that element to the form and then submit the form.

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

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

Answer 2

Use this to save your changes, then in saveConfig.php recive your data with 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>

Answer 3

No 1 : you have kept Total: <input id="total" type="text"> out from closing </form> tag. keep it inside the </form> tag.

No2 : Input field <input id="total" type="text"> is missing name attribute. it should be like <input id="total" type="text" name="total">

Hope this will work