formular post

[black79]

Code:

/* START */
let buttonKontakt = document.querySelector('button[name="save_kontakt"]');
let formKontakt = document.forms[0].name;

if (buttonKontakt) {
    buttonKontakt.addEventListener('click', () => {
        alert('TEST');
        $.ajax({
            type: 'POST',
            url: '../database/post_kontakt_neu.php',
            data: {
                vorname: formKontakt.querySelector('input[name="firstname"]').value,
                nachname: formKontakt.querySelector('input[name="lastname"]').value,
                firma: formKontakt.querySelector('input[name="company"]').value,
                telefon: formKontakt.querySelector('input[name="phone"]').value,
                mobil: formKontakt.querySelector('input[name="mobil"]').value,
                fax: formKontakt.querySelector('input[name="fax"]').value,
                funktion: formKontakt.querySelector('input[name="funktion"]').value,
                email: formKontakt.querySelector('input[name="email"]').value,
                prowl: formKontakt.querySelector('input[name="prowl"]').value,
                divera: formKontakt.querySelector('input[name="divera"]').value,
                synonym: formKontakt.querySelector('input[name="synonym"]').value,
                action: 'insert_kontakt',
            },
            success: function () {
                document.forms[0].reset();
            },
        });
    });
}
/* ENDE */

Code:

<div class="card-body">
    <form name="kontakt">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td scope="row" class="th-kontakt">Vorname :</td>
                    <td><input class="input-kontakt-neu" name="firstname"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Nachname :</td>
                    <td><input class="input-kontakt-neu" name="lastname"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Firma :</td>
                    <td><input class="input-kontakt-neu" name="company"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Telefon :</td>
                    <td><input class="input-kontakt-neu" name="phone"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Mobil :</td>
                    <td><input class="input-kontakt-neu" name="mobil"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Fax :</td>
                    <td><input class="input-kontakt-neu" name="fax"></td>
                </tr>
                <tr>
                     <td scope="row" class="th-kontakt">Funktion :</td>
                     <td><input class="input-kontakt-neu" name="funktion"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">E-Mail :</td>
                    <td><input class="input-kontakt-neu" name="email"></td>
                </tr>
                    <td scope="row" class="th-kontakt">Prowl :</td>
                    <td><input class="input-kontakt-neu" name="prowl"></td>
                 </tr>
                    <td scope="row" class="th-kontakt">Divera :</td>
                    <td><input class="input-kontakt-neu"  name="divera"></td>
                </tr>
                <tr>
                    <td scope="row" class="th-kontakt">Synonym :</td>
                    <td><input class="input-kontakt-neu" name="synonym"></td>
                </tr>
            </tbody>
        </table>
     <button type="button" name="save_kontakt"
             class="btn btn-outline-primary btn-sm" value="save_kontakt">Kontakt erstellen</button>
    </form>
</div>

Fehlermeldung : TypeError: formKontakt.querySelector is not a funnction

anonymous tabkontakt.js:12
EventListener.handleEvent tabkontakt.js:6

   

was ist hier falsch?

[Sempervivum]

Diese Zeile:

Code:

let formKontakt = document.forms[0].name;

liefert einfach das name-Attribut des Formulars, also einen String, aber nicht das Formular selber, das diesen Namen hat.
Am besten findest Du das Formular mit querySelector wie in der Zeile darüber:

Code:

const formKontakt = document.querySelector('form[name="kontakt"]');