Question

我已经检查了所有其他'重复'的问题。但是在找到我的脚本出了什么问题方面已经碰壁了。可能是非常简单的事情。但我找不到错误。所以我在这里。

我正在尝试在网页上创建一个产品列表，其中包含每个产品的“查询”链接。单击该链接后，将捕获产品ID，并显示用于添加用户联系详细信息的简要表单。当用户提交表单时，查询的产品详细信息和用户联系详细信息将通过电子邮件发送给管理员。

我正在使用JS对PHP文件进行Ajax Post调用。

两个函数之间的一切都很好接受

点击“查询”链接时和
点击表单提交按钮时。

我的问题是，我无法将查询的产品名称变量'item'传递给submit函数。在提交功能中，我得到'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');

        });
 }

Answer 1

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

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;
//......
}

一切都很顺利。谢谢你的努力。

在函数

1 个答案: