您好，我有一个使用 ajax 来显示产品/项目信息的字段
<input type="text" size="30" id="sku" />
<input type="button" name="Button" class="button"
id="submit_btn" value="Search" onClick="showResult(sku.value)" />
js函数:
function showResult(str)
{
if (str=="")
{
document.getElementById("description").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("description").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getitem.php?sku="+str,true);
xmlhttp.send(null);
这很好用，可以正确输出所需的数据。但是，当我尝试提交表单并捕获输入的 sku 编号并回显它时，我得到了我以前从未见过的“资源 ID #5”。
这是 php:
$sku = $_POST['sku'];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$itemPrice = mysql_query("SELECT price FROM user WHERE sku = '.$sku.'");
<html>
<body>
<p><?php echo $itemPrice ?></p>
</body>
</html>
本质上，我想做的是将输入到“sku”字段中的 sku 编号发布到一个变量中，并在提交表单后将其回显。
提前致谢
编辑:
HTML:
<script type="text/javascript">
function showResult(str)
{
if (str=="")
{
document.getElementById("description").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("description").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?sku="+str,true);
xmlhttp.send(null);
}
</script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>Checkout</a></h1>
<form id="customForm" class="appnitro" method="post" action="payment.php">
<div class="form_description">
<h2>Checkout</h2>
<p>Please fill in all fields to ensure your purchase is processed as quickly as possible. If you have any questions or concerns please contact us at support</p>
</div>
<input type="text" size="30" id="sku" />
<input type="button" name="Button" class="button" id="submit_btn" value="Search" onClick="showResult(sku.value)" />
<br />
<div id="description"></div>
<ul >
<li id="li_11" >
<label class="description" for="element_11">Voucher/Coupon Number </label>
<div>
<input id="voucher_number" name="voucher_number" class="element text medium" type="text" maxlength="255" value=""/>
</div><p class="guidelines" id="guide_voucher_number"><small>Please enter the voucher/coupon number received at the time of purchase</small></p>
</li> <li id="li_4" >
<div><label class="description" for="bill_name">Name </label>
<span>
<input id="bill_first" name= "bill_first" class="element text" maxlength="15" size="8" value=""/>
<label>First</label>
</span>
<span>
<input id="bill_middle" name= "bill_middle" class="element text" maxlength="15" size="5" value=""/>
<label>Middle</label>
</span>
<span>
<input id="bill_last" name= "bill_last" class="element text" maxlength="15" size="8" value=""/>
<label>Last</label>
</span>
<div id="nameInfo"></div></div>
<p class="guidelines" id="guide_19"><small>Please enter your name as it appears on your credit card</small></p>
</li> <li id="li_1" >
<label class="description" for="element_1">Phone </label>
<span>
<input id="bill_area" name="bill_area" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="bill_area">(###)</label>
</span>
<span>
<input id="bill_fnum" name="bill_fnum" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="bill_fnum">###</label>
</span>
<span>
<input id="bill_lnum" name="bill_lnum" class="element text" size="4" maxlength="4" value="" type="text">
<label for="bill_lnum">####</label>
</span>
</li> <li id="li_2" >
<label class="description" for="email">Email</label>
<div>
<input id="email" name="email" class="element text medium" type="text" maxlength="35"/>
<div class="error" id="emailInfo"></div>
<p class="guidelines" id="guide_14"><small>Please enter your email address. This email will be used for all future communications between Overstock-King.com and yourself</small></p>
</div>
</li> <li id="li_3" >
<label class="description" for="element_3">Billing Address </label>
<div>
<input id="bill_street" name="bill_street" class="element text large" value="" type="text">
<label for="bill_street">Street Address</label>
</div>
<div>
<input id="bill_street_2" name="bill_street_2" class="element text large" value="" type="text">
<label for="bill_street_2">Address Line 2</label>
</div>
<div class="left">
<input id="bill_city" name="bill_city" class="element text medium" value="" type="text">
<label for="bill_city">City</label>
</div>
<div class="right">
<select class="element select medium" input id="bill_province" name="bill_province">
<option value="" selected="selected"></option>
<option value="bc">British Columbia</option>
<option value="alb">Alberta</option>
<option value="sas">Saskatchewan</option>
<option value="man">Manitoba</option>
<option value="ont">Ontario</option>
<option value="que">Quebec</option>
<option value="nfl">Newfoundland & Labrador</option>
<option value="nov">Nova Scotia</option>
<option value="nwb">New Brunswick</option>
<option value="pei">Prince Edward Island</option>
<option value="ykn">Yukon</option>
<option value="nwt">Northwest Territories</option>
<option value="nun">Nunavut</option>
</select>
<label for="bill_province">Province</label>
</div>
<div class="left">
<input id="bill_postal" name="bill_postal" class="element text medium" maxlength="6" value="" type="text">
<label for="bill_postal">Postal Code</label>
</div><p class="guidelines" id="guide_3"><small>Please enter the address that is on your credit card</small></p>
</li> <li class="section_break">
<h3>Shipping Information</h3>
<p></p>
</li> <li id="li_6" >
<label class="description" for="ship_name">Name </label>
<span>
<input id="ship_first" name= "ship-first" class="element text" maxlength="15" size="8" value=""/>
<label>First</label>
</span>
<span>
<input id="ship_first" name= "ship-first" class="element text" maxlength="15" size="5" value=""/>
<label>Middle</label>
</span>
<span>
<input id="ship_last" name= "ship_last" class="element text" maxlength="15" size="8" value=""/>
<label>Last</label>
</span> <p class="guidelines" id="guide_11"><small>Please enter the person you want the product shipped to</small></p>
</li> <li id="li_7" >
<label class="description" for="ship_address">Shipping Address </label>
<div>
<input id="ship_street" name="ship_street" class="element text large" value="" type="text">
<label for="ship_street">Street Address</label>
</div>
<div>
<input id="ship_street_2" name="ship_street_2" class="element text large" value="" type="text">
<label for="ship_street_2">Address Line 2</label>
</div>
<div class="left">
<input id="ship_city" name="ship_city" class="element text medium" value="" type="text">
<label for="ship_city">City</label>
</div>
<div class="right">
<select class="element select medium" input id="ship_province" name="ship_province" onchange="showTax(this.value)">
<option value="" selected="selected"></option>
<option value="bc">British Columbia</option>
<option value="alb">Alberta</option>
<option value="sas">Saskatchewan</option>
<option value="man">Manitoba</option>
<option value="ont">Ontario</option>
<option value="que">Quebec</option>
<option value="nfl">Newfoundland & Labrador</option>
<option value="nov">Nova Scotia</option>
<option value="nwb">New Brunswick</option>
<option value="pei">Prince Edward Island</option>
<option value="ykn">Yukon</option>
<option value="nwt">Northwest Territories</option>
<option value="nun">Nunavut</option>
</select>
<label for="ship_province">Province</label>
</div>
<div class="left">
<input id="ship_postal" name="ship_postal" class="element text medium" maxlength="15" value="" type="text">
<label for="ship_postal">Postal Code</label>
</div><p class="guidelines" id="guide_7"><small>Please enter the address you want your product shipped to</small></p>
</li> <div id="provinceInfo"></div><div id="streetInfo"></div>
<li class="buttons">
<input type="hidden" name="form_id" value="288717" />
<input id="submit_form" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="view.js"></script>
</body>
</html>
验证.js:
$(document).ready(function(){
//global vars
var form = $("#customForm");
var fname = $("#bill_first");
var lname = $("#bill_last");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var creditCard = $("#credit_card");
var ccInfo = $("#ccInfo");
var cvv = $("#security_code");
var cvvInfo = $("#cvvInfo");
var street = $("#ship_street");
var province = $("#ship_province");
var provinceInfo = $("#provinceInfo");
var streetInfo = $("#streetInfo");
var description = $("#description");
//On blur
fname.blur(validateFname);
lname.blur(validateLname);
email.blur(checkEmail);
creditCard.blur(validateCreditcard);
cvv.blur(validateCvv);
street.blur(validateStreet);
province.blur(validateProvince);
description.click(showResult);
//On Submitting
form.submit(function(){
if(validateFname() & checkEmail() & validateLname() & validateCreditcard() & validateCvv() & validateStreet() & validateProvince())
return true
else
return false;
});
//validation functions
function checkEmail(){
httpObject = getHTTPObject();
if (httpObject != null) {
if (!document.getElementById('email').value== ""){
httpObject.open("GET", "validate_email.php?email="+document.getElementById('email').value, true);
httpObject.send(null);
httpObject.onreadystatechange = setImage;
}
else
{
document.getElementById('emailInfo').innerHTML = "Please enter a valid email address";
}
}
}
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function setImage(){
if(httpObject.readyState == 4){document.getElementById('emailInfo').innerHTML = httpObject.responseText;}
}
function validateFname(){
//if it's NOT valid
if(fname.val().length < 1){
fname.addClass("error");
nameInfo.text("Please enter your first name");
nameInfo.addClass("error");
return false;
}
//if it's valid
else{
fname.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateLname(){
//if it's NOT valid
if(lname.val().length < 1){
lname.addClass("error");
nameInfo.text("Please enter your last name");
nameInfo.addClass("error");
return false;
}
//if it's valid
else{
lname.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateCreditcard(){
//if it's NOT valid
if(creditCard.val().length < 15){
creditCard.addClass("error");
ccInfo.text("Please enter your credit card number");
ccInfo.addClass("error");
return false;
}
//if it's valid
else{
creditCard.removeClass("error");
ccInfo.text("");
ccInfo.removeClass("error");
return true;
}
}
function validateCvv(){
//if it's NOT valid
if(cvv.val().length < 3){
cvv.addClass("error");
cvvInfo.text("Please enter your credit card security code");
cvvInfo.addClass("error");
return false;
}
//if it's valid
else{
cvv.removeClass("error");
cvvInfo.text("");
cvvInfo.removeClass("error");
return true;
}
}
function validateProvince(){
//if it's NOT valid
if(province.val().length < 2){
province.addClass("error");
provinceInfo.text("Please select the province you are shipping the product to");
provinceInfo.addClass("error");
return false;
}
//if it's valid
else{
province.removeClass("error");
provinceInfo.text("");
provinceInfo.removeClass("error");
return true;
}
}
});
最佳答案
你的领域<input type="text" id="sku" />缺少 name 属性，在发布到服务器时使用 name 属性，因此只需将其更正为
<input type="text" id="sku" name="sku" />
它会起作用
关于php - 无法将 ajax 填充的字段传递给 php，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8171545/