jquery - form sent by action instead of javascript although return false -
my question goes little bit deeper written in headline. let me explain situation. i´m building form buying product divided in steps through plugin formtowizard using jquery. furthermore i´m using validate validate , customizable effects , reveal.js zurb (sorry can´t post more links because of missing reputation) nice modals handle occurring errors.
my proceeding:
- the validate function started when website finished loading , when form submitted scans whole form again.
- so told validate set variable error true if there´s error , set false if there´s no error.
- afterwards should call function send() deals modals , sending of form.
- it has got return false inside prevent html send natural way.
my problem:
- as code of function send becomes big isn´t proceeded anymore , interrupted .php file called action tag of form.
- if reduce numbers of lines in function send() works way should. these additional lines important.
so can avoid this?
i´ve tried wrap both functions in $("#auftragsform").submit() function didn´t work either. i´ve tried whole bunch of things , thought of know , can do, don´t find solution.
here´s code:
$(window).load(function(){ $('#auftragsformular').walidate({ submitselector: 'input[type="submit"]', doifallisvalid: function() { error = false; send(); }, doifsomethingisinvalid: function() { error = true; send(); } }); // initalize form $('#name').walidate('validate'); // make 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. max.mustermann@online.de 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> left parts out, because form huge. if seem important don´t think, because regardless fields, post them.
<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, 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>
instead of trying use global variable, how this:
$(window).load(function(){ $('#auftragsformular').walidate({ submitselector: 'input[type="submit"]', doifallisvalid: function() { return send(false); }, doifsomethingisinvalid: function() { return send(true); } }); // ... // code removed 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; } 
Comments
Post a Comment