个人中心
gpt4 book ai didi

javascript - 获取文本字段中的选择值以及更改时的值

转载 作者：行者123 更新时间：2023-11-29 21:14:27 25 4
gpt4 key购买 nike

我刚刚学习 Mysql/PHP，我正在尝试根据从下拉列表中选择的值来更新文本字段。我已经阅读了几个教程，并尝试应用它们，但我无法让它工作......

不要介意我乱七八糟的代码，稍后会清理!!!

带有下拉列表和文本字段的页面:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
if (isset($_SESSION['logged_in'])) {
    include("/includes/connect.php");
    $sql="SELECT id, nr, model, serienummer, capaciteit, persoon, opmerking, datumuitgeleend, datumretour FROM ipads WHERE uitgeleend='Ja' ORDER BY nr";
    $stmt = $db->prepare($sql);
    $stmt->execute();
    $result = $stmt->fetchAll();

    if(isset($_POST['btnAdd'])) {
        $id=$_REQUEST['id'];
        $persoon=$_POST['persoon'];
        $datumuitgeleend=$_POST['datumuitgeleend'];
        $datumretour=$_POST['datumretour'];
        $opmerking=$_POST['opmerking'];
        $sql="UPDATE ipads SET uitgeleend='Ja', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
        $result=$db->query($sql);
        header("location:index.php");

    }
    include("/includes/get_header.php");
?>

            <h1 class="page-title">iPad uitlenen</h1>
                    <ul class="breadcrumb">
            <li><a href="index.php">Home</a> </li>
            <li class="active">Nieuw</li>
        </ul>
        </div>

<form id="gegevensForm" class="col-xs-4" form method="POST" action="ipad-uitlenen.php">
    <div class="form-group">
    <label>Selecteer leen iPad</label>
    <select name="id" class="form-control">
		<option value="">Selecteer een leen iPad</option>
    <?php foreach($result as $row): ?>
        <option data-datumuitgeleend="<?= $row['datumuitgeleend']; ?>" data-datumretour ="<?= $row['datumretour']; ?>" data-opmerking="<?= $row['opmerking']; ?>" data-persoon="<?= $row['persoon']; ?>" value="<?= $row['id']; ?>"><?= $row['nr']; ?> / <?= $row['serienummer']; ?> / <?= $row['model']; ?> / <?= $row['capaciteit']; ?></option>
    <?php endforeach; ?>
    </select>
    </div>

    <div class="form-group">
        <label>Naam</label>
        <input type="text" class="form-control" name="persoon" value="" />
    </div>

    <div class="form-group">
        <label>Datum uitgeleend</label>
        <input type="text" id="datepicker" class="form-control" name="datumuitgeleend" value="" />
    </div>

    <div class="form-group">
        <label>Datum retour</label>
        <input type="text" id="datepicker1" class="form-control" name="datumretour" value="" />
    </div>

    <div class="form-group">
        <label for="comment">Opmerking</label>
        <textarea class="form-control" rows="5" id="comment" name="opmerking" value=""></textarea>
    </div>

    <button class="btn btn-primary pull-right" name="btnAdd" type="submit"><i class="fa fa-save"></i> Opslaan</button>
    <a href="index.php"><input type="button" name="btnCancel" value="Annuleer" class="btn btn-primary pull-left"></a>
    <?php
        include('../includes/get_footer.php');
    ?>

</form>

<?php
}
?>

get_header.php

<html lang="en"><head>
    <meta charset="utf-8">
    <title>Admin Control Panel</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
	
    <link rel="stylesheet" type="text/css" href="stylesheets/theme.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/premium.css">
	
    <link rel="stylesheet" href="./resources/demos/style.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	
	<script src="lib/jQuery-Knob/js/jquery.knob.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	
	<script type='text/javascript'>
		$(document).ready(function() {
			$("select[name='id']").on('change',function() {
				$("input[name='persoon']").val($(this ).children(":selected").data( "persoon" ));
				$("input[name='datumretour']").val($(this ).children(":selected").data( "datumretour" ));
				$("input[name='datumuitgeleend']").val($(this ).children(":selected").data( "datumuitgeleend" ));
				$("input[name='opmerking']").val($(this ).children(":selected").data( "opmerking" ));
			; })
		;})
	</script>
	
