У меня проблема с экспортом пары полей ввода 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
}
});