为什么提交按钮通向其他选项卡？

Question

我试图在单击邮件选项卡中的发送邮件按钮之后在“收件人：”只读框中显示虚拟邮件，如下所示。 但发生了什么事情而不是显示消息，它会打开“FAQ”选项卡。你能建议我怎样才能在输入框顶部显示一条消息，而不必去FAQ选项卡。谢谢。

这里是codepen

$("#frmDemo").submit(function(e) { 
    e.preventDefault(); 
    var name = $("#name").val(); 
    var comment = $("#comment").val(); 
    if(name == "" || comment == "") { 
    $("#error_message").show().html("All Fields are Required"); 
    } else { 
$("#error_message").html("").hide(); 
$.ajax({ 
    type: "POST", 
    url: "post-form.php", 
    data: "name="+name+"&comment="+comment, 
    success: function(data){ 
    $('#success_message').fadeIn().html(data); 
    setTimeout(function() { 
     $('#success_message').fadeOut("slow"); 
    }, 2000); 

    } 
}); 
} 
}); 

Answer 1

我认为该按钮链接到常见问题选项卡。可能是该按钮的数据切换amd href属性设置为FAQs ID。

此外，请检查常见问题选项卡中是否存在某些验证，因为可能是您对所有选项卡使用了单一表单。

能否请你分享网页

Answer 2

尝试这样的HTML：

$("form#frmDemo").submit(function(e) { 

    let t = $(this); 
    let name = t.find("#name").val(); 
    let comment = t.find("#comment").val(); 
    let errorMsg = t.find("#error_message"); 
    let successMsg = t.find("#success_message"); 

    if(name == "" || comment == "") { 

    errorMsg.html("All Fields are Required").show(); 

    } else { 

    errorMsg.html("").hide(); 

    $.ajax({ 
     type: "POST", 
     url: "post-form.php", 
     data: "name="+name+"&comment="+comment, 
     success: function(data){ 
     successMsg.fadeIn().html(data); 
     setTimeout(function() { 
      successMsg.fadeOut("slow"); 
     }, 2000); 

     } 
    }); 

    } 

    e.preventDefault(); 
});