如何在窗体中单击重置按钮时确认弹出窗口

时间:2013-11-07 20:53:11

标签: javascript html

我在www.thetotempole.ca有一个表单,我想知道当用户点击重置按钮询问他们是否真的想要这样做时如何制作弹出窗口,如果不是我想要的文本字段要重置的表单,如果是,我希望重置整个表单和文本字段中的所有文本。谢谢,因为我似乎无法让这个工作!

HTML:

<html>
   <head>
      <script>
         function validate()
         {
            var myform = document.getElementById("form1");
            myform.fname.style.backgroundColor = "white";
            myform.lname.style.backgroundColor = "white";
            myform.address.style.backgroundColor = "white";
            myform.city.style.backgroundColor = "white";
            myform.provstate.style.backgroundColor = "white";
            myform.country.style.backgroundColor = "white";
            myform.postalzip.style.backgroundColor = "white";
            console.log("form object: " + myform);
            if (myform.fname.value == "")
            {
               alert("First Name must have a value");
               myform.fname.focus();
               myform.fname.style.backgroundColor = "red";
               return false;
            }
            if (myform.lname.value == "")
            {
               alert("Last Name must have a value");
               myform.lname.focus();
               return false;
            }
            if (myform.address.value == "")
            {
               alert("Address must have a value");
               myform.address.focus();
               return false;
            }
            if (myform.postalzip.value == "")
            {
               alert("Postal/Zip Code must have a value");
               myform.postalzip.focus();
               return false;
            }
            else
            {
               //var regex = new RegExp();
               var regex = /^([a-z]\d[a-z]\s?\d[a-z]\d)|(\d{5}(\s?\d{4})?)$/i;
               myform.postalzip.value.toUpperCase();
               if (!regex.test(myform.postalzip.value))
               {
                  alert("Postal/Zip Code has invalid format");
                  myform.postalzip.focus();
                  return false;

               }
            }

            return true;
         }
      </script>
   </head>
   <body>
      <form id="form1">
         First Name:<input type="text" name="fname" /><br />
         Last Name:<input type="text" name="lname" /><br />
         Address:<input type="text" name="address" /><br />
         City:<input type="text" name="city" /><br />
         Province/State:<input type="text" name="provstate" /><br />
         Country:<input type="text" name="country" /><br />
         Postal/Zip Code:<input style="text-transform: uppercase;" type="text" name="postalzip" /><br />
         <input type="submit" onclick="return confirm('Do you really want to continue?')" value="Send" />
         <input type="reset" onclick="onclick="return confirm('Do you really want to reset?')" value="Reset" />

      </form>
   </body>
</html>

1 个答案:

答案 0 :(得分:0)

你的代码看起来有点乱码,onclick方法里面有一个onclick位:

onclick="onclick="return confirm('Do you really want to reset?')"

如果你解决了这个问题,它有帮助吗?