堆棧內存溢出
  簡體   English   中英

為什么我的表單只是刷新頁面？

[英]Why is my form just refreshing the page?

 原文  2016-12-08 16:55:45  5   4    javascript/ jquery/ html

問題描述

更新：我有電子郵件形式的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>

4 個解決方案

解決方案1
 7 已采納  2016-12-08 16:59:12

您忘記將事件變量e作為參數傳遞來提交回調： 

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

解決方案2
 3  2016-12-08 16:59:13

在回調函數中，您缺少傳遞的參數e （事件對象）： 

$('#email-form').submit(function (e) {
    requestTruckWarning() // Creates a colorbox
    e.preventDefault() // This now works, because `e` exists
})

此外，似乎其他一些答案（向Jai致謝 ）指出， #email-form並未引用文檔中的元素。 在上面的代碼成功運行之前，必須先解決該問題。

解決方案3
 2  2016-12-08 16:58:39

您的form沒有任何名為#email-form ID。 添加ID屬性： 

<form id='#email-form'>

或更改選擇器： 

$('form').submit(function(){

並且還提到了其他答案，您必須在Submit回調中將e作為事件傳遞。 

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

如上所述，還必須進行其他兩個更改。

解決方案4
 1  2016-12-08 17:01:47

實際上，這里有兩個問題。 正如@Jai所說，您沒有為表單設置id屬性，因此jQuery正在尋找id ='email-form'的元素，卻一無所獲，因此代碼無法執行。 即使它確實執行，也不會停止表單提交，因為在使用e.preventDefault時，在這種情況下，“ e”是事件對象，這是您需要傳遞給事件的東西處理程序。 將id添加到for中，然后像下面這樣更改事件處理程序的聲明： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么我的表單提交仍然刷新頁面？ 提交表單后，為什么我的頁面會刷新？ 如何在不刷新所有頁面的情況下僅發送表單 為什么我的jquery ajax無法在我的頁面上工作並且頁面也刷新 為什么刷新頁面后立即必須單擊帶有slideToggle的按鈕兩次才能使未切換的表單可見？ 我的表單上的React生成按鈕會不斷刷新頁面 表單數據刷新頁面不讓我的 JS 運行 提交javascript表單時如何防止我的頁面刷新 為什么刷新頁面后得到未定義的結果表單 api？ 隱藏某些元素后，為什么頁面會刷新？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM