在函数中获取javascript全局变量时出错



我已经检查了这方面的所有其他"重复"问题。但在发现我的剧本有什么问题方面遇到了困难。可能是非常简单的事情。但我找不出毛病了。所以我在这里。

我正在尝试在网页上创建一个产品列表,每个产品都有一个"查询"链接。单击链接时,会捕获产品id,并显示一个用于添加用户联系方式的简短表单。当用户提交表单时,查询的产品详细信息和用户联系方式将通过电子邮件发送给管理员。

我使用JS通过对PHP文件的Ajax Post调用来完成这一切。

两个功能之间的一切都可以接受

  1. 单击"查询"链接时以及
  2. 单击表单提交按钮时

我的问题是,我无法将查询的产品名称变量"item"传递给提交函数。在提交函数中,我得到了未定义的"item"。

我不太擅长JS。我知道我在程序上犯了一些错误。如果有人能指出我做错了什么,那就太好了。

我的代码;

HTML

<div class="prodlist"><div class="productimg"><h4 id="itemcf">Cupellation Furnace</h4><img src="images/cupellation-furnace.png" alt="cupellation furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquirecf"><span>Inquire</span></div><div id="inqrescf"></div></div>
<div class="prodlist"><div class="productimg"><h4 id="itemmf">Melting Furnace</h4><img src="images/furnace-2kg.png" alt="Melting furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquiremf"><span>Inquire</span></div><div id="inqresmf"></div></div>
<div id="inqform">
<span id="inqclose">Close</span>
<div style="clear:both"></div>
<div id="inqresgen"></div>
<form id="forminq" method="post">
Name  : <input type="text" id="inqname" require><br>
<div style="clear:both"></div>
phone  : <input type="number" id="inqphone" require><br>
<div style="clear:both"></div>
Email  : <input type="email" id="inqemail" require><br>
<div style="clear:both"></div>
Location  : <input type="text" id="inqloc" require><br>
<div style="clear:both"></div>
Message : <textarea cols="30" rows="10" id="inqmsg" require></textarea>
<div style="clear:both"></div>
<input type="submit" onClick="sendInq();" value="Send">
<div style="clear:both"></div>
</form>
<div style="clear:both"></div>
</div>

JS-

$(document).ready(function(){
var item;
$('#inqclose').click(function(){ $('#inqform').fadeOut('fast');});
$('#inquirecf,#inquiremf').click(function(){ 
var id = $(this).attr('id');
//alert(id);
if(id=="inquirecf"){alert("inquirecf"); item="Cupellation Furnace";}
else if(id=="inquiremf"){alert("inquiremf");item="Melting Furnace";}
else{alert("No Choices");}
$('#inqform').slideToggle('fast');
});
});
function sendInq(item){
var itemv=item;
event.preventDefault();
var inqname=$('#inqname').val();
var inqphone=$('#inqphone').val();
var inqemail=$('#inqemail').val();
var inqloc=$('#inqloc').val();
var inqmsg=$('#inqmsg').val();
alert("Item : "+ itemv);
$.post("inquire.php",
{
itemname: itemv,
inqname: inqname,
inqphone: inqphone,
inqemail: inqemail,
inqloc: inqloc,
inqmsg: inqmsg
},
function(data,status){
//        alert("Data: " + data + "nStatus: " + status);
$('#inqresgen').html( data );
///$('#inqres2').html( "<h4>Inquiry Sent</h4>");
$('#forminq').fadeOut('fast');
});
}

经过大量的谷歌搜索和研究不同的选项,我意识到使用

window.item

帮助

现在我的代码看起来像

$('#inquirecf,#inquiremfhalfkg,#inquiremf1kg,#inquiremf2kg,
#inquiremf5kg,#inquirecupels,#inquiremuffles,#inquirecrucibles,#inquirethermo,
#inquiresilicon').click(function(){ 
var id = $(this).attr('id');
if(id=="inquirecf"){window.item="Cupellation Furnace";}
else if(id=="inquiremfhalfkg"){window.item="Melting Furnace 0.5Kg";}
else if(id=="inquiremf1kg"){window.item="Melting Furnace 1Kg";} 
else if(id=="inquiremf2kg"){window.item="Melting Furnace 2Kg";}
else if(id=="inquiremf5kg"){window.item="Melting Furnace 5Kg";}
else if(id=="inquirecupels"){window.item="Cupels";}
else if(id=="inquiremuffles"){window.item="Muffles";}
else if(id=="inquirecrucibles"){window.item="Crucibles";}
else if(id=="inquirethermo"){window.item="Thermocouples";}
else if(id=="inquiresilicon"){window.item="Silicon Carbide Elements";}  
else{alert("No Choices");}
}
function sendInq(item){
var itemv=window.item;
//......
}

现在一切都很好。感谢大家的努力。

相关内容

  • 没有找到相关文章