如何向iPad iOS Safari和/或Chrome提交HTML隐藏表单域？

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片段（$拉链被传递作为 '病人'）：

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/

这里的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]); 
});