在此代码中，我的选择表单值来自数据库，然后当我选择时，它将根据条件自动显示在文本框中。我想要的是它将在文本框中显示数据库中的内容。我有麻烦与mysql处理jquery。提前谢谢。
<?php
ob_start();
session_start();
include_once("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
// Define a method that handles nothing but the actual
// form population. This helps us decouple the data
// insertion from the data retrieval.
function PopulateFields( strValue1, strValue2, strValue3 ){
$( "#field2" ).val( strValue1 );
$( "#field3" ).val( strValue2 );
$( "#field4" ).val( strValue3 );
}
// I take the given option selection and return the
// associated data using a remote method call.
function GetAJAXValues( strOption, fnCallback ){
// Check to see if there is currently an AJAX
// request on this method.
if (GetAJAXValues.Xhr){
// Abort the current request.
GetAJAXValues.Xhr.abort();
}
// Get data via AJAX. Store the XHR (AJAX request
// object in the method in case we need to abort
// it on subsequent requests.
GetAJAXValues.Xhr = $.ajax({
type: "post",
url: "./dynamic_form_population_data.cfm",
data: {
option: strOption
},
dataType: "json",
// Our success handler.
success: function( objData ){
// At this point, we have data coming back
// from the server. However, since ColdFusion
// upper-cases the struct-keys, let's
// translate these back to the expected case.
fnCallback({
Value1: objData.VALUE1,
Value2: objData.VALUE2,
Value3: objData.VALUE3,
Value4: objData.VALUE4,
Value5: objData.VALUE5,
Value6: objData.VALUE6,
Value7: objData.VALUE7
});
},
// An error handler for the request.
error: function(){
alert( "An error occurred" );
},
// I get called no matter what.
complete: function(){
// Remove completed request object.
GetAJAXValues.Xhr = null;
}
});
}
// I take the given option selection and return the
// associated data.
function GetStaticValues( strOption ){
if (strOption == "1"){
return({
Value1: "Computer Setup",
Value2: "Newly purchased computer? We will do the setup for you. We will configure and install your computer's software and troubleshoot your hardware. Clean up of utility shortcuts is also a part of our service. We will remove inappropriate software and application that may cause conflict to your computer. Demonstration of basic functionality will also be provided. Our trained experts will do all the complex work so you can fully enjoy your new computer.",
Value3: "$49.00"
});
} else if (strOption == "2"){
return({
Value1: "Value 2 - Field 1",
Value2: "Value 2 - Field 2"
});
} else if (strOption == "3"){
return({
Value1: "Master",
Value2: "Jalo"
});
} else {
// No matches, so return default value.
return({
Value1: "",
Value2: ""
});
}
}
// I handle the updating of the form fields based on the
// selected option of the combo box.
function UpdateFormFields(){
var jSelect = $( "#field1" );
var jAJAX = $( "#ajax" );
var objData = null;
// Check to see if we are using AJAX or static data
// to re-populate the form.
if (jAJAX.is( ":checked" )){
// Make a remote call to get the remote data.
// Because we have to do this asynchronously,
// we have to provide a callback method that
// will hook the results up to the populate
// fields method.
GetAJAXValues(
jSelect.val(),
// Callback method for results.
function( objRemoteData ){
PopulateFields(
objRemoteData.Value1,
objRemoteData.Value2,
objRemoteData.Value3
);
}
);
} else {
// Make a local call to get the static data.
objData = GetStaticValues( jSelect.val() );
// Populate form fields.
PopulateFields( objData.Value1, objData.Value2, objData.Value3 );
}
}
// When the DOM is ready to be interacted with, init.
$(function(){
var jSelect = $( "#field1" );
// Bind the change event to the select box. We're
// just going to hand that control off to the
// handler method.
jSelect.change( UpdateFormFields );
});
</script>
</head>
<body>
<div class="container">
<h1>
Dynamic Form Population With jQuery
</h1>
<form method="post" action="cart_update.php">
<p>
<!-- <select id="field1">
<option value="" hidden selected disabled></option>
<option value="opt1">Computer Setup</option>
<option value="opt2">Software Install and Setup</option>
<option value="opt3">Setup of Peripheral Devices</option>
<option value="opt3">Computer Tune Up Service</option>
<option value="opt3">Virus and Spyware Removal</option>
<option value="opt3">Data Backup / Transfer</option>
<option value="opt3">Wireless Networking</option>
</select> -->
<?php
echo "<select class='form-control' id='field1'>";
echo "<option value='' hidden selected disabled></option>";
$current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$results = $mysqli->query("SELECT * FROM products");
if ($results) {
//fetch results set as object and output HTML
while($obj = $results->fetch_object())
{
echo "<option value='$obj->id'>$obj->product_name";
}
}
echo "</option></select>";
// echo '<button class="add_to_cart">Add To Cart</button>';
?>
</p>
<!--
<p>
<input type="text" id="field2" size="50" placeholder="Service" />
</p>
<p>
<textarea rows="5" cols="50" id="field3" placeholder="Description"></textarea>
</p>
<p>
<input type="text" id="field4" size="50" placeholder="Price"/>
</p>
<p>
<input type="text" id="field2" size="50" placeholder="Quantity"/>
</p>
<p>
<label>
<input type="checkbox" id="ajax" />
Use Ajax To Gather Data
</label>
</p> -->
<div class="row">
<div class="col-md-2">
<input class="form-control" placeholder="Service Name" id="field2">
</div>
<div class="col-md-4">
<textarea class="form-control text-justify" rows="9" placeholder="Description" id="field3"></textarea>
</div>
<div class="col-md-2">
<input class="form-control" placeholder="Price" id="field4">
</div>
<div class="col-md-2">
<input class="form-control">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-info add_to_cart"> Add to Cart</button>
<?php
echo '<input type="hidden" name="type" value="add" />';
echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
?>
</form>
</div>
</div>
</div>
<div id="products-wrapper">
<h1>Products</h1>
<div class="products">
</div>
<div class="shopping-cart">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="text-center"><i class="fa fa-shopping-cart"></i> Your Shopping Cart</h3>
</div>
<div class="panel-body">
<?php
if(isset($_SESSION["products"]))
{
$total = 0;
echo '<ol>';
foreach ($_SESSION["products"] as $cart_itm)
{
echo '<li class="cart-itm">';
echo '<span class="remove-itm"><a href="cart_update.php?removep='.$cart_itm["code"].'&return_url='.$current_url.'">×</a></span>';
echo '<h3>'.$cart_itm["name"].'</h3>';
echo '<div class="p-code">P code : '.$cart_itm["code"].'</div>';
echo '<div class="p-qty">Qty : '.$cart_itm["qty"].'</div>';
echo '<div class="p-price">Price :'.$currency.$cart_itm["price"].'</div>';
echo '</li>';
$subtotal = ($cart_itm["price"]*$cart_itm["qty"]);
$total = ($total + $subtotal);
}
echo '</ol>';
echo '<span class="check-out-txt"><strong>Total : '.$currency.$total.'</strong></span>';
echo '<span class="empty-cart"><a href="cart_update.php?emptycart=1&return_url='.$current_url.'">Empty Cart</a></span>';
}else{
echo '<div class=text-center>Your Cart is empty</div>';
}
?>
</div>
</div>
</div>
<!-- PERSONAL INFO -->
<div class="shopping-cart">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="text-center"><i class="fa fa-user"></i> Personal Information</h3>
</div>
<div class="panel-body">
<form role="form" action="index.php" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="First Name" name='first_name' required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Last Name" name='last_name' required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Address" name='address' required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Zip Code</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Zip Code" name='zip_code' required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact Number</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Contact Number" name='contact_number' required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email Address</label>
<input type="email" class="form-control" id="exampleInputPassword1" placeholder="Email Address" name='email_address' required>
</div>
<button type="submit" class="btn btn-info pull-right" name='submit'> <i class="fa fa-shopping-cart"></i> Checkout</button>
<?php
if(isset($_POST['submit'])){
$_SESSION['first_name']=$_POST['first_name'];
$_SESSION['last_name']=$_POST['last_name'];
$_SESSION['address']=$_POST['address'];
$_SESSION['zip_code']=$_POST['zip_code'];
$_SESSION['contact_number']=$_POST['contact_number'];
$_SESSION['email_address']=$_POST['email_address'];
header("refresh:0;url=view_cart.php");
}
ob_end_flush();
?>
</form>
</div>
</div>
</div>
</div>
</body>
</html>