javascript - 如何将 HTML 隐藏表单字段提交到 iPad iOS Safari 和/或 Chrome？

Question

我有一个简单的表单应用程序，可以很好地与完整的操作系统/浏览器配合使用，但是当我使用 iPad 提交表单数据时，没有 <input type='hidden'>字段数据显示在结果页面上。所有其他数据加载正确。我正在使用模板工具包使用表单参数填充结果页面。

HTML 片段:

<input id='patientCity' name='patientCity' type='hidden'>
<input id='patientState' name='patientState' type='hidden'>
<label for='zip'>Zip Code</label>
<input name='patientZip' id='patientZip' placeholder='Zip Code' type='text' class='mediumInput' required>

Javascript 片段($zip 作为“病人”传入):

function loadCityStates($zip) {
     var $actualZip = ($zip + "Zip");
     var $city = ($zip + "City");
     var $state = ($zip + "State");
     document.getElementById($actualZip).onchange = function() {
          populateCityState(document.getElementById($actualZip).value);
          document.getElementById($city).value = $cityState[0];
          document.getElementById($state).value = $cityState[1];
     }
}

TT HTML 片段:

<span class="item">Address: </span><span class="info"> [% params.patientStreet %]; [% params.patientCity %], [% params.patientState %] [% params.patientZip %] </span>

谢谢!

Answer 1

我认为你的第一个错误是你没有使用 JS 框架，所以事件附加可能不会像 @klugerama 所说的那样发生。我根据我认为您在这里尝试做的事情提供了一个 JSFiddle，http://jsfiddle.net/nickyt/wKPdv/

这是来自 fiddle 的 JS:

// using jQuery as you really should be using a JS framework, but if not you could attach events using pure JS, but then you need to manage attaching events for all browsers.

var patientZipContext = $("#patientZip");
var patientCityContext = $("#patientCity");
var patientStateContext = $("#patientState");
var showHiddenContext = $("#showHidden");


console.log(patientZipContext)
console.log(patientCityContext)
console.log(patientStateContext)

function populateCityState(zipCode) {
    // Whatever your code does. Returning dummy code for now.
    return ["someCity", "someState"];
}

showHiddenContext.on("click", function() {
    $("input[type='hidden']").each(function() {
        this.setAttribute("type", "text");
    })
});

patientZipContext.on("change", function() {
    var cityState;

    console.log("onchange fired");
    cityState = populateCityState(this.value);

    // code to handle empty or incomplete array goes here

    patientCityContext.val(cityState[0]);
    patientStateContext.val(cityState[1]);
});