草庐IT

javascript - 在表单中动态显示数据

coder 2024-04-22 原文

此表单可帮助用户向数据库输入少量值。我想检查一下,当用户输入一个号码时,应该显示所有与该电话号码对应的地址。 但这应该在提交按钮之前发生。

<?
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {
        /*
        *
        *
        code to insert database
        *
        *
        */
    }
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    /*
    *
    other inputs
    *
    */
    <input type="text" name="phoneno" value=""  />
    <button class="button btn btn-primary btn-large" type="submit" name="submit" value="submit" >Submit</button>
</form>

初始表单的示例 View 将是

输入phoneno后的表单示例

输入所有值并选择地址后,我想提交表格。谁能告诉我怎么做

最佳答案

使用 jquery 和 ajax 调用,您可以实现这样的结果。

表格...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/js/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
  $("#phone").keyup(function() {  
        var number = $("#phone").val();
        $.ajax({
            url: "/processes/process-data.php",
            type: 'POST',
            data: 'number='+number,
            cache: false,
    }).done(function( html ) { 
            $('#results').html(html);
        });
  });
});
</script>
</head>
<body>
<form>
<table width="400" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td>Phone #:</td>
    <td><input type="text" name="phone" id="phone"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><div id="results"></div></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input name="submit" type="submit" value="Submit"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

进程数据.php

<?php
require ('conn.php');

try {
    $val = $_POST['number'].'%';
    $sql="SELECT * FROM phones WHERE phonenumber LIKE :val";
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':val', $val, PDO::PARAM_STR);
    $stmt->execute();
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $totalRows = $stmt->rowCount();
} catch (PDOException $e) {
    die("Could not update the table: " . $e->getMessage());
}
?>

<?php do { ?>
<label><input type="radio" name="phoneno" value="<?php echo $row['phonenumber'] ?>"><?php echo $row['firstname'] ?> <?php echo $row['lastname'] ?> - <?php echo $row['phonenumber'] ?></label><br>
<?php } while ($row = $stmt->fetch(PDO::FETCH_ASSOC)); ?>

我用来测试上面代码的数据库

CREATE TABLE IF NOT EXISTS `phones` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(20) NOT NULL,
  `phonenumber` varchar(20) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

INSERT INTO `phones` (`ID`, `firstname`, `lastname`, `phonenumber`) VALUES
(1, 'Name', '1', '9158591915'),
(2, 'Name', '2', '9158591916'),
(3, 'Name', '3', '9158591920'),
(4, 'Name', '4', '9158591836'),
(5, 'Name', '5', '9158592274'),
(6, 'Name', '6', '9158577188'),
(7, 'Name', '7', '9158572468'),
(8, 'Name', '8', '9158635700'),
(9, 'Name', '9', '9159517539'),
(10, 'Name', '10', '9168745291'),
(11, 'Name', '11', '9226543210');

使用上面的代码,当您开始输入“9”时,您会看到所有结果...“91”下降到 10...“915”下降到 9...“9158”下降到 8。 .. "91585"下降到 7 个结果...等等

关于javascript - 在表单中动态显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32559569/

有关javascript - 在表单中动态显示数据的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  4. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接,但它没有显示,也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线,我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  5. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  6. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  7. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  8. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  9. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  10. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

随机推荐