Javascript 为什么我的表单只是刷新页面？_Javascript_Jquery_Html

Javascript 为什么我的表单只是刷新页面？

javascript jquery html

Javascript 为什么我的表单只是刷新页面？,javascript,jquery,html,Javascript,Jquery,Html,更新：我有电子邮件表单作为id，但仍然有相同的问题我有一个表单，当我提交时，应该弹出并显示一个颜色框，但是代码打开了颜色框，但是在眨眼之间，页面刷新了这是我的密码： <html data-wf-page="546cd4ede4d" data-wf-site="5d0115c4ca7148"> <head> <meta charset="utf-8"> <title>

更新：我有电子邮件表单作为id，但仍然有相同的问题

我有一个表单，当我提交时，应该弹出并显示一个颜色框，但是代码打开了颜色框，但是在眨眼之间，页面刷新了

这是我的密码：

            <html data-wf-page="546cd4ede4d" data-wf-site="5d0115c4ca7148">
        <head>
          <meta charset="utf-8">
          <title>Request Form</title>
          <meta content="Request a now." name="description">
          <meta content="Request Thingy" property="og:title">
          <meta content="Request a thingy now." property="og:description">
          <meta content="summary" name="twitter:card">
          <meta content="width=device-width, initial-scale=1" name="viewport">
          <meta content="Webflow" name="generator">
          <link href="css/normalize.css" rel="stylesheet" type="text/css">
          <link href="css/webflow.css" rel="stylesheet" type="text/css">
          <link href="css/sdfj.css" rel="stylesheet" type="text/css">
          <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
          <script type="text/javascript">
            WebFont.load({
              google: {
                families: ["Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic","Varela Round:400","PT Sans:400,400italic,700,700italic"]
              }
            });
          </script>
          <script src="js/modernizr.js" type="text/javascript"></script>
          <link href="images/favicon2.png" rel="shortcut icon" type="image/x-icon">
          <link href="images/myfav.png" rel="apple-touch-icon">

          <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-526-3'], ['_trackPageview']);
            (function() {
              var ga = document.createElement('script');
              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
          </script>


          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
          <link rel="stylesheet" href="https://thingyss.com/css/colorbox.css" />

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>





        <style>
            #wrapper {
          position: relative;
          display: inline-block;
          width: 100%;
          z-index: 1;
        }
        #wrapper input {
          padding-right: 14px;
        }
        #wrapper:after {
          content: "*";
          position: absolute;
          right: 15px;
          top: +12px;
          /*color: #ed9900;*/
          color: #39a2e2;
          z-index: 5;
        }





        </style>


        </head>
        <body class="requestbody">

          <form id="email-form" name="email-form">
            ..........

            <div class="form_half_div right">
                          <div class="centered">
                            <input class="rounded_btn w-button w-preserve-3d" type="submit" value="Request Now" data-wait="Finding..." wait="Finding...">
                        </div>
                      </div>
           </form>


          <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpz8DQg&v=3.exp&libraries=places">
          </script>
          <script src="js/socket.io.min.js"></script>
          <script type="text/javascript" src="js/mystuff.js"></script>
          <script src="https://checkout.stripe.com/checkout.js"></script>
          <script src="js/autoNumeric.js"></script>
          <script src="js/jquery.colorbox-min.js"></script>

            <script>


          $(document).ready(function() {
            setTypes();
            initialize();

            $("#email-form").submit(function(){
              requestTruckWarning(); // creates a colorbox
              e.preventDefault(); // trying to prevent page from refreshing but never hits this breakpoint?
              return false;
            });
            document.onkeypress = stopReturnKey;
          });

          function initialize() {

            var options = {
              types: ['(cities)'],
              componentRestrictions: {country: "us"}
             };


            var mapOptions = {
              center: { lat: 39.707187, lng: -100.722656},
              zoom: 14,
              draggable: false,
              scrollwheel: false
            };
            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            google.maps.event.addListener(map, 'click', function() {
              map.setOptions({draggable: true});
            });

            bootstrapHome(map);

          }

          function geolocate() {
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = new google.maps.LatLng(
                    position.coords.latitude, position.coords.longitude);
                autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
                    geolocation));
              });
            }
          }




          </script>

         <!--  <script src="js/jquery-2.1.1.js"></script> -->
        <script src="js/main.js"></script> 
          <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
        </body>
        </html>


申请表
WebFont.load({
谷歌：{
系列：[“Ubuntu:300300Italic，400400Italic，500500Italic，700700Italic”，“Varela Round:400”，“PT SAN:400400Italic，700700Italic”]
}
});
var _gaq=_gaq | |[]；
_gaq.push（[''U设置帐户'，'UA-526-3']，[''U轨迹页面视图']）；
（功能（）{
var ga=document.createElement（'script'）；
ga.src=（'https:'==document.location.protocol？'https://ssl' : 'http://www“）+”.google analytics.com/ga.js'；
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（ga，s）；
})();
#包装纸{
位置：相对位置；
显示：内联块；
宽度：100%；
z指数：1；
}
#包装输入{
右边填充：14px；
}
#包装工：之后{
内容：“*”；
位置：绝对位置；
右：15px；
顶部：+12px；
/*颜色：#ed9900*/
颜色：#39a2e2；
z指数：5；
}

..........
$（文档）.ready（函数（）{
setTypes（）；
初始化（）；
$（“#电子邮件表单”）。提交（函数（）{
requestTruckWarning（）；//创建颜色框
e、 preventDefault（）；//试图阻止页面刷新，但从未命中此断点？
返回false；
});
document.onkeypress=停止返回键；
});
函数初始化（）{
变量选项={
类型：['（城市）]，
组件限制：{国家：“美国”}
};
变量映射选项={
中心：{lat:39.707187，lng:-100.722656}，
缩放：14，
可拖动：错误，
滚轮：错误
};
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
setOptions（{draggable:true}）；
});
bootstrapHome（map）；
}
函数geologite（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var geolocation=new google.maps.LatLng(
位置.坐标.纬度，位置.坐标.经度）；
自动完成.setBounds（新的google.maps.LatLngBounds（地理位置，
地理定位）；
});
}
}

您的

表单

没有任何名为

#电子邮件表单

的ID。添加ID属性：

<form id='#email-form'>

此外，还提到了其他答案，因此您必须在提交回调中将

作为事件传递

$('form').submit(function(e){ // <-------here

$（'form'）.submit（函数（e）{/您忘记将事件变量e
作为参数传递给submit回调：
       $("#email-form").submit(function(e){ //Here
          requestTruckWarning(); // creates a colorbox
          e.preventDefault(); // trying to prevent page from refreshing but   never hits this breakpoint?
        });

在回调函数中，缺少传递的参数e
（事件对象）：
此外，它看起来像其他一些答案（归功于）已经指出，#email form
没有引用文档中的元素。在上述代码成功运行之前，必须解决这一问题。
这里实际上存在两个问题。正如@Jai所说，您没有为表单设置id属性，因此jQuery正在查找id='email-form'的元素，但没有找到任何内容，因此代码没有执行。即使它执行了，也不会停止表单提交，因为当您使用e.preventDefault时，本例中的“e”是事件对象，这是您需要传递给事件处理程序的对象。请将id添加到for，然后更改事件处理程序的声明，如下所示：
        $("#email-form").submit(function(e){

我在任何地方都看不到id电子邮件表单
。@jdog:在更新了id
之后，您是否按如下所述将参数e添加到回调函数中？这应该可以修复您的错误。如果未传递参数，则返回false应该执行。如果未传递参数，则返回false应该执行。正确，这将是多余的。感谢t他接住了。
$('#email-form').submit(function (e) {
    requestTruckWarning() // Creates a colorbox
    e.preventDefault() // This now works, because `e` exists
})

        $("#email-form").submit(function(e){