我有一个带有单选按钮和列表框的表单。我试图在按下按钮时调用一个php文件,以将选定的选项保存到MySQL数据库中。我想传递选定的选项以及total_cost,这是一个JS变量。
当按下表单提交按钮时,如何将JS变量传递给php文件?
I try to remove whole list with function but its also not working.
<body>
<main>
<h1>Your Favourite Recipes</h1>
<p>These are your favourite recipes that we have saved for you.</p>
<button id="probam" type="button"
name="button" onclick="deleteListe()">brisi</button>
<p id="fav"></p>
<script>
let list = localStorage.getItem('favorites');
list = list ? list.split(',') : [];
var ll = [];
ll = list;
var output = document.createElement('ul');
output.setAttribute('id', 'list')
for (let i = 0; i < ll.length; i++) {
var it = document.createElement('li');
var bt = document.createElement('button');
bt.innerHTML = ('Delete');
bt.setAttribute('class', 'delete')
it.appendChild(document.createTextNode(ll[i]));
it.appendChild(bt);
output.appendChild(it);
}
document.getElementById('fav').appendChild(output);
var del = document.getElementsByClassName('delete');
for (let j = 0; j < del.length; j++) {
del[j].addEventListener('click', function() {
// console.log((del[j].parentNode).parentNode);
(del[j].parentNode).parentNode.removeChild(del[j].parentNode);
})
}
function deleteListe() {
localStorage.removeItem("favorites");
}
</script>
<button type="button" name="button"></button>
<a href="index.html" class='vido'>Home</a>
</main>
</body>
JS:
<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">
我不知道如何传递变量total_cost。任何建议将不胜感激。
答案 0 :(得分:1)
您将必须创建一个input元素,然后将该元素添加到表单中,然后提交表单。
var inputElement=document.createElement("input");
inputElement.setAttribute("value",total_cost);
var form= document.getElementById("formId");
form.appendChild(inputElement);
答案 1 :(得分:0)
使用它来保存您的更改,然后在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>
答案 2 :(得分:0)
否1:您已关闭总计<input id="total" type="text">
标签中的总计</form>
。
将其保留在</form>
标记内。
否2:输入字段<input id="total" type="text">
缺少名称属性。
它应该像<input id="total" type="text" name="total">
希望这会起作用