0

当我创建的表单中的任何字段在单击提交后为空时，我正在尝试添加一个弹出窗口。当我单击提交时，弹出窗口工作正常，但是当我单击重置按钮或输入所有字段后，我希望弹出窗口消失，这不起作用。请注意，我只能使用 Javascript（或 Jquery）和 CSS 解决此问题，并且HTML 代码无法更改。

Javascript（我在这里包含了我认为相关的内容）：

function showPopUp(){

  popUp = document.createElement( "div" );
  popText = document.createElement( "p" );
  popUp.id = "popUp";
  document.body.appendChild( popUp );


  popText.id = "popText";

  popText.innerHTML = "Still have fields empty";
  popText.style.marginLeft = popUp.width / 2 + "px";
  popText.style.marginTop = popUp.height / 2 + "px";
  document.body.appendChild( popText );


  return false;
}
function closePopUp() {
    popText.parentNode.removeChild(popText);
    popUp.parentNode.removeChild(popUp);
}

显示弹出（）；在 checkContactForm(this) 函数中运行。

HTML：

<form id="contact" action="" onsubmit="checkContactForm( this ); return false;" >
<p>
  <label for="name">First name:</label>
  <input name="name" id="name" onfocus="resetField( this );" />
</p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" onfocus="resetField( this );"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>
4

2 回答 2

0

我认为这段代码行不通。你会得到popText is undefined和popUp is undefined在控制台中。

要纠正这种情况，请将您的 closePopUp() 更改为以下内容：

function closePopUp() {
    popText = document.getElementById('popText');
    popText.parentNode.removeChild(popText);
    popUp = document.getElementById('popUp');
    popUp.parentNode.removeChild(popUp);
}

如果您在控制台上显示其他问题，请分享。

如果您可以在jsfiddle或jsbin上创建一个 fidde，那就更好了

于 2013-10-13T04:09:32.247 回答
0

当您单击重置按钮时，您可以调用关闭弹出功能。例如：

使用 Jquery！

$("button:eq(1)").click(function(){
    closePopUp();
});

或者使用 javascript，您可以在 html 上添加 onclick 功能

onclick=closePopup()

要检查所有输入字段，您可以使用每个功能

$("input").each(function() {
   var element = $(this);
 if (element.val() == "") {
   isValid = false;
 } 

  });
于 2013-10-13T03:33:09.983 回答