Sponsor-Board.de
Ajax Problem ...

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: Ajax Problem ... (/showthread.php?tid=61226)

Ajax Problem ... - Mave1993 - 28.08.2016 14:49

Hallo leutz,
habe grade eine kleine Denkblokade, liegt glaube am Wetter Biggrin

PHP-Code:
<div class="starter-template">
            <div id="message"></div>

            <!-- Formular Beginn -->

            <form role="form" id="frmContact">
                <div class="form-group" id="frmGrpVin">
                    <label for="vin" class="control-label">Fahrgestellnummer</label>
                    <input type="text" id="vin" class="form-control" placeholder="Deine VIN f&auml;ngt mit WF0 an und hat 17 Zeichen">
                </div>
                <div class="form-group" id="frmGrpRom">
                    <label for="rom" class="control-label">NVM target ROM</label>
                    <input type="text" id="rom" class="form-control" placeholder="Deine 4-Stellige NVM target ROM">
                </div>
                <div class="form-group" id="frmGrpEmail">
                    <label for="email" class="control-label">E-Mail Adresse</label>
                    <input type="text" id="email" class="form-control"  placeholder="Deine E-Mail Adresse">
                </div>
                <div class="form-group" id="frmGrpFon">
                    <label for="fon" class="control-label">Telefon- oder Mobilfunkrufnummer</label>
                    <input type="text" id="fon" class="form-control"  placeholder="+49">
                </div>
                <div class="form-group" id="frmGrpGear">
                    <label for="gear" class="control-label">W&auml;hle den Getriebetyp</label>
            <div class="radio">
                  <label>
                    <input type="radio" name="gear" id="frmGrpGear" value="Schaltgetriebe" checked>
                        Schaltgetriebe
                  </label>
            </div>
            <div class="radio">
                  <label>
                    <input type="radio" name="gear" id="frmGrpGear" value="Automatikgetriebe">
                        Automatikgetriebe
                  </label>
            </div>
        </div>
                <div class="form-group" id="frmGrpOrt">
                    <label for="ort" class="control-label">W&auml;hle den Installationsort</label>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Hamburg" checked>
                        Hamburg ( ca. <?php echo round(ogdbDistance($_POST["plz"],20148)); ?> km )
                  </label>
            </div>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Berlin">
                        Berlin ( ca. <?php echo round(ogdbDistance($_POST["plz"],10115)); ?> km )
                  </label>
            </div>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Wesel">
                        Wesel ( ca. <?php echo round(ogdbDistance($_POST["plz"],46483)); ?> km )
                  </label>
            </div>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Kassel">
                        Kassel ( ca. <?php echo round(ogdbDistance($_POST["plz"],34246)); ?> km )
                  </label>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Stuttgart">
                        Stuttgart ( ca. <?php echo round(ogdbDistance($_POST["plz"],70178)); ?> km )
                  </label>
            </div>
            <div class="radio">
                  <label>
                    <input type="radio" name="ort" id="frmGrpOrt" value="Wien">
                        Wien ( A ) ( ca. <?php echo round(ogdbDistance($_POST["plz"],94032))+282; ?> km )
                  </label>
            </div>
            </div>
        </div>
                <div class="form-group" id="frmGrpCaptcha">
                    <label for="captcha" class="control-label">Wie viel ist "2 + 3"?</label>
                    <input type="text" id="captcha" class="form-control" placeholder="Ergebnis der o.g. Rechenaufgabe">
                </div>

                <div class="form-group text-right">
                    <button type="submit" id="submitBtn" class="btn btn-primary btn-lg">Absenden</button>
                </div>
            </form>

            <!-- Formular Ende -->

    </div>
<script>
    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }

    $( '#frmContact').submit( function() {
        var formControl = true;

        $( '#frmGrpVin' ).removeClass( 'has-error' );
        $( '#frmGrpRom' ).removeClass( 'has-error' );
        $( '#frmGrpEmail' ).removeClass( 'has-error' );
        $( '#frmGrpFon' ).removeClass( 'has-error' );
        $( '#frmGrpOrt' ).removeClass( 'has-error' );
        $( '#frmGrpGear' ).removeClass( 'has-error' );


        $( '#frmGrpCaptcha' ).removeClass( 'has-error' );


        var vin = $( '#vin' );
        var rom = $( '#rom' );
        var fon = $( '#fon' );
        var ort = $( '#ort' );
        var gear = $( '#gear' );
        var email = $( '#email' );
        var captcha = $( '#captcha' );

        if(vin.val() == '') {
            formControl = false;
            $( '#frmGrpVin' ).addClass( 'has-error' );
        }

        if(rom.val() == '') {
            formControl = false;
            $( '#frmGrpRom' ).addClass( 'has-error' );
        }
        if(fon.val() == '') {
            formControl = false;
            $( '#frmGrpFon' ).addClass( 'has-error' );
        }

        if(validateEmail(email.val()) == false) {
            formControl = false;
            $( '#frmGrpEmail' ).addClass( 'has-error' );
        }

        if(captcha.val() != '5') {
            formControl = false;
            $( '#frmGrpCaptcha' ).addClass( 'has-error' );
        }

if(formControl) {
     $.ajax({
          type: "POST",
          url: "contents/regist_vorort_send.php",
          data: { 
vin:vin.val(),
rom:rom.val(),
gear:gear.val(),
ort:ort.val(),
fon:fon.val(),
email:email.val(),
nachricht:nachricht.val()
          }
     }).done(function(msg) {
          $( '#message' ).addClass( 'alert' );
          $( '#message' ).addClass( 'alert-success' );
          $( '#message').html( msg );
     });
}

        return false;
    } );
</script> 


Das Form wird abgesendet, was ja eigentlich nicht soll, sondern die PHP Datei per Ajax geladen wird. Das Script funktioniert auf meiner Seite schon mehrmals, denke das ein Havascript Fehler hier vorliegt, nur leider blicke ich grade nicht durch.. Das Wetter Biggrin
Sieht jemand den Fehler?

RE: Ajax Problem ... - Kevv - 28.08.2016 17:13

Code:
<div class="starter-template">
    <div id="message"></div><!-- Formular Beginn -->

    <form role="form" id="frmContact">
        <div class="form-group" id="frmGrpVin">
            <label for="vin" class="control-label">Fahrgestellnummer</label> <input type="text" id="vin" class="form-control" placeholder="Deine VIN f&auml;ngt mit WF0 an und hat 17 Zeichen">
        </div>

        <div class="form-group" id="frmGrpRom">
            <label for="rom" class="control-label">NVM target ROM</label> <input type="text" id="rom" class="form-control" placeholder="Deine 4-Stellige NVM target ROM">
        </div>

        <div class="form-group" id="frmGrpEmail">
            <label for="email" class="control-label">E-Mail Adresse</label> <input type="text" id="email" class="form-control" placeholder="Deine E-Mail Adresse">
        </div>

        <div class="form-group" id="frmGrpFon">
            <label for="fon" class="control-label">Telefon- oder Mobilfunkrufnummer</label> <input type="text" id="fon" class="form-control" placeholder="+49">
        </div>

        <div class="form-group" id="frmGrpGear">
            <label for="gear" class="control-label">W&auml;hle den Getriebetyp</label>

            <div class="radio">
                <label><input type="radio" name="gear" id="frmGrpGear" value="Schaltgetriebe" checked> Schaltgetriebe</label>
            </div>

            <div class="radio">
                <label><input type="radio" name="gear" id="frmGrpGear" value="Automatikgetriebe"> Automatikgetriebe</label>
            </div>
        </div>

        <div class="form-group" id="frmGrpOrt">
            <label for="ort" class="control-label">W&auml;hle den Installationsort</label>

            <div class="radio">
                <label><input type="radio" name="ort" id="frmGrpOrt" value="Hamburg" checked> Hamburg ( ca. <?php echo round(ogdbDistance($_POST["plz"],20148)); ?> km )</label>
            </div>

            <div class="radio">
                <label><input type="radio" name="ort" id="frmGrpOrt" value="Berlin"> Berlin ( ca. <?php echo round(ogdbDistance($_POST["plz"],10115)); ?> km )</label>
            </div>

            <div class="radio">
                <label><input type="radio" name="ort" id="frmGrpOrt" value="Wesel"> Wesel ( ca. <?php echo round(ogdbDistance($_POST["plz"],46483)); ?> km )</label>
            </div>

            <div class="radio">
                <label><input type="radio" name="ort" id="frmGrpOrt" value="Kassel"> Kassel ( ca. <?php echo round(ogdbDistance($_POST["plz"],34246)); ?> km )</label>

                <div class="radio">
                    <label><input type="radio" name="ort" id="frmGrpOrt" value="Stuttgart"> Stuttgart ( ca. <?php echo round(ogdbDistance($_POST["plz"],70178)); ?> km )</label>
                </div>

                <div class="radio">
                    <label><input type="radio" name="ort" id="frmGrpOrt" value="Wien"> Wien ( A ) ( ca. <?php echo round(ogdbDistance($_POST["plz"],94032))+282; ?> km )</label>
                </div>
            </div>
        </div>

        <div class="form-group" id="frmGrpCaptcha">
            <label for="captcha" class="control-label">Wie viel ist "2 + 3"?</label> <input type="text" id="captcha" class="form-control" placeholder="Ergebnis der o.g. Rechenaufgabe">
        </div>

        <div class="form-group text-right">
            <button type="submit" id="submitBtn" class="btn btn-primary btn-lg">Absenden</button>
        </div>
    </form><!-- Formular Ende -->
</div>
    <script type="text/javascript">
function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }

    $( '#frmContact').submit( function(e) {
        var formControl = true;

        $( '#frmGrpVin' ).removeClass( 'has-error' );
        $( '#frmGrpRom' ).removeClass( 'has-error' );
        $( '#frmGrpEmail' ).removeClass( 'has-error' );
        $( '#frmGrpFon' ).removeClass( 'has-error' );
        $( '#frmGrpOrt' ).removeClass( 'has-error' );
        $( '#frmGrpGear' ).removeClass( 'has-error' );


        $( '#frmGrpCaptcha' ).removeClass( 'has-error' );


        var vin = $( '#vin' );
        var rom = $( '#rom' );
        var fon = $( '#fon' );
        var ort = $( '#ort' );
        var gear = $( '#gear' );
        var email = $( '#email' );
        var captcha = $( '#captcha' );

        if(vin.val() == '') {
            formControl = false;
            $( '#frmGrpVin' ).addClass( 'has-error' );
        }

        if(rom.val() == '') {
            formControl = false;
            $( '#frmGrpRom' ).addClass( 'has-error' );
        }
        if(fon.val() == '') {
            formControl = false;
            $( '#frmGrpFon' ).addClass( 'has-error' );
        }

        if(validateEmail(email.val()) == false) {
            formControl = false;
            $( '#frmGrpEmail' ).addClass( 'has-error' );
        }

        if(captcha.val() != '5') {
            formControl = false;
            $( '#frmGrpCaptcha' ).addClass( 'has-error' );
        }

    if(formControl) {
     $.ajax({
          type: "POST",
          url: "contents/regist_vorort_send.php",
          data: {
              vin:vin.val(),
              rom:rom.val(),
              gear:gear.val(),
              ort:ort.val(),
              fon:fon.val(),
              email:email.val(),
              nachricht:nachricht.val()
          }
     }).done(function(msg) {
          $( '#message' ).addClass( 'alert' );
          $( '#message' ).addClass( 'alert-success' );
          $( '#message').html( msg );
     });
    }

        e.preventDefault();
    } );
    </script>


Versuch mal das.

RE: Ajax Problem ... - Mave1993 - 28.08.2016 19:23

Hey, wetter ist kühler, da klappt es wieder, hatte unten massage drinne als variable, die aber nicht definiert wurde, fehler behoben.

RE: Ajax Problem ... - Aaron - 29.08.2016 11:00

Sowas steht auch immer in der Fehler-Console von jedem gängigen Browser Smile
(eventuell + n Entwickler-Plugin)