【问题标题】:Form will not display results表格不会显示结果
【发布时间】:2017-01-03 22:11:49
【问题描述】:

问题:该表单在当前版本的 chrome、firefox、safari 和 IE 9 中运行良好。但是,在 IE8 中,该表单不起作用。

不工作,我的意思是当你在下拉框中选择一个城市并选择回车时,页面就会刷新。它适用于表单上的其他文本框/下拉框。

以下是页面路径:http://www.regalmed.com/index.cfm/urgent-care-finder/

我尝试将我所做的复制并粘贴到其他页面并通过手动执行我在表单上所做的替换它,但它继续刷新页面。

任何帮助将不胜感激。

更新:以下是表格。我唯一能想到的是,占位符是在开始时被读取的。这意味着,当表单加载时,它会考虑占位符“邮政编码”,并且底部会出现错误。不知道怎么回事

    <!---<!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>
--->

【问题讨论】:

  • 我的观察是,如果焦点位于下拉列表中,并且您按下回车键,则不会发生任何事情。使用文本框、复选框等,按 Enter 提交表单。我会将其解释为默认浏览器行为。你想实现一些不同的东西吗?如果是这样,你想达到什么目标?你是如何做到的?
  • @DanBracuk 例如,当用户进入一个城市时,它将获取该城市或周边城市内的紧急护理列表。但是,它反而会出现页面底部的错误。
  • 我已经在 IE8 中测试了你的表单,我得到了浏览器左下角未定义 angular 的错误,是你的结果相同还是你有其他错误@RobertoFlores
  • @oserk 我已经解决了这个问题。我能够创建一个处理未定义字符的脚本。谢谢您,您的帮助帮助我达成了解决方案
  • 太棒了@RobertoFlores,如果你这样填写,请将答案标记为解决方案:)

标签: javascript html coldfusion


【解决方案1】:

对于 IE8,您需要包含一个 shim,请尝试一下,看看是否有效..

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

也请看这里:

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

hth, k

【讨论】:

  • @oserk:我尝试过这种方法,但它不起作用。我相信它与占位符有关,即下拉列表和文本框中的文本等等
猜你喜欢
  • 2023-04-01
  • 2016-01-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-31
  • 2021-04-26
  • 2021-08-14
  • 2023-03-11
相关资源
最近更新 更多