Проблема с динамическим экспортом полей формы, созданных пользователем (интерфейсом), в firebase? - PullRequest
0 голосов
/ 07 мая 2020

У меня проблема с экспортом пары полей ввода Dynami c в firebase,

Кажется, я получаю начальные поля, но когда я генерирую новые поля Dynami c, они не получают

экспортировано в базу данных, мне посоветовали поставить: [] за тегом name или id, чтобы решить эту проблему.

К сожалению, это не помогает.

Html

       <!-- Begining modal section -->
       <div class="bg-modal">
        <div class="modal-contents">

            <div class="close li:hoover">+</div>

            <!-- validation todo -->
            <form class="input-modal" id="kundInfo">
                <br>    
                <input class="input-modal" type="text" placeholder="name" id="userName" required>

                <input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>

                <textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>

                <select class="input-modal" id="deliveryTown" value="">
                    <option value="default">Välj leveransort</option>
                    <option value="Stockholm">Stockholm</option>
                    <option value="Göteborg">Göteborg</option>
                    <option value="Kalmar">Kalmar</option>
                </select>
                <br>

                <div id="input-modal">
                <input class="dynamic-input-fields" type="text" id="tillverkare[]" placeholder="Tillverkare">
                <input class="dynamic-input-fields" type="text" id="artikel[]" placeholder="Artikel" required>
                <input class="dynamic-input-fields" type="number" id="kvantitet[]" placeholder="Kvantitet" required>
                <input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
                <!-- (original submit button)
                    <input type="submit" value="submit">
                -->
                </div>
                <br>
                <select class="input-modal" id="produktKategori" value="">
                    <option value="default">Välj inköpskategori</option>
                    <option value="trävaror">Trävaror</option>
                    <option value="mur&puts">Mur & puts</option>
                    <option value="mark&trädgård">Mark & trädgård</option>
                    <option value="vvs">VVS</option>
                    <option value="våtrum">Våtrum</option>
                    <option value="verktyg">Verktyg</option>
                </select>
                <br>
                <br>
                <button class="input-modal" id="Skicka" type="submit">Skicka</button>
            </form>

            <div class="alert">Ditt förfrågan har skickats!</div>

        </div>
    </div>

jquery. js (для генерации динамических c полей)

$(document).ready(function() {


    $("#add").click(function(e) {
      event.preventDefault()
      $('#input-modal').append(
        '<div><input class="dynamic-input-fields" type="text" id="tillverkare[]" name="tillverkare[]" placeholder="Tillverkare">'+
        '<input class="dynamic-input-fields" type="text" id="artikel[]" name="artikel[]" placeholder="Artikel">' +
        '<input class="dynamic-input-fields" type="number" id="kvantitet[]" name="kvantitet[]" placeholder="kvantitet">' +
        '<input type="button" name="delete" value="delete" id="delete"/></div>'
  
      );
  
    });
  
  
    $('body').on('click', '#delete', function(e) {
      event.preventDefault()
      $(this).parent('div').remove();
    });
  });

main. js (где инициализируется firebase)

//  Firebase configuration
    var firebaseConfig = {
    apiKey: "***************************",
    authDomain: "***************************",
    databaseURL: "***************************",
    projectId: "***************************",
    storageBucket: "***************************",
    messagingSenderId: "***************************",
    appId: "***************************"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // reference messages collection

  var messagesRef = firebase.database().ref('kundAnbud');


    /*--------------------------
    listen for submit form
    ----------------------------*/
    document.getElementById('kundInfo').addEventListener('submit', submitForm);
    
    
    //submit form

    function submitForm (e) {
    e.preventDefault();
    
        // get all the form values.
        var userName = getInputVal('userName');
        var userEmail = getInputVal('userEmail');
        var userMessage = getInputVal('userMessage');
        var deliveryTown = getInputVal('deliveryTown');
        var produktKategori = getInputVal('produktKategori');
        var tillverkare = getInputVal('tillverkare[]');
        var artikel = getInputVal('artikel[]');
        var kvantitet = getInputVal('kvantitet[]');
        
        
        
        //save message
        saveMessage(userName, userEmail, userMessage, deliveryTown, produktKategori, tillverkare, artikel, kvantitet);

        //show alert
        document.querySelector('.alert').style.display = 'block';

        // hide alert after 3 secs.
        setTimeout(function(){
            document.querySelector('.alert').style.display = 'none';
        },3000);

        //clear form
        document.getElementById('kundInfo').reset();
    }

    //function to get form values.

    function getInputVal(id){
        return document.getElementById(id).value;
    }

    //save message to firebase.
    function saveMessage(userName, userEmail, userMessage, deliveryTown, produktKategori, tillverkare, artikel, kvantitet){
        var newMessageRef = messagesRef.push();
        newMessageRef.set({
            userName: userName,
            userEmail: userEmail,
            userMessage: userMessage,
            deliveryTown: deliveryTown,
            produktKategori: produktKategori,
            tillverkare: tillverkare,
            artikel: artikel,
            kvantitet: kvantitet,
        });
    }

Возможно, это сработает?


    $("#add").click(function(e){
        e.preventDefault();
        if(x < 10){x++; $(wrapper).append(
                '<div><input id="tillverkare'+x+'"/><input id="artikel'+x+'"/><input id="kvantitet'+x+'"/><a href="#" class="delete">Delete</a></div>'
                
                ); //add input box
        }
    });
...