How do I submit HTML hidden form fields to iPad iOS Safari and/or Chrome?

Question

I have a simple form-app that works great with full operating systems/browsers, but when I submit the form data using an iPad, none of the <input type='hidden'> fields data show up on the results page. All the other data loads correctly. I am using Template Toolkit to populate the results page with the form parameters.

HTML snippet:

<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 snippet ($zip is passed in as 'patient'):

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 snippet:

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

Thanks!

Answer 1

I think your first mistake is your not using a JS framework, so the event attaching is probably not happening like @klugerama stated. I've provided a JSFiddle based on what I think you're trying to do here, http://jsfiddle.net/nickyt/wKPdv/

Here's the JS from that fiddle:

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