</head>
<body class=" theme-blue">

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { 
            color: #fff;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            var uls = $('.sidebar-nav > ul > *').clone();
            uls.addClass('visible-xs');
            $('#main-menu').append(uls.clone());
        });
    </script>

	<script>
		$(function() {
			$( "#datepicker" ).datepicker();
			$( "#datepicker1" ).datepicker();
		});
	</script>
	
	<script type="text/javascript">
        $(function() {
            $(".knob").knob();
        });
    </script>
	
	
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="" href="index.html"><span class="navbar-brand"><span class="glyphicon glyphicon-phone"></span> iPad Control Panel</span></a></div>

        <div class="navbar-collapse collapse" style="height: 1px;">
          <ul id="main-menu" class="nav navbar-nav navbar-right">
            <li class="dropdown hidden-xs">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-user padding-right-small" style="position:relative;top: 3px;"></span>
                    <i class="fa fa-caret-down"></i>
                </a>

              <ul class="dropdown-menu">
                <li class="dropdown-header">Admin Panel</li>
                <li><a tabindex="-1" href="logout.php"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
              </ul>
            </li>
          </ul>

        </div>
      </div>
    </div>
    

    <div class="sidebar-nav">
    <ul>
	<li><a href="index.php" class="nav-header"><img src="./images/ipad.png" width="16" height="16">  Overzicht iPads</a></li>
	<li><ul class="dashboard-menu nav nav-list collapse in">
            <li><a href="ipad-beschikbaar.php"><span class="fa fa-caret-right"></span> Beschikbaar</a></li>
			<li><a href="ipad-uitgeleend.php"><span class="fa fa-caret-right"></span> Uitgeleend</a></li>
			<li><a href="ipad-geschiedenis.php"><span class="fa fa-caret-right"></span> Geschiedenis</a></li>
    </ul></li>
    </div>

    <div class="content">
        <div class="header">
            <div class="stats">
</div>

表:

click here for table

网站:

Click here for example

最佳答案

要使用 php 获取更改值，您需要在选择框更改时重新加载页面，更好的选择是使用 js。

你可以这样做:

$("select[name='id']").on('change',function()
    {$("input[name='persoon']").val($(this).val()); //this will put the select value in text field
})

如果您希望更新 $row['person']，上面的代码会将选择 $row['id'] 放入文本框中，您可能需要首先更新您的 option html，将 $row['person'] 作为任何类似的属性

<option data-datumuitgeleend="<?= $row['datumuitgeleend']; ?>" data-datumretour ="<?= $row['datumretour']; ?>" data-opmerking="<?= $row['opmerking']; ?>" data-persoon="<?= $row['persoon']; ?>" value="<?= $row['id']; ?>"><?= $row['nr']; ?> / <?= $row['serienummer'];

您的 JavaScript 应该更新此值，例如使用:

$("select[name='id']").on('change',function( {    $("input[name='persoon']").val($(this ).children(":selected").data( "persoon" ));
    $("textarea[name='opmerking']").html($(this ).children(":selected").data( "opmerking" ));
    $("input[name='datumretour']").val($(this ).children(":selected").data( "datumretour" ));
    $("input[name='datumuitgeleend']").val($(this ).children(":selected").data( "datumuitgeleend" ));
})

如果您不使用 jQuery Way 在纯 js 中执行操作:

var select =document.getElementsByName('id')[0];
select.addEventListener("change", function() {
    var options = this.options;
    var persoon = options[options.selectedIndex].getAttribute('data-persoon');
    document.getElementsByName('persoon')[0].value = attr;
    var datumuitgeleend= options[options.selectedIndex].getAttribute('data-datumuitgeleend');
    document.getElementsByName('datumuitgeleend')[0].value = attr;
    var opmerking= options[options.selectedIndex].getAttribute('data-opmerking');
    document.getElementsByName('opmerking')[0].value = attr;
            var datumretour = options[options.selectedIndex].getAttribute('data-datumretour');
    document.getElementsByName('datumretour')[0].value = attr;

}

并且还将您的 sql select 语句更改为包含 datumretour、datumuitgeleend、

$sql="SELECT id, nr, model, serienummer, capaciteit, datumretour, datumuitgeleend, persoon, opmerking FROM ipads WHERE uitgeleend='Ja' ORDER BY nr";

希望对你有帮助!

关于javascript - 获取文本字段中的选择值以及更改时的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36083291/

25 4 0
文章推荐： mysql - 用内容填充表格并避免空表格
文章推荐： javascript - 如何覆盖现有的 Backbone 模型方法保持其他方法相同
文章推荐： javascript - 用于替换字符串中数字的命名函数与无名函数
文章推荐： php getaddrinfo 失败 : "A non-recoverable error occurred during a database lookup."
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com