Question: Form will not display results

Question

Form will not display results

Answers 1
Added at 2017-01-03 23:01
Tags
Question

Problem: The form works fine in chrome, firefox, safari and IE 9 to current version. However, in IE8, the form does not work.

By not work, what I mean is when you select a city in the drop down box and select enter, the page just refreshes. It applies to the other textbox/dropdown boxes on the form.

enter image description here

The following is the path to the page: http://www.regalmed.com/index.cfm/urgent-care-finder/

I have tried to copy and paste what I have done to the other pages and replace it by manually doing what I did on the form, but it continues to refresh the page.

Any help would be appreciated.

Update: The following is the form. The only thing I can think of is that the placeholder is being read at the beginning. Meaning, when the form loads, it considers the placeholder "Zip Code" and an error appears in the bottom. Not sure what is going on

    <!---<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.min.css" />
<![endif]-->

</head>

<body>--->  
<cfquery name="UCarecityFind" datasource="Data">
    SELECT Distinct officecity FROM UrgHosp
    where utilizedspecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">)
    and network not like (<cfqueryparam value="#'%name_list2%'#" list="true" cfsqltype="cf_sql_varchar">)
    and Company in (<cfqueryparam value="#name_list3#" list="true" cfsqltype="cf_sql_varchar">)  
    order by officecity
    </cfquery>

<div class="panel panel-default">
    <div class="panel-body">
        <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
        <div class="form-group">
            <input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
        </div>
        <div class="form-group">
            <SELECT name="proCity" class="form-control margin-bottom1" placeholder="City" ng-model="searchParam.City">
                <option disabled="disabled" selected="selected" value="">City</option> 
                <option value=""></option>
                <cfoutput query="UCarecityFind">
                <option value=#officecity#>#officecity#</option>
            </cfoutput>
            </select>
        </div>
        <hr />
        <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

        <div class="row">
        <div class="col-xs-7 no-right-padding">
        <div class="form-group">
        <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"><option selected="selected" value=" "></option><option >5</option><option>10</option><option>15</option><option>20</option></select>
        <div class="input-group-addon">miles</div>
        </div>
        </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
        <div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
        </div>
        </div>


        <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
        </form>
    </div>
</div>
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);

    function initialize() {
        (function($) {
            $('.call').css("text-decoration", "none");
            $('.call').css("color", "black");
            $('.call').css("cursor", "default");
        })(jQuery);
    }

$(document).ready(function(){
    $('#zip').on("change",function(){
        $('#city option[value=""]').prop('selected',true).trigger('input');
        /*console.log('input');*/
   });

    $('#city').on("change",function(){
       $('#zip').val('').trigger('input');
       /*console.log('change');*/
    });
});
</script>

<!---
</body>
</html>
--->
Answers to

Form will not display results

nr: #1 dodano: 2017-01-03 23:01

For IE8 you need a shim to be included,, please try that to see if that works..

https://github.com/fergaldoyle/angular.js-ie8-builds

take a look here also:

https://github.com/NantHealth/AngularJS-IE8-Shim

hth, k

Source Show
◀ Wstecz