Question

我正在学习Mysql / PHP，我正在尝试根据下拉列表中的选定值更新文本字段。我已阅读了几篇教程，并尝试应用它们，但我无法使其正常工作......

别介意我的杂乱代码，稍后会清理!!!

包含下拉列表和texfields的页面：

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

Answer 1

我确实介意了凌乱的代码，但主要是缺少最少的代码来重现你所面临的问题，所以请原谅我，如果我没有正确地提炼你的问题。

我认为您描述的问题归结为“每当所选的<textarea>选项更改时，如何填充<select>？”

$(function() {
  var select = $('select[name="pickAnOption"]');

  function update(select) {
    var value = select.val(),
        textarea = $('textarea[name="describeTheOption"]');

    if (value) {
      textarea.attr('disabled', false).text('You picked ' + value);
    }
    else {
      textarea.attr('disabled', true).text('Pick an option first');
    }
  }

  select.on('change', function() {
    update(select);
  });
  update(select);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Choose wisely: 
  <select name="pickAnOption">
    <option value="">Pick one</option>
    <option value="a">option A</option>
    <option value="b">option B</option>
    <option value="c">option C</option>
  </select>

  <br>
  
  Gives some options:
  <textarea name="describeTheOption"></textarea>
 </form>

至于解释发生了什么，这里是javascript细分为

的流程

$(function() {，当文档准备就绪时执行此功能（所有元素都可用，图像/样式表等资源可能已加载或未加载）
var select = ...，存储对<select>元素的引用，因为我们将多次使用它，并且不想经常查找它
function update() {..}，因为我们想要在第一次加载页面时更新和（因为有些浏览器会记住页面刷新时的表单状态），我们想要一个函数来调用对于这些场合
var value = select.val()，选择所选的选项值
(var) textarea = $(..)，存储对textarea的引用
if (value)，如果带有非假（-ish）值的选项（在此示例中：值不是我们添加到'Pick one'选项中的空值），执行此块中的代码
$(textarea).attr('disabled', false)确保textarea可编辑（未禁用）
.text('You picked ' + value)，设置textarea的内容以显示选项值
else，与上面几乎相同，但是对非值进行操作（禁用textarea，设置默认文本）。
select.on('change', function() {..})，聆听<select>元素上的更改事件，并在选择其他选项时触发update
update(select)，最初触发update以确保textarea与所选选项相同。

如果您想要获得最初的update（我更喜欢这样做），这是一个品味问题，如果您不这样做，它将节省一个额外的功能。

如果您想要阻止独立功能，或者您可以使用备用符号，例如

$('select[name="pickAnOption"]')
  .on('change', function() {
    //  update code here.
  })
  .change(); // invoke the change handler immediately

Answer 2

要使用php获取更改值，您可以重新加载页面，如果选择框更改，则更好的替代方法是使用js。

您可以执行以下操作：

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

如果您希望$row['id']更新，上面的代码会在文本框中选择$row['persoon']您可能希望先更新option html以使$row['persoon']为任何内容像

这样的属性

<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" ));
})

如果你没有在js中使用jQuery Way：

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";

希望它有所帮助！

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

2 个答案: