Question

如何在不重定向的情况下提交弹出联系表单？

我想这样做：

1-用户按下提交按钮后关闭弹出窗体。 2-之后显示警告消息，用户将关闭它。 3-用户无需刷新页面即可保持原状。

HTML

<title>Popup contact form </title>

    <link rel="stylesheet"  href="css/elements.css" />
    <script src="js/my_js.js"></script> 

<div id ="bdy" onclick = "check(event)" style="overflow:hidden;">

 <div id="abc">
 <div id="popupContact"> 
        <form action="http://www.example.pt/cgi-bi/FormMail.pl" method="post" id="form" >
            <img src="images/3.png" id="close"/>
            <h2>Contact Us</h2><hr/>
            <input type="text" name="name" id="name" placeholder="Name"/>

            <input type="text" name="email" id="email" placeholder="Email"/>

            <textarea name="message" placeholder="Message" id="msg"></textarea>

            <a id="submit" href="javascript: check_empty()">Send</a>
        </form>
 </div> 
 </div>

JS

function check_empty(){
if(document.getElementById('name').value == "" 
|| document.getElementById('email').value == "" 
||document.getElementById('msg').value == "" ){
alert ("Fill the fields!");
}
    else {  
    document.getElementById('form').submit();  
    alert ("Thank you for your contact");
    }
}

//function to display Popup
function div_show(){ 
document.getElementById('abc').style.display = "block";
}

//function to check target element
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 

var obj = document.getElementById('abc'); 
var obj2 = document.getElementById('popup'); 

checkParent(target)?obj.style.display='none':null; 
target==obj2?obj.style.display='block':null; 

} 

//function to check parent node and return result accordingly
function checkParent(t){ 
    while(t.parentNode){ 
        if(t==document.getElementById('abc'))
            { 
                return false 
            }
        else if(t==document.getElementById('close'))
            {
                return true
            } 
        t=t.parentNode 
    } 
    return true 
}

Answer 1

没有代码我可以肯定。但是有一个链接和例子。在您的情况下，您应该将事件附加到提交事件 https://developer.mozilla.org/fr/docs/Web/API/Event/preventDefault

有一个代码示例：

var form = document.getElementsByClassName('form');
form[0].addEventListener("submit", function(e) {
  e.preventDefault();
  alert('event');
});

提交弹出联系表单而不重定向

1 个答案: