Question

我正在开发一个连接到MySQL数据库的站点，并允许您显示/编辑其中的数据。该站点使用JavaScript和PHP，使用HTML和CSS部分（这些是使用JS添加的）。

该网站可以运行，做我想做的一切，但只能从PC上做。当我尝试从智能手机上使用它时，某些隐藏字段的值无法正确提交到负责使用它们的PHP页面。

首先，我有一些选择框：

var maxLvl;
var select = document.createElement( 'select' );
var trooplist = [archerLvl, giantLvl, wizardLvl, balloonLvl, dragonLvl]; //this array contains numbers, which will be used to set the starting option in the select
select.id = "select" + k + " " + i; //k and i are both variables in their respective for loop: k goes from 0 to 2, in it there's another with i.
select.onblur = function() {
    var selectid = this.id;
    var last = selectid.slice(-1);
    if(last==0){
        document.getElementById("hiddenArcherid").value = this.value;
        alert(document.getElementById("hiddenArcherid").name + " " + document.getElementById("hiddenArcherid").value);
    }else if(last==1){
        document.getElementById("hiddenGiant").value = this.value;
        alert(document.getElementById("hiddenGiant").name + " " + document.getElementById("hiddenGiant").value);
    }else if(last==2){
        document.getElementById("hiddenWizard").value = this.value;
        alert(document.getElementById("hiddenWizard").name + " " + document.getElementById("hiddenWizard").value);
    }else if(last==3){
        document.getElementById("hiddenBalloon").value = this.value;
        alert(document.getElementById("hiddenBalloon").name + " " + document.getElementById("hiddenBalloon").value);
    }else if(last==4){
        document.getElementById("hiddenDragon").value = this.value;
        alert(document.getElementById("hiddenDragon").name + " " + document.getElementById("hiddenDragon").value);
    }                               
};
select.style.position = "absolute";
select.style.left = 250 + (i*(width + (width/10))) +"px";
select.style.top = 110 + height + (rowcounter * (height * 1.5)) + "px";
select.style.width = width;
if(i==0 || i==1 || i==2 || i==3) 
    maxLvl = 6;
else 
    maxLvl=4;
for(var l=0; l <= maxLvl; l++){
    var option = document.createElement( 'option' );
    option.setAttribute("value", l);
    option.innerHTML = "Level " + l;
    select.appendChild(option);
}
select.selectedIndex = trooplist[i];
IDarray.push(select.id);
document.body.appendChild(select);

此代码在for循环中运行，并使用函数传递的数据创建5个选择框。然后，当用户选择新选项时，选项的值将存储在HTML隐藏输入字段中。像这样：

var hiddenArcher = document.createElement('input');
hiddenArcher.setAttribute("type","hidden");
hiddenArcher.name = "hiddenArcher";
hiddenArcher.id = "hiddenArcherid";
hiddenArcher.setAttribute("value", document.getElementById("select1 0").value);
formNew.appendChild(hiddenArcher);

这些输入字段具有基本值，这是选择框的默认值 - 如果用户创建新条目，则为0;如果用户想要修改现有条目，则为已知值。所有输入字段都具有相同的结构，只有JS var，名称，id和默认值更改。

输入字段是formNew表单的一部分，它有多个提交按钮 - 按下这些按钮会将字段的值发布到PHP页面，该页面执行MySQL查询，具体取决于按下的按钮。为此，我使用if/else if (isset)。然后PHP重定向（使用header("Location: http://my_sites_address"); exit();）到主页面 - 我选择框所在的页面。

如果我在Chrome上试用，该网站可以运行 - 正确的值传递，PHP正确执行正确的查询。我可以添加新条目，并删除或修改现有条目。当我在Android（通过模拟器）或iOS（通过我朋友的手机）上尝试时，虽然我可以选择我想要更改的值，并且警报也显示正确的数据，当我点击提交时，数据库中没有任何反应，好像我什么都没做。浏览器被重定向到PHP，所以我想提交确实发生了，但数据库中没有任何变化。 PHP只是重定向到主页面，而这就是全部。

唯一可以在手机上成功使用的功能是删除条目，很可能是因为负责存储行ID的隐藏字段在添加到（不同的）表单时获得它的值，并且值永远不会改变，只有当用户切换到不同的条目时。

隐藏字段“物理上”（基于它们在文件中的位置）的声明晚于选择框。

目前，代码在手机上采用这种方式： 1）我开始编辑条目。选择框出现。 2）我可以选择所需的值。 3）弹出警报，确认值已传递到隐藏字段。 4）我按下提交按钮，来到PHP，然后重定向，我回到我开始的地方。数据库没有变化。

我已尝试在选择框中将onchange切换为onblur;我确保启用了JS（这是完全没必要的，因为用JS显示的图像/文本）。现在我不知道出了什么问题。

你们中是否有人经历过类似的事情，或者知道我该怎么办？

Answer 1

某些浏览器无法在更改后立即正确完全识别隐藏输入值的程序更改。如果您在通过javascript更改隐藏输入值后直接提交表单，则为该输入发送的值将是更改前的值，而不是您在javascript中设置的值。

不幸的是，我没有显示此行为的浏览器列表，也不知道其背后的确切机制。我所知道的是，我遇到了你正在描述的问题，而且我总是能够通过在通过javascript更改其值后触发隐藏输入上的更改事件来解决它。

对于那些使用没有外部库的普通javascript的人，你的代码看起来像这样（see here）：

<input id="myHidden" name="myHidden" type="hidden" value="old value"/>
<script type="text/javascript">
    var hiddenInput = document.getElementById('myHidden');
    hiddenInput.value = 'new value';
    console.log(hiddenInput.value); // = 'new value'
// Submit the form now, and myHidden='old value' will be sent to the server

// Set up and trigger the change event on our input:
    var changeEvent = document.createEvent("UIEvents");
    changeEvent.initUIEvent("change", true, true);
    hiddenInput.dispatchEvent(changeEvent);
// Submit the form now, and myHidden='new value' will be sent to the server
</script>

对于那些使用jQuery或类似库的人来说，代码更简洁：

<input id="myHidden" name="myHidden" value="old value"/>
<script type="text/javascript">
    var $hiddenInput = $('#myHidden');
    $hiddenInput.val('new value');
    console.log($hiddenInput.val()); // = 'new value'
// Submit the form now, and myHidden='old value' will be sent to the server

// Trigger the change event on our input:
    $hiddenInput.change();
// Submit the form now, and myHidden='new value' will be sent to the server
</script>

使用jQuery真正简洁的例子（单线程）：

<input id="myHidden" name="myHidden" value="old value"/>
<script type="text/javascript">
    $('#myHidden').val('new value').change();
// Submit the form now, and myHidden='new value' will be sent to the server
</script>

这是working example使用原始问题中提供的稍微简化的代码版本。

Answer 2

在我们的案例中，问题很简单，就是我们在PHP中进行了以下检查：

if (isset($POST['myvalue']) && !empty($POST['myvalue'])) {
    // save
}

但是，在PHP 0中，PHP If Found <> "" & Found1 <> "" & Found2 <> "" & Found3 <> "" & Found4 <> "" & Found5 <> "" Then Range("C5").Interior.ColorIndex = 4 Else Range("C5").Interior.ColorIndex = 3 End If被认为是空的，这正是传递的值！

在Android / iOS浏览器上提交隐藏的字段数据不起作用

2 个答案: