2013-07-18 59 views
3

我的問題比標題中寫的要深一點。 讓我解釋一下情況。 我正在構建一個表單,用於購買使用JQuery通過插件FormToWizard分步執行的產品。此外,我正在使用Validate來驗證它很容易,並與ZURB定製的效果和Reveal.js(對不起,不能發佈更多的鏈接,因爲我失蹤的聲譽)好模態來處理髮生的錯誤。表單通過操作發送而不是javascript,但返回false

我的進展情況:當網站加載完成和 當表單提交它再次掃描整個窗體

  • 的驗證功能啓動。
  • 所以我告訴驗證,如果有錯誤 將變量錯誤設置爲true,並且在沒有錯誤時將其設置爲false。
  • 之後它應該調用函數send()來處理 模態併發送表單。
  • 它也得到了一個返回false,以防止html發送它自然的方式 。

我的問題:

  1. 只要函數發送的代碼變得太大,它isn't 正常進行了,突然由PHP文件 中斷叫它的動作標籤表格。
  2. 如果我減少函數send()中的行數,它的工作方式應該是 。但是這些額外的線是非常重要的。

那麼我能做些什麼來避免這種情況呢?

我已經試過在$("#auftragsform").submit()函數中包裝這兩個函數,但這也沒有奏效。我嘗試了一大堆事情,並想到了我所知道的一切,並且能夠做到,但沒有找到解決方案。

Here's我的代碼:

$(window).load(function(){  
     $('#auftragsformular').walidate({ 
      submitSelector: 'input[type="submit"]', 
      doIfAllIsValid: function() { 
       error = false; 
       send(); 
      }, 
      doIfSomethingIsInvalid: function() { 
       error = true; 
       send(); 
      } 
     }); // Initalize the form 
     $('#name').walidate('validate'); // Make this element required 
     $('#email').walidate('validate', { 
      eventHandler: 'blur keyup', 
      expression: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,10})+$/, 
      invalid: function() {     
       $(this).tipTip({ delay: 100, defaultPosition: "top", activation: "focus" }); 
      }, 
     }); 
     $('#plz').walidate('validate'); 
     $('#ort').walidate('validate'); 
     $('#strasse').walidate('validate'); 
     $('#hausnr').walidate('validate'); 
     $('#hoehe').walidate('validate'); 
     $('#breite').walidate('validate'); 
     $('input[type=radio][name=varianten]').walidate('validate'); 
     $('#agb').walidate('validate'); 
}); 

function send(){ 
    if (error == false) { 
     if (is_not_bot()) { 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var adresse = $("#uebersicht_d").text(); 
      var auftrag = $("#uebersicht_a").text(); 

      $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) { 
        $("#form").slideUp(1000); 
        $("#answer").delay(1000).fadeIn(1500); 
        console.log(msg); 
      }); 
     } 
     return false; 
    } 

    if (error == true) { 
     $('#errorModal').reveal(); 
     if ($("#versteckt_variante:checked").val() == "nix") { 
      $("#alert_varianten").show(); 
      $("#felderhardcopy").hide(); 
     } 
     if (!$("#agb").attr("checked")) { 
      $("label[for=agb]").css("color", "red"); 
     } 
     $("#step0").show(); 
     $("#step1").hide(); 
     $("#step2").hide(); 
     $("#senden").hide(); 
     selectStep(1); 
     return false; 
    } 
} 

HTML:

<form title="Auftrag" id="auftragsformular" action="assets/scripts/php/auftragform.php" method="post" enctype="multipart/form-data">  
     <div id="formcontainer"> 
      <fieldset title="Kontaktdaten" id="Kontakt"> 
      <legend> Ihre Daten </legend> 

       <div class="left"> 
        <label for="firma"> Firma</label> 
        <p> <input type="text" name="firma" id="firma" placeholder="Ihre Firma" > </p> 

        <label for="name"> Name</label> 
        <p> <input type="text" name="name" id="name" placeholder="Ihr kompletter Name (erforderlich)"> </p> 

        <label for="email"> Email-Adresse</label> 
        <p> <input type="text" name="email" id="email" placeholder="Ihre Email (erforderlich)"> 
        <a href="#" class="tip-trigger help"><span style="top: -150px;">Eine korrekte, existierende Email-Adresse wie z.B. [email protected] ist erforderlich! Kommas, Umlaute, Klammern und Sonderzeichen sind verboten!</span>?</a> 
        </p> 

        <label for="tel"> Telefon</label> 
        <p> <input type="tel" name="tel" id="tel" placeholder="Ihre Telefonnummer"> 
         <a href="#" class="tip-trigger"><span style="top: -110px;">Durch Ihre Telefonnummer können wir Sie schneller erreichen</span>?</a> 
        </p> 
       </div> 

       <div class="left"> 
        <label for="plz"> Postleitzahl</label> 
        <p> <input type="number" name="plz" id="plz" placeholder="Ihre Postleitzahl (erforderlich)"></p> 

        <label for="ort">Ort</label> 
        <p> <input type="text" name="ort" id="ort" placeholder="Ihr Wohnort (erforderlich)"></p> 

        <label for="strasse"> Straße</label> 
        <p> <input type="text" name="strasse" id="strasse" placeholder="Ihre Straße (erforderlich)"></p> 

        <label for="hausnr"> HausNr.</label> 
        <p> <input type="number" name="hausnr" id="hausnr" placeholder="Ihre Hausnummer (erforderlich)"></p> 
       </div> 

       <div class="clear"></div> 
      </fieldset> 




      <fieldset title="Auftrag" id="auftrag"> 
      <legend> Der Auftrag </legend> 

       <label for="hoehe"> Maße des Sicherungskasten(cm)</label> 
       <p> <input type="number" name="hoehe" id="hoehe" placeholder="Höhe (erforderlich)"> </p> 
       <p style=""> <input type="number" name="breite" id="breite" placeholder="Breite (erforderlich)"></p> 


       <div style="position: relative"> 
        <label> Wählen Sie die Art des Auftrags </label><p></p> 
        <div class="left radio"> 
         <label for="vorlage"> <img src="assets/images/cupcake.jpg" height="200px"/><br/> Motiv aus den Vorlagen auswählen</label> <br/> 
         <input type="radio" class="radio" name="varianten" id="vorlage" value="ausgewählte Vorlage" style="display:none;"> 
        </div> 
        <div class="left radio"> 
         <label for="digital"> <img src="assets/images/placeholder.png" height="200px"/><br/> Ein Bild hochladen</label> <br/> 
         <input type="radio" class="radio" name="varianten" id="digital" value="ein digitales Bild hochladen" style="display:none;"> 
        </div> 
        <div class="left radio"> 
         <label for="hardcopy"> <img src="assets/images/hardcopy.jpg" height="200px"/><br/> Ein gedrucktes Bild einsenden </label> <br/> 
         <input type="radio" class="radio" name="varianten" id="hardcopy" value="ein Bild einsenden" style="display:none;"> 
        </div> 
        <input type="radio" class="radio" name="varianten" id="versteckt_variante" value="nix" style="display:none;"> 

        <div class="clear"></div> 
        <div id="alert_varianten" class="alert"> Bitte wählen Sie eine Variante aus!</div> 
       </div> 

留下一些地方出來,因爲形式過於龐大。如果他們似乎很重要,我不認爲,因爲他們只是不分領域,我會張貼他們。

 <p> <input type="checkbox" id="agb" name="agb" value="agb" style="width: auto;"> <label for="agb">Um einen Auftrag abzuschicken müssen Sie die <a href="../agb">AGB</a> akzeptieren</label></p> 

    </fieldset> 

    <p class="nosee"> 
     <label for="your_email">This isn´t requested, just a robot detection field:</label> 
     <input id="your_email" name="your_email" size="60" value="" /> 
    </p> 

    <input type="submit" value="Abschicken" id="senden" class="buttonwichtig"> 

</div> 
</form> 
+0

找到在提交時調用哪個函數,它將接收事件'作爲參數的對象,在該函數中執行'event.preventDefault()'。 – sabithpocker

回答

0

,而不是試圖用一個全局變量,這個怎麼樣:

$(window).load(function(){  
    $('#auftragsformular').walidate({ 
     submitSelector: 'input[type="submit"]', 
     doIfAllIsValid: function() { 
      return send(false); 
     }, 
     doIfSomethingIsInvalid: function() { 
      return send(true); 
     } 
    }); 
    // ... 
    // Code removed for brevity 
}); 

function send(error) { 
    if (!error) { 
     if (is_not_bot()) { 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var adresse = $("#uebersicht_d").text(); 
      var auftrag = $("#uebersicht_a").text(); 

      $.post('assets/scripts/php/auftragform.php', "name=" + name + "&email=" + email + "&adresse=" + adresse + "&auftrag=" + auftrag, function(msg) { 
       $("#form").slideUp(1000); 
       $("#answer").delay(1000).fadeIn(1500); 
       console.log(msg); 
      }); 
     } 
    } else { 
     $('#errorModal').reveal(); 
     if ($("#versteckt_variante:checked").val() == "nix") { 
      $("#alert_varianten").show(); 
      $("#felderhardcopy").hide(); 
     } 
     if (!$("#agb").attr("checked")) { 
      $("label[for=agb]").css("color", "red"); 
     } 
     $("#step0").show(); 
     $("#step1, #step2, #senden").hide(); 
     selectStep(1); 
    } 
    return false; 
} 
+0

我改變了這一點,但沒有幫助。我認爲問題在於,在表單的action標記中調用的php腳本開始工作,儘管它不應該。 – user2594770

0

問題解決了 從來就只用一個「假」按鈕,連接所有的功能,所以只有表單的動作仍然是真正的提交按鈕。我用JQuery來隱藏/顯示按鈕,這樣任何關閉javascript的人都可以看到真正的提交按鈕,它提供了php腳本的形式

相關問題